Vue Creater

What it does

This skill, Vue Creater, generates Vue components with pre-built templates, props, and basic styling based on your specifications. It allows you to quickly scaffold new Vue projects using different frameworks like shadcn/vue, Nuxt Admin Dashboard, or Electron. The skill guides the AI agent through a multi-step process depending on the chosen project type, ensuring proper setup and configuration.

When to use it

• You need to rapidly prototype a new Vue component or application.
• You want to start a project with a pre-configured stack including Tailwind CSS, shadcn/vue, Pinia, Vue Router, and TanStack Query.
• You're looking for a quick way to set up a Nuxt Admin Dashboard or an Electron app using the Vue ecosystem.
• You need to initialize a project scaffold and sync design data (DSL).

Key capabilities

• Project type selection: Offers three project types – Default, Nuxt Admin Dashboard, and Electron.
• Automated script execution: Runs Python scripts for project initialization and configuration based on the selected project type.
• Variable assignment: Automatically assigns directory paths to variables like $PROJECT_ROOT.
• DSL data retrieval: Supports retrieving design data using a get_dsl tool (for Default template workflow).
• Stack includes: Vue 3 (Script Setup) + TypeScript + Vite, Tailwind CSS v4 + shadcn-vue, Pinia, Vue Router, and TanStack Query.

Example prompts

• "Create a new Vue project using the default template."
• "Generate a Nuxt Admin Dashboard project named 'my-admin'."
• "Set up an Electron app with Vue."

Tips & gotchas

• Session Context is Required: The skill relies on maintaining a session context to store file paths. Ensure this is properly managed before proceeding.
• Project Name Specification: When creating Nuxt Admin Dashboard or Electron projects, you can optionally specify a project name which will be passed as an argument to the initialization script. If no name is provided, a default name will be used.
• Full Script Paths: Always use the full path $SKILL_DIR/scripts/script-name.py when executing scripts.