用途:在 build 阶段把已批准的交互与视觉方向工程化为可运行 UI 组件或页面,输出可生产、通过可访问性检查的 UI 组件与测试。只做产品/视觉/交互决策、纯后端或脚本变更、以及仅需浏览器截图或可访问性审查时不适用。
主要能力:组件架构遵循一个组件一个目录、组合优于配置、UI 逻辑与业务逻辑分离;状态管理从 useState 起步,按需上升到 useReducer、Context、Zustand/Jotai 或 Redux/MobX;可访问性按 WCAG 2.1 AA 强制要求覆盖键盘导航、ARIA 标签、焦点管理与空/错误/加载状态;响应式为移动优先并给出断点规则;加载与过渡优先使用 Skeleton 而非 Spinner。
使用方式:前置加载 CANON.md 与 build-quality-tdd/SKILL.md。缺少已批准设计时回到 design-workflow-design。按输出模板整理设计来源、状态覆盖、可访问性与响应式说明,完成后交由 build-frontend-browser-testing 做浏览器验证,并输出至 verify-frontend-accessibility。
限制:不在 build 阶段重新决定主流程、视觉方向或信息架构;不使用项目调色板外的颜色、无键盘访问的 onClick div、颜色作唯一状态指示、缺少三状态之一、无 alt 文本图像、未设宽高的图片等;移动端弹窗无法滚动或 320px 溢出需修正。具体安装命令与代码内容暂未提供。