React Generate Skill

What it does

When your agent uses it

• Wants to create a standardized React 18 + TypeScript + Vite + Zustand project from scratch
• Says 帮我做一个 React 项目、初始化 React + TS 模板、做一个 React 后台管理系统、用 React 搭一个 xxx
• Similar requests

Example prompts

• “帮我做一个 React 项目”
• “初始化 React + TS 模板”
• “做一个 React 后台管理系统”
• “/react-generate-skill”

Requirements

• Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

1. 1Pre-development
2. 2Project Initialization
3. 3Development
4. 4Post-development

What it can do on your machine

Read from SKILL.md and the folder at commit a4a640b. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships script files (TypeScript, from the files we listed), which the agent can run.

  Shell commands in SKILL.md call:

  • npm
  • tsc

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Generate Skill loads about 2.8k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 155 tokens; SKILL.md has 589 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~155

When it runs · the whole SKILL.md, loaded when a task matches

~2.8k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~13k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jiushiwon/wg-skills at commit a4a640b, republished under its Apache-2.0 licence (© jiushiwon). 589 words, ~2,837 tokens.

name

react-generate-skill

description

This skill should be used when the user wants to create a standardized React 18 + TypeScript + Vite + Zustand project from scratch. It guides through pre-development brainstorming, project initialization, dynamic theme system setup, layout design, and post-development verification. Strictly aligned with frontend-request-skill for HTTP layer (fetch + response envelope + token refresh queue), frontend conventions, and React 18 + TypeScript strict mode (tsc --noEmit must pass). Invoke when the user says "帮我做一个 React 项目"、"初始化 React + TS 模板"、"做一个 React 后台管理系统"、"用 React 搭一个 xxx" or similar requests.

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

# {{PROJECT_NAME}} 项目规格说明

## 1. 项目定位
- 产品名称：
- 目标用户：
- 核心价值：
- 对标产品：

## 2. 核心功能
1. ...
2. ...
3. ...

## 3. 页面清单
| 页面 | 路径 | 说明 |
|------|------|------|
| 首页/Dashboard | src/pages/Dashboard.tsx | ... |

## 4. 数据模型
- User: { id, username, nickname, avatar, role, tenantId, createdAt }
- ...

## 5. API 轮廓
- POST /api/auth/login → { token, refreshToken, user }
- GET /api/users → { items, total }
- ...

## 6. 设计风格
- 风格：极简工具 / 商务数据 / ...
- 主色：#10b981
- UI 库：Ant Design 5.x
- 是否深色：否

npm create vite@latest {{project-name}} -- --template react-ts
cd {{project-name}}
npm install

# 状态管理
npm install zustand

# UI 库（Ant Design 默认）
npm install antd @ant-design/icons

# 路由
npm install react-router-dom

# 工具
npm install -D @types/node

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

src/
├── api/              # 必须按 frontend-request-skill 划分
│   ├── request.ts
│   ├── upload.ts
│   ├── sse.ts (按需)
│   └── modules/
├── services/
│   └── auth.service.ts
├── config/
│   ├── api.config.ts
│   └── error.config.ts
├── stores/           # Zustand Store
│   ├── userStore.ts
│   └── appStore.ts
├── hooks/           # useAuth, useFetch 等
├── pages/            # 页面（不是 views）
├── components/       # 组件
├── types/           # ApiResponse<T> / RequestError
├── utils/           # auth.ts / error.ts / toast.ts
└── styles/          # 全局样式

import { useState, useEffect } from 'react';
import type { User, UserListParams } from '@/types/user';

export function UserManagement() {
  const [loading, setLoading] = useState(false);
  const [tableData, setTableData] = useState<User[]>([]);

  // 业务方法（全部用 async/await + try/catch + unknown）
  async function loadData() {
    setLoading(true);
    try {
      const res = await userApi.list(query);
      setTableData(res.data.list);
    } catch (err: unknown) {
      if (err && typeof err === 'object' && 'code' in err) {
        showError(err);
      }
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    loadData();
  }, []);
}

npm run type-check    # tsc --noEmit

npm run lint

npm run build    # 自动先跑 type-check，再 vite build

© jiushiwon, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 20 other files (references) in vibeCoding/frontend/react/react-generate-skill of jiushiwon/wg-skills.

• SKILL.md
• README.md
• references/agents-md-template.md
• references/api-integration.md
• references/claude-md-template.md
• references/code-examples/README.md
• references/code-examples/components/AppLayout.module.css
• references/code-examples/components/AppLayout.tsx
• references/code-examples/pages/Login.module.css
• references/code-examples/pages/Login.tsx
• references/code-examples/pages/UserManagement.module.css
• references/code-examples/pages/UserManagement.tsx
• references/code-examples/stores/appStore.ts
• references/code-examples/stores/userStore.ts
• references/code-examples/types/api.ts
• … and 6 more

Open the folder on GitHubat commit a4a640b