prd-to-code - SKILL.md Agent Skill

name: prd-to-code description: 根据前端 PRD 直接生成可用的 React 页面/组件与请求层代码。用户提供 PRD（页面、交互、接口）并要求“生成前端代码/写页面/实现功能”时调用。 version: 1.0.1 author: jimmy tags: [ 'prd', 'frontend', 'react', 'typescript', 'tailwind', 'antd', 'react-query', 'mobx', ] metadata: trae: category: '代码生成' contexts: ['前端PRD', '页面实现', 'UI', '组件', 'React Query']

PRD → Code（前端）(prd-to-code)

将「前端 PRD（Markdown）」转成可直接运行的前端代码改动（页面、组件、请求 hooks、状态管理与路由接入），并严格遵守当前仓库技术栈与代码风格。

何时调用

当用户提供 PRD/需求说明，并明确要你：

“根据 PRD 写页面/实现功能”
“生成前端代码/把 PRD 落到代码里”
“补齐 UI + 接口调用 + 状态流转”
或显式 @prd-to-code

强约束（必须遵守）

禁止引入新依赖
- 只能使用本项目已有依赖与现有组件/工具函数。
UI 要精美且一致
- 使用 Ant Design (v4) + TailwindCSS 作为主要 UI 组件来源。
- 图标使用 @ant-design/icons。
- 交互反馈使用 antd 的 message 组件。
请求与数据获取规范
- 必须通过 src/api/index.ts 的 get/post 发请求。
- React Query 使用 react-query (v3) 的 useQuery/useMutation。
- 注意：响应拦截器未完全解包，返回结构包含 code/message/result。需在组件或 Hook 中处理 code 判断（虽拦截器有全局错误提示，但业务逻辑仍需关注数据解包）。
尽量改现有文件，除非确有必要
- 优先复用现有页面、组件、API hooks、类型定义、store。
- 只有当无法复用时才新增文件，并保持文件数量最少。
默认不运行 lint/build
- 仅按 PRD 生成/修改代码即可；除非用户明确要求验证通过。

输入（你需要从 PRD 中提取）

PRD 至少应包含（不完整时你要做合理补全，但不要发散）：

页面/入口：路由路径、页面名称、入口位置（Dashboard/独立页/弹窗等）
核心流程：用户操作、状态变化、错误与空态
数据结构：列表/详情/分页字段（如果未知，用 Record<string, unknown> 承接）
接口契约：路径、方法、参数、返回字段（或提供 Swagger/OpenAPI URL）
交互细节：加载态、禁用态、二次确认、成功/失败 toast 文案

输出（你要交付的代码）

按 PRD 需要交付以下之一或组合：

src/pages/** 页面实现（含路由接入）
src/components/** 业务组件（弹窗/表单/列表卡片/预览等）
src/api/** 接口定义与 Hooks（useQuery/useMutation 封装）
src/api/**/type.ts 业务类型（尽量集中在这里复用）
src/store/**（仅当需要全局状态且现有 MobX store 不满足时，创建新的 MobX store）

实施流程（生成代码时按此执行）

读 PRD 并拆解
- 输出你识别到的：页面/组件树、路由、数据流、接口列表、关键状态（loading/empty/error）。
对齐仓库现状
- 先在仓库中搜索类似页面/组件，复用现有模式（例如 Antd Modal/Form、src/components 下的通用组件）。
生成请求层
- 在 src/api/ 下创建或修改对应模块。
- 必须封装为 Custom Hooks（如 useUserTask），内部调用 useQuery/useMutation。
- 类型定义在同级 type.ts 中。
生成 UI（精美且可用）
- 使用 Ant Design 组件构建布局和交互。
- 结合 TailwindCSS 处理间距、颜色等样式细节。
- 必须覆盖：加载态（Spin/Skeleton）、空态（Empty）、错误态。
- 交互反馈使用 message.success/error。
接入路由与状态
- 需要新路由时：按项目 react-router-dom v6 方式接入。
- 需要跨页面状态时：使用 mobx + mobx-react-lite。

代码风格约定（本 skill 的生成策略）

组件优先函数式组件 + TypeScript 类型。
接口 Hooks 命名：use***。
类型命名：请求参数 T***Params，返回 T***Result 或直接定义结构。
接口文件放在 src/api/ 对应模块下。
不要写与业务无关的示例/演示代码。

示例触发语句

“根据这个 PRD 帮我把前端页面写出来”
“生成前端代码：包含 UI + useQuery 请求 + 交互”
“@prd-to-code 这是需求文档……”