react-service-creatorlisted
Install: claude install-skill afine907/skills
# React Service Creator — React 项目脚手架
生成标准化 React 项目,内置最佳实践和统一规范。
## Goal
生成 React 项目脚手架,支持 Next.js/Vite/CRA,包含路由、状态管理、API层、组件规范、测试配置
## Trigger
- 用户要求"创建React项目"、"React脚手架"
- 新建前端项目需要标准化模板
- 需要统一团队 React 项目结构
## 技术栈选择
| 框架 | 构建工具 | 状态管理 | 样式方案 | 测试 |
|------|----------|----------|----------|------|
| Next.js 14 | Turbopack | Zustand | Tailwind CSS | Jest + RTL |
| Vite + React | Vite | Zustand | Tailwind CSS | Vitest + RTL |
| CRA (legacy) | Webpack | Redux Toolkit | CSS Modules | Jest + RTL |
## 项目结构
```
{project-name}/
├── src/
│ ├── app/ # Next.js App Router / 入口
│ │ ├── layout.tsx # 根布局
│ │ ├── page.tsx # 首页
│ │ └── globals.css # 全局样式
│ ├── components/ # 通用组件
│ │ ├── ui/ # 基础 UI 组件
│ │ │ ├── Button/
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Button.test.tsx
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ └── layout/ # 布局组件
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ └── Sidebar.tsx
│ ├── features/ # 功能模块
│ │ └── auth/
│ │ ├── components/ # 模块组件
│ │ ├── hooks/ # 模块 hooks
│ │ ├── services/ # API 调用
│ │ ├── stores/ # 状态管理
│ │ ├── types/ # 类型定义
│ │ └── index.ts # 模块导出
│ ├── hooks/ # 公共 hooks
│ ├── lib/ # 工具库