react-best-practices 是一个 skills.sh 兼容的 Skill 包，为 AI Agent 提供 React 项目开发的完整规范体系。安装后，Agent 在编写代码、创建项目、审查 PR、生成文档时会自动遵循这套规范——无需手动提醒。
|
|
|
🏗️ Monorepo 架构 pnpm + Turborepo 工程化方案 多包管理、构建编排、依赖优化 |
📐 编码规范 TypeScript 严格模式 React / Zustand / TanStack Query 模式约束 |
🧪 测试策略 Vitest 单元 + Testing Library 集成 Playwright E2E，含覆盖率要求 |
|
📋 Git 规范 Conventional Commits + 分支策略 Husky + lint-staged 自动校验 |
📄 文档体系 7 种标准模板 PRD / BRD / HLD / LLD / API / ADR / PR |
🔄 工作流 Feature / Bugfix / Release / CI-CD 四种标准开发流程 |
本 Skill 围绕以下技术栈设计规范：
| 类别 | 技术 | 版本 |
|---|---|---|
| 框架 | React | 18+ |
| 语言 | TypeScript | 5+ |
| 状态管理 | Zustand | 4+ |
| 数据请求 | TanStack Query | 5+ |
| 路由 | React Router | 6+ |
| 样式 | Tailwind CSS | 3+ |
| 组件库 | Shadcn/ui | latest |
| 单元测试 | Vitest | latest |
| E2E 测试 | Playwright | latest |
| 包管理 | pnpm | 8+ |
| 构建编排 | Turborepo | latest |
Skill 包含 10 条独立规则，覆盖 React 项目开发全生命周期：
| # | 规则文件 | 说明 |
|---|---|---|
| 01 | rules/01-tech-stack.md |
技术栈选型 — 核心技术栈定义与版本要求 |
| 02 | rules/02-monorepo-architecture.md |
Monorepo 架构 — pnpm workspace + Turborepo 目录结构与配置 |
| 03 | rules/03-feature-based-structure.md |
Feature-Based 结构 — 应用内按功能模块组织，命名规范与目录约定 |
| 04 | rules/04-coding-standards.md |
编码规范 — TypeScript 严格模式、React 组件模式、Zustand / TanStack Query 模式 |
| 05 | rules/05-git-conventions.md |
Git 提交约定 — Conventional Commits、分支策略、Husky + lint-staged |
| 06 | rules/06-changelog-management.md |
Changelog 管理 — Changesets 工作流、版本策略、CI 自动发版 |
| 07 | rules/07-testing-strategy.md |
测试策略 — Vitest 单元 / Testing Library 集成 / Playwright E2E，覆盖率要求 |
| 08 | rules/08-code-review-checklist.md |
代码审查清单 — 功能、性能、安全、可维护性检查项 |
| 09 | rules/09-workflows.md |
工作流 — Feature / Bugfix / Release / CI-CD 四种标准流程 |
| 10 | rules/10-documentation-management.md |
文档管理 — docs/ 目录结构、文档类型定义、生命周期管理 |
内置 7 个标准文档模板，Agent 创建文档时自动套用：
| 模板 | 文件 | 适用场景 |
|---|---|---|
| 产品需求文档 | assets/templates/PRD-template.md |
新功能需求定义 |
| 业务需求文档 | assets/templates/BRD-template.md |
业务目标与范围 |
| 概要设计 | assets/templates/HLD-template.md |
系统架构与模块划分 |
| 详细设计 | assets/templates/LLD-template.md |
接口定义与数据结构 |
| API 设计 | assets/templates/API-template.md |
RESTful API 接口规范 |
| 架构决策记录 | assets/templates/ADR-template.md |
技术选型决策与理由 |
| Pull Request | assets/templates/PR-template.md |
PR 描述与审查要点 |
📦 方式一：npx 安装（推荐）
# 全局安装
npx skills add trsoliu/react-best-practices -g -y
# 项目级安装
npx skills add trsoliu/react-best-practices -y📥 方式二：下载 .skill 文件
从 Releases 下载 react-best-practices.skill，放入 skills 目录。
📂 方式三：克隆仓库
git clone https://github.com/trsoliu/react-best-practices.git
npx skills add ./react-best-practices -g -ynpx skills update trsoliu/react-best-practicesnpx skills remove react-best-practices安装后，AI Agent 会在以下场景自动激活本 Skill：
| 场景 | 触发示例 |
|---|---|
| 创建项目 | "帮我初始化一个 React + TypeScript 项目" |
| 编写代码 | "写一个用户列表组件" |
| 代码审查 | "帮我 review 这个 PR" |
| Git 提交 | "帮我提交代码" |
| 写测试 | "给这个组件写单元测试" |
| 创建文档 | "帮我写一个 PRD" / "创建 ADR" |
| 架构设计 | "设计一下这个功能的架构" |
你也可以主动引用：
请按照 react-best-practices 规范帮我创建一个新的 feature 模块
react-best-practices/
├── 📄 SKILL.md # 主 Skill 文件（725 行完整规范）
├── 📄 AGENTS.md # Agent 触发条件与行为约束
├── 📄 README.md # 项目说明
├── 📄 CHANGELOG.md # 变更日志
├── 📄 LICENSE # MIT 许可证
├── 📄 metadata.json # 元数据
├── 📄 react-best-practices.skill # Zip 打包分发文件
├── 📂 rules/ # 10 条独立规则
│ ├── 01-tech-stack.md
│ ├── 02-monorepo-architecture.md
│ ├── 03-feature-based-structure.md
│ ├── 04-coding-standards.md
│ ├── 05-git-conventions.md
│ ├── 06-changelog-management.md
│ ├── 07-testing-strategy.md
│ ├── 08-code-review-checklist.md
│ ├── 09-workflows.md
│ └── 10-documentation-management.md
└── 📂 assets/templates/ # 7 个文档模板
├── PRD-template.md
├── BRD-template.md
├── HLD-template.md
├── LLD-template.md
├── API-template.md
├── ADR-template.md
└── PR-template.md
支持所有 Agent Skills 规范 兼容的 AI 编码助手：
| Claude Code | Cursor | Cline | Windsurf |
| GitHub Copilot | Gemini CLI | Codex | 40+ 更多 |
这个 Skill 会修改我的项目代码吗？
不会。 Skill 只是为 AI Agent 提供规范指导，Agent 在生成代码时会遵循这些规范。它不会自动修改你的现有代码。
可以只使用部分规则吗？
可以。 每条规则都是独立的 Markdown 文件，你可以根据项目需要删除或修改 rules/ 目录下的任意规则文件。
支持英文项目吗？
Skill 的规范内容是中文编写的，但 Agent 会根据你的对话语言自动调整输出。如果你用英文提问，Agent 会用英文回复并遵循相同的规范。
如何自定义文档模板？
直接编辑 assets/templates/ 目录下的模板文件即可。Agent 创建文档时会使用你修改后的模板。
This project is licensed under the MIT License.
