React Component Generator

React 组件生成器

触发条件

当用户要求创建新的 React 组件时，使用此 Skill

输入参数

• componentName (required): 组件名称，使用 PascalCase 格式
• description (required): 组件功能描述
• hasProps (optional, default: true): 是否需要定义 Props 类型
• hasState (optional, default: false): 是否需要状态管理

执行步骤

1. 在 ./src/components/ 目录下创建组件文件夹：./src/components/{ComponentName}/
2. 参考 ./claude/skills/react-component-generator/resources/template/ 中的模板文件创建以下文件：

• index.tsx: 组件主文件（参考 ./claude/skills/react-component-generator/resources/template/component.tsx.tpl）
• types.ts: TypeScript 类型定义（如果 hasProps: true）
• {ComponentName}.test.tsx: 测试文件（参考 ./claude/skills/react-component-generator/resources/template/test.tsx.tpl）

1. 组件代码规范

• 使用函数组件 + TypeScript
• Props 使用 interface 接口定义（如果 hasProps: true）
• 使用 Tailwind CSS 处理样式
• 导出使用 named export
• 添加 JSDoc 注释说明组件功能

1. 测试代码规范：

• 使用 @testing-library/react
• 至少包含：渲染测试、Props 传递测试

1. 创建完成后可运行 ./claude/skills/react-component-generator/resources/scripts/validate.ts 验证组件结构完整性

输出规范

• 所有文件创建完成后，报告创建的文件列表
• 给出组件的使用示例代码

参考示例

参见：./claude/skills/react-component-generator/resources/examples/BookmarkCard-example/ 中的完整示例。

示例

输入：

• componentName: "BookmarkCard"
• description: "展示单个书签的卡片组件，显示标题、URL 和标签"
• hasProps: true
• hasState: false

预期输出的文件：

• ./src/components/BookmarkCard/index.tsx
• ./src/components/BookmarkCard/types.ts
• ./src/components/BookmarkCard/BookmarkCard.test.tsx

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cgfeel
• Source: cgfeel/ClaudeReactComponentSkill
• License: MIT

Install and usage instructions live in the source repository linked above.