Communitygithub.com

hasaneks/web-craft-init

启动一个新的React Web项目或大型Web界面,或将现有项目纳入书面标准:产品导入、渲染模型与框架(Next.js App Router或React with Vite)、UI工具包(shadcn/ui、Ant Design、Material UI或现有系统)、样式方案(Tailwind、CSS Modules或工具包主题)、从一开始就集成的真正国际化(next-intl或i18next)、动效基础(含减少动效)、主题等。

web-craft-init 是什么?

该技能(skill)用于启动或规范化React Web项目,基于`web-craft`规则集。它会引导你完成从产品导入、技术选型到项目结构搭建和骨架验证的完整流程。技能内置了多种主流选择的配置原因和官方参考,涵盖框架(Next.js App Router / React with Vite)、UI组件库(shadcn/ui / Ant Design / Material UI)、样式方案、国际化引擎、动效库、表单数据方案等。它强调先确定技术方向再生成页面,并通过一个最小端到端流程(语言解析、主题切换、表单验证、对话框动效、骨架屏与错误状态、键盘可访问性)来验证项目骨架的可靠性。该技能适用于Claude Code、Cursor、Codex等AI编码助手,通过读取项目已有决策和`references/`目录下的详细文档来辅助决策,确保所有版本来自官方并记录在`STACK.md`中。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hasaneks/web-craft/tree/HEAD/skills/web-craft-init

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

启动一个 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. 验证骨架

在构建更多页面之前,必须有一个小型流程能够端到端工作:

  1. 语言环境在首次渲染时正确解析(无语言闪烁),切换时保持路由。
  2. 主题遵循用户选择和系统设置,加载时无闪烁。
  3. 表单在失焦时验证,提交时滚动到第一个错误,将服务器错误映射到对应字段。
  4. 对话框带动画出入,捕获焦点并返回焦点;减少动效移除大幅移动。
  5. 列表或图表显示骨架屏、空状态和含重试的错误状态。
  6. 纯键盘操作可用;无控制台或水合错误。

然后构建一个有代表性的垂直切片(真实内容、第二语言、加载和错误状态),在移动端和桌面端浏览器中检查,再扩展到其他页面。

6. 脚本

dev、build、start(Next.js)、typecheck、lint、test、test:e2e。当打包预算重要时添加 analyze。

来源

这些默认值使用的官方链接及其审查日期:references/sources.md。在你安装的版本上重新检查它们。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能