技能介绍

要解决什么问题

当需求已经定稿、你要做的是 Web 前端工程（实现页面、改路由、调构建、接 CloudBase、部署静态站）时，常见问题不是「缺组件库」，而是边界混在一起：把视觉探索当成开发任务、把登录塞进云函数、改完路由却不配静态托管的 History 模式回退，或仅凭 tsc 通过就宣称完成。

本技能把这类工作收敛到 React / Vue / Vite 与浏览器可验证的执行面，并规定在改代码或发布静态资源前，必须先对齐 CloudBase 技能集里的 变更安全协议 与 部署门禁。

技能如何工作

激活时机：实现、集成、调试、构建、部署或验收 Web 前端/静态站点；涉及路由、表单、异步流或 CloudBase Web SDK 时优先读本技能。

推荐阅读链（按任务分叉，而非一次读完）：

框架与构建约定 → frameworks.md
页面级冒烟与回归 → browser-testing.md（配合 agent-browser 实测）
登录流 → auth-tool / auth-web 技能，不要把 Web 登录逻辑迁到云函数
公众号 JSAPI/Native 支付或微信 OAuth → cloudbase-wechat-integration
数据库读写 → 对应 database 技能

工程宪法（不可妥协）：

TypeScript：禁止用 any、@ts-ignore 等掩盖类型错误；边界数据用 unknown 再收窄。
完成前自证：静态层跑 tsc --noEmit、lint、项目 build；凡影响渲染/路由/鉴权/异步的改动，必须在浏览器复现用户路径并记录「路由、操作、期望、实际」。
不粉饰失败：不用空 catch、不删失败测试换绿 CI。

CloudBase Web 集成要点：bundler 项目用 npm 装 Web SDK；cloudbase.init 的 env 须为完整 EnvId；静态托管默认倾向 hash 路由；若用 History 模式，须把托管 404 文档 指到 index.html，否则刷新子路由会出现 NoSuchKey/404。

适用边界与坑

不要用：纯 UI 方向/原型探索（应走 ui-design）、小程序、纯后端、微信支付/OAuth 的合同细节（先识别 Web 面再走微信集成技能）。
常见失误：未区分「设计」与「工程执行」；在存量应用里先大改 UI 而非补全现有 handler；跳过浏览器验证；在已有项目里硬换框架除非用户明确要求。