create-react-component 快速入门

一句话生成符合团队规范的 React 组件,告别”5 个文件各有 5 种写法”。

这是什么?解决什么问题?

React 项目做到第 2 年,普遍会出现这些”乱象”:同样的按钮组件,有的用 class 写、有的用 function 写;文件命名有的 PascalCase 有的 camelCase;样式有的写 inline、有的 CSS Modules、有的 styled-components;PropTypes / TypeScript 接口混用;导出有的 default 有的 named……

create-react-component Skill 来自 sparesparrow/cursor-rules 仓库,核心价值在于把”团队 React 组件规范”固化为可被 AI 调用的模板。它默认推荐的最佳实践包括:函数组件(Function Component) + Hooks、CSS Modules 隔离样式、PascalCase 文件命名、TypeScript 接口定义 Props、named export、文件结构按组件/组件.tsx + 组件.module.css + index.ts + test.tsx组织。

加载这个 Skill 后,AI 在生成新组件时不再”风格漂移”,团队成员 PR review 时也不用纠结”为什么你的组件要这样写”。

适合:中型以上 React 团队、希望统一前端代码风格的技术 Lead、想规范新项目结构的前端架构师。

准备工作

1. React 18+ 项目:Vite / Create React App / Next.js 均可
2. TypeScript:推荐使用,Props 类型校验更稳
3. Claude Code / Cursor:本 Skill 适配主流 AI 编程环境
4. CSS Modules 配置:Vite/CRA 默认支持,Next.js 用 *.module.css

3 步快速上手

第 1 步:安装 Skill

npx skills add sparesparrow/cursor-rules --skill create-react-component

仓库:https://github.com/sparesparrow/cursor-rules

第 2 步:验证 Skill

向 AI 询问:

用 create-react-component Skill,告诉我你推荐的 React 组件文件结构

如果 AI 提到”FC + CSS Modules + PascalCase + index 桶文件”等关键词,说明 Skill 加载成功。

第 3 步:生成第一个组件

用 create-react-component Skill 帮我创建一个 Button 组件,支持 size(small/medium/large)
和 variant(primary/secondary/danger)两个 props,带 hover 动效

AI 会输出完整的 Button.tsx + Button.module.css + index.ts + 测试文件,你直接 git add 即可。

常见踩坑

1. 过度抽象:把”主色 + 次色 + 强调色”做成 Theme Provider 又做 CSS 变量又做 styled-components,过度工程。Skill 默认用 CSS 变量即可,够用。
2. Props 接口设计冗余:有些组件接口有 20+ props,本质是因为组件承担了太多职责。Skill 会建议拆分子组件,review 时务必听劝。
3. 样式隔离不彻底:用了 CSS Modules 但在 className 里拼字符串 styles[color],绕过了 Modules 的静态分析,导致 dead code 增多。改用 styles['btn-' + color] 不行,要用 clsx 拼 className。
4. 没写 propTypes / TS 类型:组件没有显式类型,调用方传错类型不报错。务必 interface ButtonProps {} 强约束。
5. index.ts 桶文件滥用:所有组件都从 components 一桶导出,会导致 tree-shaking 失效,首屏加载慢。只导出公开组件,内部组件不导出。
6. 测试不写或写得过细:只写 snapshot test 不写行为测试,组件重构一次测试就全红。Skill 默认用 React Testing Library 测行为。

初级用法

1. 基础展示组件:Avatar、Badge、Tag 这种无状态组件,直接 FC + props 即可。
2. 带交互的组件:Button + onClick + disabled 状态,用 useState 管理内部状态。
3. 容器组件:用 useEffect 拉取数据,展示 loading/empty/error 三种状态,Skill 会自动给出模板。

高级玩法

1. 复合组件(Compound Component):用 Card.Header / Card.Body / Card.Footer 这种结构,比传一堆 props 更清晰,Skill 支持此模式。
2. 受控与非受控双形态:<Input value={x} onChange={...}> 是受控,<Input defaultValue="hi"> 是非受控,Skill 会自动生成两套 API。
3. Polymorphic 组件:<Button as="a" href="..."> 渲染为 a 标签,适合做通用 Box/Text 组件,实现”一次定义多处使用”。

小技巧

• 在 tsconfig.json 开启 "strict": true,所有 prop 必须显式标注,杜绝”传 string 进来却当 number 用”。
• 用 displayName 显式设置组件名,React DevTools 里更清晰:Button.displayName = 'Button';
• CSS Modules 文件名加 .module 后缀,让 webpack/vite 知道要 hash 类名。
• clsx 库比模板字符串拼 className 更好用,可读性 + 性能都更好。
• 组件 Props 顺序约定:必填在前、可选在后;数据 props 在前、回调 props 在后;风格统一的 API 更易记忆。
• 用 forwardRef 让父组件能 ref 到内部 DOM 元素,做动画或聚焦时很有用。

常见问题 FAQ

Q1: 这个 Skill 跟 create-react-component 有什么关系?必须装吗?

A: Skill 是给 AI Agent 用的”技能包”,能告诉 Agent 怎么按特定规范工作。不是必须装——如果你的项目规模小、要求不高,不装也能用。但装上能让 Agent 输出的质量更高、更符合最佳实践,推荐装。

Q2: 这个 Skill 适合哪些 AI Agent?Cursor?Claude Code?其他?

A: create-react-component 来自 Anthropic,主要面向支持 Skill 机制的 Agent。常见兼容 Agent 包括 Claude Code、Cursor、OpenCode、Windsurf 等。具体兼容性请查 Skill 官方文档。

Q3: 装了这个 Skill 后,会拖慢 Agent 响应吗?

A: 会的——Skill 通常会增加 prompt 长度,导致响应变慢、token 消耗增加。但质量提升明显。建议:1) 只装项目必需的 Skill;2) 用 Skill 启动/加载/卸载机制按需加载;3) 定期清理不用的 Skill。

Q4: 怎么验证 Skill 装对了?

A: 在 Agent 中输入”列出已加载的 Skill”或类似命令。如果 Skill 出现在列表里,说明装对了。然后用 Skill 跑一个相关任务,看输出是否符合 Skill 规范。

Q5: 这个 Skill 有许可证吗?能商用吗?

A: 取决于 create-react-component 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。

参考链接

• Skill 仓库:https://github.com/sparesparrow/cursor-rules
• React 官方文档:https://react.dev/
• TypeScript 手册:https://www.typescriptlang.org/docs/
• CSS Modules 规范:https://github.com/css-modules/css-modules
• React Testing Library:https://testing-library.com/docs/react-testing-library/intro/

实战经验:从 0 搭一个企业级 React 组件库

下面演示如何用 create-react-component Skill 配合 Storybook,从零搭建一套可复用的 React 组件库。

步骤 1:项目初始化

npm create vite@latest my-ui -- --template react-ts
cd my-ui
npx storybook@latest init

步骤 2:用 Skill 写第一个组件

用 create-react-component Skill 帮我创建 Button 组件,
支持 variant(primary/secondary/danger/ghost)
+ size(small/medium/large)
+ 状态(loading/disabled)
+ 完整 TypeScript 接口 + CSS Modules
+ Storybook stories
+ React Testing Library 测试

AI 一次性输出 Button.tsx / Button.module.css / Button.test.tsx / Button.stories.tsx / index.ts,全部符合团队规范。

步骤 3:用 Skill 批量生成组件

用 create-react-component Skill 继续生成:
- Input(支持 prefix/suffix icon、清空按钮)
- Modal(支持受控/非受控、ESC 关闭、点击遮罩关闭)
- Card(支持 header/body/footer 复合)
- Tabs(支持键盘导航、URL 同步)
全部走同一套规范

AI 在保证”风格统一”的前提下批量产出,设计 token(颜色、间距、字号)在 CSS 变量里集中管理。

步骤 4:组件库打包发布

npm run build  # vite build → dist/
npm publish    # 发布到私有 npm

其他项目 npm install @my-org/ui 即可使用,组件库升级时各业务项目能及时跟进。

配合使用的工具链

• Storybook:组件展示 + 文档 + 测试三合一,https://storybook.js.org/
• Chromatic:Storybook 视觉回归测试,自动截图对比,组件改坏了立刻发现。
• Rollup / Vite library mode:组件库专用打包,输出 ESM + CJS + d.ts。
• Changesets:版本管理,每个 PR 写 changeset,自动 bump 版本 + 生成 changelog。
• Style Dictionary:跨平台 design token(颜色、字号)统一管理,Web/iOS/Android 共享。
• Husky + lint-staged:commit 前自动跑 lint + 格式化,杜绝脏代码入库。

常见误区

• 组件过度拆分:把 Button 拆成 BtnContainer + BtnLabel + BtnIcon,反而增加使用成本,Skill 会主动建议”加 prop 而不是拆组件”。
• 样式不用 CSS 变量:把 #FF6B35 硬编码在 50 个文件里,改主题色要改 50 处。用 CSS 变量后,改一行就生效。
• Props 命名不一致:Button 用 variant、Input 用 type、Modal 用 mode,用户记不住。Skill 会建议”同类概念用同名字”。
• 缺少 a11y:没加 aria-label、role、键盘事件,组件在屏幕阅读器上无法使用。Skill 默认会主动提示。
• 测试只 snapshot:expect(component).toMatchSnapshot() 测不出行为变化,必须用 getByRole 测交互。

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。