react-gradual-architecture
渐进式组织React代码的AI辅助开发指南
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：react-gradual-architecture。 它的用途是：渐进式组织React代码的AI辅助开发指南 完整的 Skill 内容见：https://321skill.com/skills/react-gradual-architecture/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请为这个电商项目创建一个购物车功能，遵循@react-gradual-architecture原则。”，它会引导你从一个Cart.tsx文件开始，逐步添加商品列表、数量调整、总计计算等功能，仅在文件过长或逻辑混杂时，建议你提取出独立的钩子或子组件。或者
对AI说：“帮我按照@react-gradual-architecture重构这个庞大的用户管理页面。”，它会分析代码，建议将数据获取逻辑提取为自定义Hook，将渲染部分拆分为更小的展示组件，并按功能组织相关文件。
介绍
这个Skill旨在解决React开发中常见的“过度设计”或“结构混乱”问题。许多开发者在项目初期要么过早引入复杂架构导致维护困难，要么因缺乏指导而让代码迅速变得难以管理。它提供了一套渐进式的代码组织规则，帮助开发者在AI助手的辅助下，从简单开始，只在必要时才进行提取和重构。
使用时，你只需在AI编码助手（如Cursor）中安装此Skill，然后在编写或重构React代码时，通过特定提示词（如“遵循@react-gradual-architecture原则”）来调用。AI助手会根据Skill内置的12条规则，引导你从单一文件开始，仅在代码可读性下降或出现复用需求时，才提取组件、钩子或工具函数，并按功能而非技术类型来组织目录。
它非常适合那些希望借助AI提升React代码质量，但又不想被复杂架构过早束缚的开发者。无论是刚入门的新手，还是正在维护快速增长项目的中高级开发者，都能从中受益，找到代码清晰度与结构复杂性之间的平衡点。
建议在中小型React项目或大型项目的新功能模块中开始实践。注意，它更侧重于代码组织哲学和开发流程的引导，而非提供具体的组件库或工具函数。对于已有成熟、稳定架构且团队有严格规范的大型遗留项目，引入时需要评估其规则与现有规范的兼容性。
核心特点
与许多提供具体组件或代码片段的React Skill不同，它专注于提供一套“何时以及如何组织代码”的决策框架，强调“按需提取”和“功能优先”的目录结构，帮助开发者在AI辅助下建立可持续的代码演进习惯。
注意事项
不适合已有严格、固定架构规范且不允许调整的团队项目，或非React技术栈的前端开发。
常见问题
这个Skill和普通的React代码规范（如Airbnb规范）有什么区别？
它更侧重于代码组织的“时机”和“演进路径”，而非静态的代码风格规则，旨在指导你如何随着功能增长自然地构建架构。
我需要完全遵循所有12条规则吗？
不需要，规则有优先级（CRITICAL/HIGH/MEDIUM），建议从基础规则开始，逐步应用，将其视为指导原则而非硬性规定。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-gradual-architecture/raw/index.md 读取 react-gradual-architecture 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-gradual-architecture/raw/index.md（查看排版版本）