☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你是一位熟悉本项目typescript配置和组件治理规范的前端工程师，所有生成代码必须与上述文件结构、导出方式、注释风格完全一致。
你需要让claude生成的前端组件代码不是玩具级示例，而是能直接塞进真实项目里跑起来、带边界处理、有类型守卫、含可测逻辑的生产就绪代码。
第一步：用真实项目文件结构锚定上下文
打开你项目中已存在的同类型组件文件，复制其完整路径+文件头注释+导出方式，例如：src/components/DataTable/index.tsx 开头有// @ts-nocheck - 临时兼容 legacy API 返回结构，结尾是export { DataTable, type DataTableProps };。把这段原样粘贴进提示词开头。
这一步不做，Claude会按标准React规范生成export default function DataTable()——而你项目里所有组件都禁用default export，且必须显式导出类型。
在粘贴完路径和导出声明后，立刻写：“你是一位熟悉本项目TypeScript配置和组件治理规范的前端工程师，所有生成代码必须与上述文件结构、导出方式、注释风格完全一致。”
第二步：注入真实API响应结构和错误场景
方法一：直接贴脱敏后的3行真实响应
{"id": "req_8a2f", "status": "pending_review", "assignee": {"name": "李敏", "avatar_url": null}, "created_at": "2025-04-12T08:33:17Z", "due_date": "2025-06-20"}
方法二：描述字段空值链和状态跃迁约束
【assignee.avatar_url 可为空，但一旦为空，UI必须 fallback 到首字母头像；status 从 'draft' → 'pending_review' → 'active' 单向跃迁，不允许回退】
注意：如果真实API中due_date字段可能为null或"N/A"字符串，但你没在提示词里说明，Claude会默认它永远是ISO字符串——导致组件在真实环境首次渲染就报Invalid Date。
第三步：强制绑定真实交互闭环
第一步：描述用户操作起点
用户在需求列表页点击「查看详情」按钮，路由跳转至/requirements/:id，此时URL参数id已由React Router v6.22的useParams()解析为字符串。
第二步：明确数据加载时机
组件挂载后立即调用fetchRequirement(id)，该函数返回PromiseRequirement类型已在src/types/api.ts中定义。
第三步：定义失败后的真实降级行为
当请求返回404时，页面显示「该需求不存在」+「返回列表」按钮；返回500时显示「服务暂时不可用」+「刷新重试」按钮，且两个按钮均需触发window.location.reload()。
第四步：指定DOM验证点
验证方式：在浏览器控制台执行document.querySelector('[data-testid="requirement-title"]')?.textContent应返回真实需求标题字符串。
第四步：嵌入真实测试断言模板
在提示词末尾追加：“请在生成组件代码后，同步输出一个__tests__/DataTable.test.tsx文件内容，要求覆盖以下3个用例：① 渲染loading状态时显示Skeleton占位符；② 渲染error状态时显示带重试按钮的ErrorBoundary；③ 渲染成功数据时，表格第二行第一列的data-testid为row-1-cell-0。”
这一步必须做，否则Claude生成的测试文件会用render(<datatable></datatable>)这种无props调用——而你项目所有组件测试都强制传入mockData和onAction回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
