核心定位与用法
web-development 是面向 Web 前端工程落地的执行型技能，用于在产品方向已明确的前提下，完成 React、Vue、Vite 等现代前端框架的页面实现、路由配置、构建部署及 CloudBase Web 集成。其激活条件严格限定为“工程执行”而非“视觉探索”，若涉及 UI 方向未定，需先调用 ui-design。
核心工作流程
1. 澄清执行面：区分框架搭建、页面实现、调试排障、部署验证或 CloudBase 集成，避免任务范围蔓延至无关后端。
2. 遵循工程宪章（非协商条款）：
3. 框架与构建约定：优先复用现有技术栈；新项目默认采用 Vite；源码置于 src，构建输出置于 dist。
4. 浏览器驱动验证：对路由、表单、渲染、异步流等用户可见变更，强制使用 agent-browser 实际打开页面并记录“路由-行为-预期-实际”四元组。
- TypeScript 零容忍：禁止以
any、@ts-ignore、@ts-nocheck绕过类型错误；边界未知数据使用unknown+类型守卫。 - 自证先于宣告：任何非琐碎变更必须通过 Change Safety Protocol；静态托管发布前需完成 Deployment Gate。必须通过
tsc --noEmit、构建、单元测试，并使用agent-browser进行浏览器级回归验证，方可标记完成。 - 不掩盖失败：禁止空
catch块删失败测试或仅因“编译通过”而结案。
CloudBase Web 集成要点
- SDK 引入：npm 安装优先，CDN 仅用于纯静态 HTML。
- 认证边界：Web 登录须用 CloudBase SDK 内置能力，禁止将逻辑下沉至云函数。
- 静态托管陷阱：History 模式 SPA 必须配置 404 error document 指向 `index.html`，否则刷新或直接访问子路由触发
NoSuchKey404。需通过manageHostingMCP 工具显式设置并queryHosting验证。 - EnvId 规范：须将环境别名解析为完整 EnvId 后方可写入初始化代码。
显著优点
- 工程纪律强：以“类型安全+浏览器验证”双保险替代代码即交付的粗放模式，显著降低运行时回归。
- CloudBase 深度集成：对静态托管 SPA 路由、认证流、EnvId 解析等常见坑点给出可执行的 MCP 工具命令与验证步骤。 - 边界清晰：通过“Use / Do NOT use”与“Common mistakes”前置拦截常见误用（如混淆设计/工程、混用云函数处理 Web 认证）。
潜在局限与风险
- 强约束门槛：对快速原型或遗留 JavaScript 项目，严格的 TypeScript 与验证流程可能增加初期成本。 - 浏览器验证依赖：若本地环境因凭证缺失、后端未就绪或付费 API 阻塞，需显式声明未验证项，不能自动降级为“代码层面完成”。 - 范围切割严格：不覆盖小程序、纯后端服务或视觉系统探索，复杂全栈项目需多技能协同。
适用人群
- 需在 CloudBase 生态内交付企业级 Web 应用的 React/Vue 开发者； - 追求类型安全与可验证交付流程的前端工程师； - 已明确产品方案、进入工程实施阶段的技术团队。
常规风险提醒
- History 模式 404：遗漏 error document 配置是高频线上故障源。 - any 蔓延：一次妥协可能引发链式类型失效，需 CR 阶段重点审计。 - 未经验证的“完成”：跳过 browser agent 验证即宣告交付，易导致路由、鉴权类故障逃逸至生产环境。