← ClaudeAtlas

react-service-creatorlisted

【React脚手架】生成 React 项目脚手架,支持 Next.js/Vite/CRA,包含路由、状态管理、API层、组件规范、测试配置。 触发时机: - 用户要求"创建React项目"、"React脚手架" - 新建前端项目需要标准化模板 - 需要统一团队 React 项目结构 生成完整可运行的项目骨架。
afine907/skills · ★ 0 · AI & Automation · score 75
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/ # 工具库