vue-vben-crud

Generate complete CRUD module code in Vue Vben Admin projects, including pages, forms, tables, and API interfaces. Must use this Skill when users say "generate CRUD", "create module", "add page", "write CRUD", "generate table page", "create xxx management", "generate xxx module". Do not skip even if the task seems simple. Do not generate code directly. All questions about component usage must be answered by reading the corresponding component documentation first, never from memory.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "vue-vben-crud" with this command: npx skills add susiecmy/vben-skills/susiecmy-vben-skills-vue-vben-crud

Vue Vben CRUD Generator

Mandatory Execution Process (Cannot Skip Any Step)

1. Collect Requirements (Must Ask First, Cannot Skip)

Before generating any code, if the user has not provided the following information, ask one by one and wait for confirmation before proceeding to step 2. Do not guess from context and generate directly:

  • Module name (English, e.g. user, product)
  • Field list and types (name, type, required, validation rules)
  • Whether multi-tab is needed
  • Special feature requirements (import/export, batch operations, etc.)
  • Default to no i18n unless user explicitly requests multi-language support

2. Read Reference Documentation (Must Read Before Generation)

Prioritize reading the default CRUD template: assets/crud-template.md

Before generating any component, you must read the corresponding documentation first. Never generate from memory.

Before using useVbenModal, useVbenDrawer, useVbenVxeGrid, search the project to find the actual import path. Never guess.

Component TypeRead This Doc FirstThen Refer to This Template
Formreferences/vben-form.mdassets/form-template.md
Tablereferences/vben-table.mdassets/table-usage-template.md
Modalreferences/vben-modal.mdassets/modal-template.md
Drawerreferences/vben-drawer.mdassets/drawer-template.md
PageNoneassets/page-template.md
Count Animatorreferences/vben-count-animator.mdassets/count-to-template.md
Ellipsis Textreferences/vben-ellipsis-text.mdassets/ellipsis-text-template.md
Alertreferences/vben-alert.mdassets/alert-template.md

3. Generate File Structure

All files below must be generated. Not a single one can be skipped, even if the user has already provided information:

src/
├── api/
│   └── [module]/
│       ├── types.ts              # Type definitions, must generate
│       └── index.ts              # API interfaces, must generate
├── router/
│   └── routes/
│       └── modules/
│           └── [module].ts       # Route config, must generate
└── views/
    └── [module]/                 # e.g. push/
        ├── index.vue             # Main page, must generate
        └── modules/              # Sub-component directory
            ├── form.vue          # Form component, must generate
            └── data.ts           # Data config, must generate

Important: index.vue and data.ts are in [module]/ root. form.vue, drawer.vue and other components are in [module]/modules/. Do NOT nest an extra [module] subdirectory.

File responsibilities:

  • types.ts: Define request/response types and entity types
  • index.ts: Encapsulate CRUD API methods (create, read, update, delete)
  • [module].ts: Route config, define menu and page routes
  • form.vue: Form component using useVbenModal or useVbenDrawer
  • data.ts: Table column config and search form schema
  • index.vue: Main page using useVbenVxeGrid to integrate the table

4. Code Quality Check (Must Complete Before Output Summary, Cannot Skip)

4.1 Automated Script Check (Run First)

bash .claude/skills/vue-vben-crud/scripts/check.sh <api-path> <views-path>
# Example: bash .claude/skills/vue-vben-crud/scripts/check.sh src/api/system/push src/views/system/push

If the script outputs exit 1, fix the errors and re-run. Only proceed to 4.2 after the script outputs "🎉 All checks passed".

4.2 Manual Documentation Check (Run After Script Passes)

Scripts cannot verify component API usage. You must manually check against the docs:

  • Read references/vben-form.md, verify form API usage in form.vue
  • Read references/vben-table.md, verify table column config in data.ts
  • Read references/vben-modal.md or vben-drawer.md, verify modal/drawer usage
  • Verify type definitions in types.ts match usage in form.vue, data.ts, and index.ts
  • Verify API method parameters match request types defined in types.ts

Fix any inconsistencies found. Only output the final summary after all checks pass.


Output Format

After generation completes, output the summary in this exact format:

✅ [Module Name] CRUD Module Generation Complete

📁 Generated Files:
- src/api/[module]/types.ts
- src/api/[module]/index.ts
- src/router/routes/modules/[module].ts
- src/views/[module]/index.vue
- src/views/[module]/modules/form.vue
- src/views/[module]/data.ts

🎯 Next Steps:
1. Adjust API endpoint URLs to match actual backend paths
2. Add route configuration
3. Adjust field validation and display logic based on business requirements

Core Principles

  • All code must comply with TypeScript strict mode
  • Follow Vben Admin best practices and code style
  • Use framework-provided components and utilities only, do not create custom implementations
  • Keep code concise, avoid over-engineering
  • Ensure type safety to reduce runtime errors

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

github-tools

Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.

Archived SourceRecently Updated
Coding

openclaw-version-monitor

监控 OpenClaw GitHub 版本更新,获取最新版本发布说明,翻译成中文, 并推送到 Telegram 和 Feishu。用于:(1) 定时检查版本更新 (2) 推送版本更新通知 (3) 生成中文版发布说明

Archived SourceRecently Updated
Coding

ask-claude

Delegate a task to Claude Code CLI and immediately report the result back in chat. Supports persistent sessions with full context memory. Safe execution: no data exfiltration, no external calls, file operations confined to workspace. Use when the user asks to run Claude, delegate a coding task, continue a previous Claude session, or any task benefiting from Claude Code's tools (file editing, code analysis, bash, etc.).

Archived SourceRecently Updated
Coding

ai-dating

This skill enables dating and matchmaking workflows. Use it when a user asks to make friends, find a partner, run matchmaking, or provide dating preferences/profile updates. The skill should execute `dating-cli` commands to complete profile setup, task creation/update, match checking, contact reveal, and review.

Archived SourceRecently Updated