create-react-component

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<br>
```<br>
仓库:https://github.com/sparesparrow/cursor-rules<br>
### 第 2 步:验证 Skill<br>
向 AI 询问:<br>
```<br>
用 create-react-component Skill,告诉我你推荐的 React 组件文件结构<br>
```<br>
如果 AI 提到"FC + CSS Modules + PascalCase + index 桶文件"等关键词,说明 Skill 加载成功。<br>
### 第 3 步:生成第一个组件<br>
```<br>
用 create-react-component Skill 帮我创建一个 Button 组件,支持 size(small/medium/large)<br>
和 variant(primary/secondary/danger)两个 props,带 hover 动效<br>
```<br>
AI 会输出完整的 `Button.tsx` + `Button.module.css` + `index.ts` + 测试文件,你直接 `git add` 即可。<br>
## 常见踩坑<br>
1. **过度抽象**:把"主色 + 次色 + 强调色"做成 Theme Provider 又做 CSS 变量又做 styled-components,过度工程。Skill 默认用 CSS 变量即可,够用。<br>
2. **Props 接口设计冗余**:有些组件接口有 20+ props,本质是因为组件承担了太多职责。Skill 会建议拆分子组件,review 时务必听劝。<br>
3. **样式隔离不彻底**:用了 CSS Modules 但在 className 里拼字符串 `styles[color]`,绕过了 Modules 的静态分析,导致 dead code 增多。改用 `styles['btn-' + color]` 不行,要用 `clsx` 拼 className。<br>
4. **没写 propTypes / TS 类型**:组件没有显式类型,调用方传错类型不报错。务必 `interface ButtonProps {}` 强约束。<br>
5. **index.ts 桶文件滥用**:所有组件都从 `components` 一桶导出,会导致 tree-shaking 失效,首屏加载慢。只导出公开组件,内部组件不导出。<br>
6. **测试不写或写得过细**:只写 snapshot test 不写行为测试,组件重构一次测试就全红。Skill 默认用 React Testing Library 测行为。<br>
## 初级用法<br>
1. **基础展示组件**:`Avatar`、`Badge`、`Tag` 这种无状态组件,直接 FC + props 即可。<br>
2. **带交互的组件**:`Button` + `onClick` + `disabled` 状态,用 `useState` 管理内部状态。<br>
3. **容器组件**:用 `useEffect` 拉取数据,展示 loading/empty/error 三种状态,Skill 会自动给出模板。<br>
## 高级玩法<br>
1. **复合组件(Compound Component)**:用 `Card.Header` / `Card.Body` / `Card.Footer` 这种结构,比传一堆 props 更清晰,Skill 支持此模式。<br>
2. **受控与非受控双形态**:`<Input value={x} onChange={...}>` 是受控,`<Input defaultValue="hi">` 是非受控,Skill 会自动生成两套 API。<br>
3. **Polymorphic 组件**:`<Button as="a" href="...">` 渲染为 a 标签,适合做通用 Box/Text 组件,实现"一次定义多处使用"。<br>
## 小技巧<br>
- 在 `tsconfig.json` 开启 `"strict": true`,所有 prop 必须显式标注,杜绝"传 string 进来却当 number 用"。<br>
- 用 `displayName` 显式设置组件名,React DevTools 里更清晰:`Button.displayName = 'Button';`<br>
- CSS Modules 文件名加 `.module` 后缀,让 webpack/vite 知道要 hash 类名。<br>
- `clsx` 库比模板字符串拼 className 更好用,可读性 + 性能都更好。<br>
- 组件 Props 顺序约定:必填在前、可选在后;数据 props 在前、回调 props 在后;风格统一的 API 更易记忆。<br>
- 用 `forwardRef` 让父组件能 ref 到内部 DOM 元素,做动画或聚焦时很有用。<br>
## 常见问题 FAQ<br>
**Q1: 这个 Skill 跟 create-react-component 有什么关系?必须装吗?**<br>
A: Skill 是给 AI Agent 用的"技能包",能告诉 Agent 怎么按特定规范工作。**不是必须装**——如果你的项目规模小、要求不高,不装也能用。但装上能让 Agent 输出的质量更高、更符合最佳实践,推荐装。<br>

**Q2: 这个 Skill 适合哪些 AI Agent?Cursor?Claude Code?其他?**<br>
A: create-react-component 来自 Anthropic,主要面向支持 Skill 机制的 Agent。常见兼容 Agent 包括 Claude Code、Cursor、OpenCode、Windsurf 等。具体兼容性请查 Skill 官方文档。<br>

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

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

**Q5: 这个 Skill 有许可证吗?能商用吗?**<br>
A: 取决于 create-react-component 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。<br>
## 参考链接<br>
- [Skill 仓库](https://github.com/sparesparrow/cursor-rules)<br>
- [React 官方文档](https://react.dev/)<br>
- [TypeScript 手册](https://www.typescriptlang.org/docs/)<br>
- [CSS Modules 规范](https://github.com/css-modules/css-modules)<br>
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)<br>
## 实战经验:从 0 搭一个企业级 React 组件库<br>
下面演示如何用 create-react-component Skill 配合 Storybook,从零搭建一套可复用的 React 组件库。<br>
### 步骤 1:项目初始化<br>
```bash<br>
npm create vite@latest my-ui -- --template react-ts<br>
cd my-ui<br>
npx storybook@latest init<br>
```<br>
### 步骤 2:用 Skill 写第一个组件<br>
```<br>
用 create-react-component Skill 帮我创建 Button 组件,<br>
支持 variant(primary/secondary/danger/ghost)<br>
+ size(small/medium/large)<br>
+ 状态(loading/disabled)<br>
+ 完整 TypeScript 接口 + CSS Modules<br>
+ Storybook stories<br>
+ React Testing Library 测试<br>
```<br>
AI 一次性输出 `Button.tsx` / `Button.module.css` / `Button.test.tsx` / `Button.stories.tsx` / `index.ts`,全部符合团队规范。<br>
### 步骤 3:用 Skill 批量生成组件<br>
```<br>
用 create-react-component Skill 继续生成:<br>
- Input(支持 prefix/suffix icon、清空按钮)<br>
- Modal(支持受控/非受控、ESC 关闭、点击遮罩关闭)<br>
- Card(支持 header/body/footer 复合)<br>
- Tabs(支持键盘导航、URL 同步)<br>
全部走同一套规范<br>
```<br>
AI 在保证"风格统一"的前提下批量产出,设计 token(颜色、间距、字号)在 CSS 变量里集中管理。<br>
### 步骤 4:组件库打包发布<br>
```bash<br>
npm run build  # vite build → dist/<br>
npm publish    # 发布到私有 npm<br>
```<br>
其他项目 `npm install @my-org/ui` 即可使用,组件库升级时各业务项目能及时跟进。<br>
## 配合使用的工具链<br>
- **Storybook**:组件展示 + 文档 + 测试三合一,https://storybook.js.org/<br>
- **Chromatic**:Storybook 视觉回归测试,自动截图对比,组件改坏了立刻发现。<br>
- **Rollup / Vite library mode**:组件库专用打包,输出 ESM + CJS + d.ts。<br>
- **Changesets**:版本管理,每个 PR 写 changeset,自动 bump 版本 + 生成 changelog。<br>
- **Style Dictionary**:跨平台 design token(颜色、字号)统一管理,Web/iOS/Android 共享。<br>
- **Husky + lint-staged**:commit 前自动跑 lint + 格式化,杜绝脏代码入库。<br>
## 常见误区<br>
- **组件过度拆分**:把 Button 拆成 BtnContainer + BtnLabel + BtnIcon,反而增加使用成本,Skill 会主动建议"加 prop 而不是拆组件"。<br>
- **样式不用 CSS 变量**:把 `#FF6B35` 硬编码在 50 个文件里,改主题色要改 50 处。用 CSS 变量后,改一行就生效。<br>
- **Props 命名不一致**:Button 用 `variant`、Input 用 `type`、Modal 用 `mode`,用户记不住。Skill 会建议"同类概念用同名字"。<br>
- **缺少 a11y**:没加 `aria-label`、`role`、`键盘事件`,组件在屏幕阅读器上无法使用。Skill 默认会主动提示。<br>
- **测试只 snapshot**:`expect(component).toMatchSnapshot()` 测不出行为变化,必须用 `getByRole` 测交互。