home / skills / ehtbanton / claudeskillsrepo / vue-component-generator

vue-component-generator skill

safe

This skill generates complete Vue 3 components using Composition API and TypeScript with props, emits, and scoped styles.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill vue-component-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

683 B

---
name: vue-component-generator
description: Generate Vue 3 components with Composition API TypeScript and scoped styles. Triggers on "create vue component", "generate vue file", "vue 3 component", ".vue component".
---

# Vue Component Generator

Generate Vue 3 components with Composition API and TypeScript.

## Output Requirements

**File Output:** `*.vue` component files
**Format:** Valid Vue 3 SFC
**Standards:** Vue 3.4+, script setup, TypeScript

## When Invoked

Immediately generate a complete Vue component with props, emits, and styles.

## Example Invocations

**Prompt:** "Create Vue button component"
**Output:** Complete `Button.vue` with variants and TypeScript.

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.

FAQ

Does the skill include tests or storybook stories?

No, it generates only a single .vue SFC. You can request example usage snippets or test scaffolds in a follow-up prompt.

Can it target Options API or JavaScript instead of TypeScript?

This generator targets Vue 3 script setup with TypeScript by default. Specify a different target in your prompt if you need Options API or plain JavaScript.