（1339期）web-development – 现代 Web 前端工程化开发助手

现代 Web 前端工程化开发助手 基于 CloudBase 平台的专业级 Web 开发技能，提供 React/Vue/Vite 工程规范、TypeScript 严格类型安全与自动化浏览器验证，助力团队构建可维护、可部署的生产级前端应用。 使用说明 核心用法 该技能定位为 Web 前端工程执行层 的专业助手，覆盖从框架搭建、组件实现到部署验证的完整开发周期。使用时需首先明确任务边界——区分「设计探索」与「工程实现」：若视觉方向未定，必须先加载 ui-design 技能输出设计规范，再进入本技能的编码阶段。 具体工作流程包括： 澄清执行表面：确认是框架搭建、页面实现、调试修复还是 CloudBase 集成； 遵循项目约定：优先复用现有技术栈（Vite 为默认推荐），保持 src/ 源码与 dist/ 输出结构； 浏览器级验证：对路由、表单、渲染等用户可见变更，必须使用 agent-browser 工具进行实际页面测试，记录检查路径与结果； CloudBase 集成：按需引入 @cloudbase/js-sdk，注意 History 模式 SPA 需配置静态托管的 404 错误文档指向 index.html。 显著优点 工程纪律严格：强制 TypeScript 零 any 策略，要求 unknown + 类型守卫作为唯一合法逃生舱，从根本上杜绝类型系统失效； 质量门禁完备：建立「编译层 + 运行时层」双重验证——tsc --noEmit 零错误、构建无警告、单元测试通过，且必须通过浏览器实际复现用户流程方可标记完成； CloudBase 原生适配：深度集成腾讯云 CloudBase 生态，涵盖 Web SDK 接入、静态托管配置、History 模式路由修复等生产环境常见问题； sibling 技能协同：通过相对路径引用同域内的认证、支付、数据库等技能，形成模块化、可扩展的技能网络。 潜在局限 设计前置依赖：明确排斥视觉探索工作，若用户仅提供模糊需求而无设计稿，强制阻断编码直至 ui-design 介入，可能增加前期沟通成本； 工具链预设偏向：默认推荐 Vite + TypeScript，对 Webpack、Rollup 等其他构建工具的支持需依赖项目已有约定，灵活性受限； 验证环境门槛：要求具备本地可运行的浏览器环境及 CloudBase 凭证，部分步骤在受限环境中无法完整执行，需显式声明未验证项； 非全栈覆盖：明确排除小程序、原生 App、纯后端服务，跨端需求需切换至其他专项技能。 适合人群 前端工程团队：需要统一 React/Vue 技术栈、强化代码质量门禁的中大型项目组； CloudBase 生态用户：已采用或计划采用腾讯云 CloudBase 作为 BaaS 与静态托管的开发者； DevOps 与运维人员：负责前端构建流水线、部署门禁配置及生产环境路由修复的技术角色； 技术负责人：希望建立「无 any」「自验证完成」等工程文化，提升代码可维护性的团队管理者。 使用风险 性能风险：严格的类型检查与双重验证流程可能延长开发反馈周期，在追求快速原型的场景下存在过度工程化风险； 依赖项风险：@cloudbase/js-sdk 与 MCP 工具的版本耦合可能随平台升级产生 breaking change，需锁定版本或及时跟进官方文档； 凭证与权限风险：CloudBase 集成步骤涉及环境 ID、密钥等敏感信息，若在未隔离的日志或代码中硬编码可能导致泄露； 验证盲区风险：当本地缺乏后端服务或付费 API 环境时，「运行时层」验证无法执行，易留下仅通过编译但未实际运行的隐患代码，必须显式标注未验证项。 总结 web-development 是一款面向生产环境的高纪律性前端工程技能，其价值不在于快速生成代码，而在于建立可审计、可回滚、可验证的稳健开发流程。适合追求长期可维护性而非短期交付速度的严肃技术团队。 原始说明 Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.