Vue Generate Skill

What it does

When your agent uses it

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

Example prompts

• “帮我做一个 Vue3 项目”
• “初始化 Vue3 + TS 模板”
• “做一个 Vue 后台管理系统”
• “/vue-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 3569fb8. 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

  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

Vue Generate Skill loads about 3.1k tokens when it runs, and up to ~28k if it reads all its reference files. Until then it costs about 152 tokens; SKILL.md has 664 words of instructions outside code blocks.

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

~152

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

~3.1k

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

~28k

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 3569fb8, republished under its Apache-2.0 licence (© jiushiwon). 664 words, ~3,065 tokens.

name

vue-generate-skill

description

This skill should be used when the user wants to create a standardized Vue 3 + TypeScript + Vite + Pinia 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 Vue3 + TypeScript strict mode (vue-tsc --noEmit must pass). Invoke when the user says "帮我做一个 Vue3 项目"、"初始化 Vue3 + TS 模板"、"做一个 Vue 后台管理系统"、"用 Vue3 搭一个 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
  → 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

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

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

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

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

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

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

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

npm create vue@latest {{project-name}} -- --typescript --router --pinia --eslint --prettier
cd {{project-name}}
npm install

# Element Plus（默认）
npm install element-plus @element-plus/icons-vue

# 工具
npm install -D @types/node unplugin-auto-import unplugin-vue-components

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "useUnknownInCatchVariables": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "Bundler",
    "paths": {
      "@/*": ["src/*"]
    },
    "noEmit": true
  }
}

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: 'src/auto-imports.d.ts' }),
    Components({ resolvers: [ElementPlusResolver()], dts: 'src/components.d.ts' }),
  ],
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
});

src/
├── api/              # 必须按 frontend-request-skill 划分
│   ├── request.ts
│   ├── upload.ts
│   ├── sse.ts (按需)
│   ├── _mocks_/
│   └── modules/
├── services/
│   └── auth.service.ts
├── config/
│   ├── api.config.ts
│   └── error.config.ts
├── stores/modules/   # Pinia Setup 风格
├── composables/      # useAuth 等
├── views/            # 页面
├── types/api.ts      # ApiResponse<T> / RequestError
└── utils/            # auth.ts / error.ts / toast.ts

<script setup lang="ts">
// 1. 类型导入
import type { User, UserListParams } from '@/types/user';

// 2. 响应式状态
const loading = ref(false);
const tableData = ref<User[]>([]);

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

npm run type-check    # vue-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 24 other files (references) in vibeCoding/frontend/vue/vue-base-skill/vue-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/api/_mocks_/auth.mock.ts
• references/code-examples/api/_mocks_/index.ts
• references/code-examples/api/modules/auth.ts
• references/code-examples/api/modules/user.ts
• references/code-examples/components/AppLayout.vue
• references/code-examples/services/auth.service.ts
• references/code-examples/stores/app.ts
• … and 12 more

Open the folder on GitHubat commit 3569fb8