code-generation
Scaffold Vue components and composables using the PlentyONE Shop CLI.
Install
mkdir -p .claude/skills/code-generation && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10531" && unzip -o skill.zip -d .claude/skills/code-generation && rm skill.zipInstalls to .claude/skills/code-generation
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Automates component, composable, and CMS block scaffolding using the PlentyONE Shop CLI. Use this when creating new code structures instead of manually copying existing files.Key capabilities
- →Generate components with PascalCase naming
- →Generate composables with camelCase and 'use' prefix
- →Scaffold CMS blocks with `--with-form` option
- →Scaffold settings components with `--with-view` and `--with-toolbar`
- →Specify custom output paths for generated files
- →Skip generation of test files or type files
How it works
The skill determines the type and name from user input, applies naming conventions, and executes the appropriate `npm run generate` command with specified options to scaffold code structures.
Inputs & outputs
When to use code-generation
- →Generating new components
- →Creating new composables
- →Scaffolding CMS blocks
About code-generation
Automates the generation of project structures. Enforces naming conventions for components and composables, and integrates with shop-cli commands.
Automates component, composable, and CMS block scaffolding using the PlentyONE Shop CLI. Use this when creating new code structures instead of manually copying existing files.
When not to use it
- →When manually copying existing files instead of scaffolding new structures
- →When the desired structure is not a component, composable, or CMS block
- →When the project does not use the PlentyONE Shop CLI
Limitations
- →Validation is handled by shop-cli, rejecting invalid names
- →Requires `npm run generate` commands to be available
- →Output format is a JSON object indicating success or error
How it compares
This skill automates code scaffolding and enforces naming conventions using the PlentyONE Shop CLI, preventing manual errors and ensuring consistency, unlike copying and modifying existing files.
Compared to similar skills
code-generation side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| code-generation (this skill) | 0 | 6mo | Review | Beginner |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-pages | 1 | 6mo | No flags | Intermediate |
| pinia | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-pages
JaguarJack
Generate Vue frontend pages using catch-table for CatchAdmin module with full component features.
pinia
antfu
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
frontend-crud
mfish-qf
为 mfish-nocode-pro 项目前端（Vue3 + TypeScript）生成标准增删改查页面代码，包括 Model、API、data、index.vue、Modal、ViewModal 六个文件。当用户说"帮我生成前端增删改查"、"新增前端页面"、"生成前端CRUD"时使用此 skill。
vue
valibali
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
vue
TerminalSkills
|