启动一个 React Web 项目
请先阅读 web-craft 规则;其规则在此同样适用。项目中已有的决策优先于以下所有默认值。
1. 导入
读取已给出的内容:产品描述、现有仓库、页面、设计系统、STACK.md、DESIGN.md、API 契约。然后使用 references/intake.md 填补空缺:界面类型(落地页、社论、目录、消费者应用、管理后台、客户门户或混合类型)、主要用户与操作、内容或操作密度、设备、SEO 需求、当前及未来语言、从右到左支持、认证、后端(Node.js、第三方 API、CMS、模拟或静态)。
仅询问那些会改变产品或架构决策的问题。其余内容作为假设陈述。
2. 确定技术配置
为每个决策写一行理由。在方向选定前,不要生成任何页面。
| 决策 | 默认值及理由所在位置 |
|---|---|
| 框架与渲染 | 公开、SEO 或 CMS 密集型、多语言 → Next.js App Router。需要登录且高度交互 → React + Vite 或现有的 Next.js。简单静态界面 → 最简单可行的方案。references/framework-choice.md |
| UI 工具包 | 有鲜明品牌的产品 → shadcn/ui。表格/表单密集型管理后台 → Ant Design。Material 风格产品或已在用 MUI → Material UI。已有系统 → 保留。每个界面最多一个主工具包。references/kit-choice.md |
| 样式 | 跟随工具包:shadcn → Tailwind(shadcn 要求);Ant Design 或 MUI → 工具包主题,外加自定义部分的 CSS Modules;自定义或社论 → CSS Modules。切勿在同一界面中混用 Tailwind 和 CSS Modules 作为对等系统。references/styling-choice.md |
| 国际化 | Next.js → next-intl;Vite → i18next + react-i18next。语言环境注册、回退、URL 策略和目录加载在第一天决定。references/i18n-setup.md |
| 动效 | 简单状态使用 CSS 过渡;React 中需要挂载/卸载、布局或编排时使用 Motion。持续时间和缓动令牌;减少动效在一个地方处理。references/motion-setup.md |
| 表单与数据 | react-hook-form + Zod;TanStack Query 或框架的数据模型;保留现有内容。 |
| 主题 | 交互式产品使用浅色/深色/系统;单一主题可以是品牌营销站点的产品决策。 |
| 测试 | 类型检查、lint(使用 eslint-plugin-web-craft 和 eslint-plugin-jsx-a11y)、行为所在的单元/组件测试、关键流程的 Playwright 测试。 |
| 语言与工具 | 严格 TypeScript,Yarn 按项目固定,一个锁文件。 |
请从官方来源验证所选每个包的当前稳定版本(当天),固定能协同工作的版本,并记录到 STACK.md 中。切勿从内存或本技能中复制版本号。
3. 编写项目文档
STACK.md:框架、渲染、工具包、样式、国际化引擎、数据和表单工具、版本、环境、脚本。模板:references/stack-template.md。DESIGN.md:产品特征、从参考资料中提取的原则、布局、令牌(颜色、字体、间距、圆角、仰角、动效)、文案规则、动效矩阵、国际化备注。模板:references/design-template.md。- 语言环境列表和类型来自代码配置。文档只做描述,不是第二个真相源。
- 不要为每个小改动创建四个新文档。
4. 规划项目结构
基于功能的结构,服务器/客户端边界清晰,一个 API 层,一个存放令牌和提供者的位置:references/structure.md。
5. 验证骨架
在构建更多页面之前,必须有一个小型流程能够端到端工作:
- 语言环境在首次渲染时正确解析(无语言闪烁),切换时保持路由。
- 主题遵循用户选择和系统设置,加载时无闪烁。
- 表单在失焦时验证,提交时滚动到第一个错误,将服务器错误映射到对应字段。
- 对话框带动画出入,捕获焦点并返回焦点;减少动效移除大幅移动。
- 列表或图表显示骨架屏、空状态和含重试的错误状态。
- 纯键盘操作可用;无控制台或水合错误。
然后构建一个有代表性的垂直切片(真实内容、第二语言、加载和错误状态),在移动端和桌面端浏览器中检查,再扩展到其他页面。
6. 脚本
dev、build、start(Next.js)、typecheck、lint、test、test:e2e。当打包预算重要时添加 analyze。
来源
这些默认值使用的官方链接及其审查日期:references/sources.md。在你安装的版本上重新检查它们。