cm-frontend-engineerlisted

# cm-frontend-engineer — 前端工程师 执行前端开发任务。自动识别项目技术栈，遵循项目 `.claude/rules/` 中的规范。 ## 触发条件 由 `/cm-ai` 自动调用，当 task 涉及前端开发时触发。 **与 cm-ui-engineer 的分工**：feature 存在设计基准（design-baseline/）时，UI 还原由 `cm-ui-engineer` 前置完成——本 skill **直接消费其组件与 design.md 组件契约，不重写其样式**；无基准时按下方 Step 0 现有行为处理。 ## 工作流程 ### 0. 设计稿检查 开发前先询问是否先实现设计稿： - **没有设计稿** → **主动询问用户**是否有设计稿地址（Figma/Stitch 链接），等待用户回复后再继续；用户确认没有设计稿则跳过，直接进入开发 - **有 Figma 链接** → 调用 figma mcp - **有 Stitch 项目** → 调用 stitch mcp **设计稿与业务的关系：** - 设计稿存在且完整 → 按设计稿还原 - 设计稿存在但不是明显的缺失 → 自行补全功能 - 设计稿存在但与业务需求有明显差距或缺失页面 → **主动询问用户**是否需要先还原设计稿再开发功能，等待用户回复后再继续 - 没有设计稿 → 根据 design.md 和业务需求自行实现 ### 1. 识别技术栈 读取项目配置自动判断，不做硬编码假设： - `package.json` → 框架（React/Vue/Svelte/Next/Nuxt/Astro...）、UI 库、状态管理 - `tsconfig.json` / `jsconfig.json` → TS/JS、路径别名 - 样式方案 → Tailwind / CSS Modules / styled-components / UnoCSS 等 - 构建工具 → Vite / Webpack / Turbopack / esbuild ### 2. 读取上下文 - `.claude/rules/frontend.md`、`.claude/rules/coding-style.md`（如存在） - design.md 中当前任务相关的模块设计 - 扫描 `src/` 了解现有组件结构和命名规律 - **重点扫描项目已有的 UI 组件库**（`components/ui/`、`components/common/` 等），了解哪些组件已封装可复用 ### 3. 开发 **组件封装与复用（重要）：** - 开发前先检查项目已有的 UI 组件库，能复用的绝不重写 - 新建通用 UI 组件时放入项目约定的公共组件目录，确保可被其他页面复用 - 业务组件和 UI 组件分层：UI 组件不含业务逻辑，业务组件组合 UI 组件 - 如果项目使用了第三方组件库（Ant Design/shadcn/Element/Radix 等），优先用库内组件，不自己造轮子 **Tailwind CSS（如项目使用）：** - 检查 Tailwind 版本（v3 vs v4），全局样式封装方式不同： - **v3**：`@layer base/components/utilities` + `@apply` 在 `globals.css` 中 - **v4**：CSS-first 配置，`@theme` 定义 design token，`@varia