vue-generate-skill

Vue Generate Skill

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

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

vue-generate-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/composables/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 Vue project idea into a production-ready Vue 3 + TypeScript SPA with consistent architecture, design tokens, static assets, and coding standards. It follows a four-phase workflow similar to uniapp-app-generate-skill, but focused on pure Vue3 + Vite (no cross-platform abstractions).

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 (vue-tsc --noEmit), verify the build.

When to Use

Invoke this skill when the user asks for:

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

Not for: uniapp / 小程序 / Taro / 移动端 hybrid — use uniapp-app-generate-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
  → create-vue 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 + Element Plus)
  → Copy code-examples/ (types / stores / components / views)

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/tokens.css theme variables
  → Implement core pages using code-examples/ as template
  → Write composables (useAuth, useTable, ...)

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