react-init-skill

React Generate Skill

⚠️ 重要：本 Skill 严格依赖 frontend-request-skill

本 Skill 不重新发明请求层。所有 HTTP / 错误处理 / 鉴权相关代码必须复用 frontend-request-skill 的标准实现：

react-init-skill 输出	对应 frontend-request-skill 标准
src/api/request.ts	references/frontend-spec.md（fetch 标准实现）
src/services/auth.service.ts	references/auth-patterns.md（Token 刷新队列）
src/utils/{error,toast,auth}.ts	references/error-handling.md + auth-patterns.md
src/config/{api,error}.config.ts	references/frontend-spec.md（BASE_URL + ERROR_CODE_MAP）
src/hooks/useAuth.ts	references/auth-patterns.md
响应信封 { code, message, data }	与 backend-convention-skill/references/response-format.md 一致

接入本 Skill 前，请先阅读 frontend-request-skill 的 SKILL.md 与核心 reference。

---

Overview

This skill transforms a vague React project idea into a production-ready React 18 + TypeScript SPA with consistent architecture, design tokens, static assets, and coding standards.

1. Pre-development: brainstorm, scope, and produce a detailed specification.
2. Project initialization: scaffold the project, directory structure, CLAUDE.md, AGENTS.md, tsconfig.json, vite.config.ts.
3. Development: install frontend-request-skill's request layer, set up theme system, design the layout, and build core pages.
4. Post-development: lint, type-check (tsc --noEmit), verify the build.

When to Use

Invoke this skill when the user asks for:

• "帮我做一个 React 项目"
• "初始化一个 React + TypeScript 模板"
• "做一个 React 后台管理系统"
• "用 React 搭一个 xxx 网站"
• "帮我生成一个标准的 React 项目结构"
• Any request that involves creating a new React SPA from scratch (H5 / 后台 / 文档站)

Not for: React Native / 小程序 / Taro / 移动端 hybrid — use react-native-init-skill instead.

Workflow Summary

Phase 1: Pre-development
  → Ask 3-5 clarifying questions
  → Write spec.md (scope, pages, data model, API outline)

Phase 2: Project Initialization
  → npm create vite@latest scaffold
  → Replace placeholders
  → Create standard directory structure (including src/api/, src/services/, src/config/)
  → Generate CLAUDE.md (≤ 50 lines, references frontend-request-skill)
  → Generate AGENTS.md (≤ 400 lines, on-demand references)
  → Apply tsconfig.json strict template
  → Apply vite.config.ts template (path alias + auto-import)
  → Copy code-examples/ (types / stores / components / pages)

Phase 3: Development
  → Install frontend-request-skill's request layer (copy from references/)
  → Configure src/config/api.config.ts (BASE_URL / PREFIX / SUCCESS_CODES)
  → Configure src/config/error.config.ts (ERROR_CODE_MAP)
  → Set up src/styles/globals.css theme variables
  → Implement core pages using code-examples/ as template
  → Write hooks (useAuth, useFetch, ...)

Phase 4: Post-development
  → npm run lint           # ESLint must pass
  → npm run type-check     # tsc --noEmit must pass
  → npm run build          # Must build successfully
  → Summarize deliverables