vue-component-generator_skill

Overview

This skill generates ready-to-use Vue 3 single-file components using the Composition API, TypeScript, and scoped styles. It produces valid .vue files that follow Vue 3.4+ script setup conventions and include props, emits, and style blocks. Outputs are complete components you can drop into a project and use or customize immediately.

How this skill works

When triggered by phrases like "create vue component" or "vue 3 component", the skill composes a full SFC (.vue) file. It scaffolds script setup with TypeScript types for props and emits, implements reactive state and lifecycle hooks as needed, and adds a scoped style section with sensible defaults. The generator returns a single .vue file text that conforms to Vue 3 SFC expectations.

When to use it

• You need a new Vue 3 component scaffolded fast with TypeScript and Composition API.
• Creating UI primitives such as buttons, inputs, modals, or lists with typed props and emits.
• Prototyping components to validate API shape and styling before integrating into a design system.
• Converting plain JavaScript components into Vue 3 script setup + TypeScript format.
• Producing consistent component files that follow project conventions for team handoff.

Best practices

• Provide the desired component name, props, variants, and a brief behavior description in the prompt.
• Specify the level of accessibility and ARIA support required if the component is interactive.
• Ask for example usage and TypeScript interfaces when you want consumer-facing docs included.
• Request styling conventions (CSS variables, BEM, utility classes) to match your project guidelines.
• Review and adapt generated logic for complex state or global store integrations.

Example use cases

• "Create Vue button component" returns Button.vue with primary/secondary variants, typed props, emits, and scoped styles.
• Generate an Input.vue that exposes v-model binding with TypeScript types and input validation hooks.
• Produce a Modal.vue with open/close emits, keyboard handling, and accessible markup patterns.
• Scaffold a DataTable.vue that accepts typed columns and rows props, sorting emits, and minimal styling.
• Quickly convert a legacy component spec into a modern Vue 3 SFC for a code review or prototype.