#前端开发最佳实践

❌ "帮我写一个登录页面"
✅ "使用 React + TypeScript + Tailwind CSS 实现登录页面：
   - 使用 shadcn/ui 的 Card、Input、Button 组件
   - 表单验证使用 react-hook-form + zod
   - 支持邮箱/密码登录，包含记住密码复选框
   - 参考 src/components/ui/UserCard.tsx 的组件风格
   - 错误提示显示在对应输入框下方"

> 第一步：定义 TypeScript 类型（Props、State、API 响应）
> 第二步：生成静态 UI（纯 JSX + 样式，不含交互逻辑）
> 第三步：添加表单逻辑和事件处理
> 第四步：接入 API 请求层
> 第五步：添加 loading、error、empty 状态
> 第六步：编写测试

> 参考 src/components/ui/UserCard.tsx 的代码风格，
> 创建 ProductCard 组件，包含：
> - 商品图片（懒加载）
> - 商品名称、价格、评分
> - 加入购物车按钮
> - 使用 Tailwind CSS，遵循 UserCard 的布局模式

> 在 vite.config.ts 中配置路径别名：@ 指向 src/

> 配置 rollup-plugin-visualizer 分析打包体积，找出最大的依赖

> 配置开发服务器代理：/api 代理到 http://localhost:8080

> 在 next.config.ts 中配置图片域名白名单，允许 images.example.com

> 配置 Next.js 环境变量：创建 .env.local，定义 NEXT_PUBLIC_API_URL

> 使用 ECC 的 typescript-reviewer 审查 UserDashboard.tsx：
> 检查 TypeScript 类型安全、不必要的 re-render、useEffect 清理

> 使用 frontend-patterns skill 实现用户设置页面：
> 先写组件测试，再实现组件 → Hook → API 层

> 使用 e2e-testing skill 为登录流程编写 Playwright 测试

1. 🔴 RED    — 先写组件测试（Vitest + React Testing Library），运行确认失败
2. 🟢 GREEN  — 写最小实现让测试通过
3. 🔵 REFACTOR — 重构优化，保持测试通过

> 使用 Superpowers 工作流，实现用户设置页面：
> 1. 头脑风暴确认需求（哪些设置项？表单布局？实时保存还是手动保存？）
> 2. 创建 Git Worktree 隔离开发
> 3. 编写计划：拆分为类型定义 → 静态 UI → 表单逻辑 → API 对接 → 测试
> 4. TDD 驱动：每个组件先写测试再实现
> 5. 代码审查：检查 re-render、类型安全、无障碍

> /superpowers:brainstorming
> 设计一个数据看板页面，需要支持自定义拖拽布局、实时数据刷新、图表联动

> /superpowers:systematic-debugging
> 页面在 Safari 上样式错乱，Chrome 正常，帮我排查

> /plan-design-review
> 审查用户管理页面的 UI 设计质量

> /qa https://localhost:5173
> 在真实浏览器中测试前端应用，自动发现交互 Bug

> /review
> 在 feature/user-settings 分支上审查前端代码变更

> /benchmark
> 测量首页的 Core Web Vitals 和加载性能

> 这个前端项目的路由结构是什么？有哪些页面和嵌套路由？

> 如果我修改 src/stores/authStore.ts，会影响哪些页面和组件？

> 追踪从登录页面到 API 层的完整数据流

> 把 src/components/UserProfile.tsx 重命名为 AccountProfile.tsx，包括所有页面中的 import

> 哪些组件使用了 useAuth Hook？如果修改它的返回值类型会影响什么？

> 把 useCart Hook 中的 calculateTotal 逻辑提取到 utils/pricing.ts

> 查看 src/features/dashboard/DashboardPage.tsx 的符号大纲，有哪些组件和 Hook？

> 使用 Chrome DevTools MCP 检查页面上的登录按钮样式

> 测量首页的加载时间，找出最慢的资源

> 监听页面的网络请求，找出失败的 API 调用

> /speckit.specify
> 为订单管理页面编写规格：
> - 用户可以查看订单列表（支持分页、搜索、筛选）
> - 点击订单行展开详情面板（侧边滑出）
> - 支持批量操作（选择多个订单进行发货、取消）
> - 列表支持拖拽排序
> - 移动端：筛选变为抽屉式弹出，详情变为全屏页

> /speckit.clarify
> 澄清订单管理页面的交互规格

main (生产)
  └── develop (开发主线)
       ├── feature/user-settings  (功能分支)
       ├── feature/order-list     (功能分支)
       └── fix/mobile-layout      (修复分支)

> 提交当前更改，scope 使用 dashboard，类型使用 feat

# 提交更改
> 提交当前更改，使用 feat 类型，scope 为 dashboard

# 创建分支
> 从 develop 创建新分支 feature/product-filter

# 推送并创建 PR
> 推送当前分支到远程，并创建 PR，标题为 "feat(dashboard): add product filter"

# 解决冲突
> 当前分支与 develop 有冲突，帮我解决冲突并提交

> /superpowers:test-driven-development
> 实现用户设置页面的头像上传功能
> 开发完成后 /ship 推送并创建 PR

1. Superpowers: /superpowers:brainstorming 探索 UI/UX 需求（布局？交互？响应式？）
2. Gstack: /plan-design-review 审查设计方案
3. CodeGraph: codegraph_explore 理解现有路由和组件结构
4. Superpowers: TDD 驱动实现 → 每个组件先写测试
5. ECC: typescript-reviewer 审查代码 → security-reviewer 安全审查
6. Chrome DevTools MCP: 实时调试页面样式和交互
7. Gstack: /qa 在浏览器中测试 → /ship 推送并创建 PR

1. CodeGraph: codegraph_impact 分析组件修改影响范围
2. Serena: find_referencing_symbols 追踪所有 import 引用
3. Gstack: /plan-eng-review 审查重构方案
4. Serena: rename_symbol / move_symbol 精确重构
5. CodeGraph: codegraph_impact 验证变更完整性
6. Gstack: /review 审查 → /qa 浏览器回归测试

1. Gstack: /benchmark 测量 Core Web Vitals 和加载性能
2. CodeGraph: codegraph_trace 追踪关键渲染路径的组件链
3. ECC: frontend-patterns skill 分析性能瓶颈
4. Superpowers: TDD 驱动优化（先写性能基准测试）
5. Gstack: /benchmark 验证优化效果

1. CodeGraph: codegraph_explore 快速理解路由结构和组件关系
2. Serena: get_symbols_overview 梳理核心组件的 Props 和 Hooks
3. Gstack: /office-hours 梳理产品需求
4. ECC: typescript-reviewer 识别代码问题 → security-reviewer 安全扫描
5. Superpowers: TDD 驱动渐进式重构，每步都有测试覆盖

1. Gstack: /office-hours 探索产品需求 → /plan-design-review 审查设计方案
2. Spec-Kit: /speckit.specify 编写页面交互规格 → /speckit.clarify 澄清边界情况
3. Spec-Kit: /speckit.plan 生成前端技术方案（组件拆分、状态设计、API 契约）
4. Spec-Kit: /speckit.analyze 验证规格与技术方案的一致性
5. Superpowers: TDD 驱动实现 → 每个组件先写测试
6. Gstack: /qa 在浏览器中测试 → /ship 推送并创建 PR

> 创建 Dashboard 布局组件：
> - 顶部导航栏：Logo、搜索框、用户头像下拉菜单
> - 左侧边栏：可折叠菜单，支持多级嵌套
> - 主内容区域：自适应宽度
> - 移动端：侧边栏变为抽屉式弹出
> - 使用 Tailwind CSS 响应式断点
> - 侧边栏展开/折叠状态持久化到 localStorage

> 使用 Framer Motion 为列表页面添加动画：
> - 列表项进入时：从下方淡入 + 滑入（stagger 100ms）
> - 列表项删除时：向右滑出 + 淡出
> - 卡片 hover 时：轻微上浮 + 阴影加深
> - 页面切换时：淡入淡出过渡
> - 加载更多时：底部 Skeleton 渐入

> /create-page
> 创建商品管理页面，包含列表、搜索、创建表单和详情弹窗

# 使用 /compact 压缩上下文
> /compact 保留 React 和 TypeScript 相关的上下文

# 使用 /clear 重新开始
> 当切换到不相关的功能模块时，用 /clear 清除上下文避免干扰

# 使用 Context7 获取最新文档
> 查询 Next.js 15 的 Server Actions 用法

# 使用 CodeGraph 分析代码关系
> codegraph_explore 这个项目的认证流程是什么？

# 使用 Serena 精确重构
> 把 UserProfile 组件重命名为 AccountProfile，包括所有 import