playbooks

home / skills / jeremylongshore / claude-code-plugins-plus-skills / vue-component-generator

vue-component-generator skill

/skills/05-frontend-dev/vue-component-generator

This skill helps you generate production-ready Vue components and configurations with best practices, validation, and step-by-step guidance.

npx playbooks add skill jeremylongshore/claude-code-plugins-plus-skills --skill vue-component-generator

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

Files (1)
SKILL.md
2.2 KB
---
name: "vue-component-generator"
description: |
  Generate vue component generator operations. Auto-activating skill for Frontend Development.
  Triggers on: vue component generator, vue component generator
  Part of the Frontend Development skill category. Use when working with vue component generator functionality. Trigger with phrases like "vue component generator", "vue generator", "vue".
allowed-tools: "Read, Write, Edit, Bash(cmd:*), Grep"
version: 1.0.0
license: MIT
author: "Jeremy Longshore <[email protected]>"
---

# Vue Component Generator

## Overview

This skill provides automated assistance for vue component generator tasks within the Frontend Development domain.

## When to Use

This skill activates automatically when you:
- Mention "vue component generator" in your request
- Ask about vue component generator patterns or best practices
- Need help with frontend skills covering react, vue, css, accessibility, performance optimization, and modern web development patterns.

## Instructions

1. Provides step-by-step guidance for vue component generator
2. Follows industry best practices and patterns
3. Generates production-ready code and configurations
4. Validates outputs against common standards

## Examples

**Example: Basic Usage**
Request: "Help me with vue component generator"
Result: Provides step-by-step guidance and generates appropriate configurations


## Prerequisites

- Relevant development environment configured
- Access to necessary tools and services
- Basic understanding of frontend development concepts


## Output

- Generated configurations and code
- Best practice recommendations
- Validation results


## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| Configuration invalid | Missing required fields | Check documentation for required parameters |
| Tool not found | Dependency not installed | Install required tools per prerequisites |
| Permission denied | Insufficient access | Verify credentials and permissions |


## Resources

- Official documentation for related tools
- Best practices guides
- Community examples and tutorials

## Related Skills

Part of the **Frontend Development** skill category.
Tags: react, vue, css, accessibility, web

Overview

This skill automates creation and guidance for Vue component generator tasks in frontend projects. It produces production-ready component code, configuration snippets, and validation checks aligned with modern Vue patterns. Use it to speed up component scaffolding, enforce best practices, and reduce repetitive boilerplate.

How this skill works

When triggered, the skill analyzes the requested component requirements (props, state, events, styles, and testing needs) and returns step-by-step generation output. It emits Vue Single File Component (SFC) templates, recommended folder structure, configuration for tooling (linting, formatting, build), and lightweight validation suggestions. Output is tailored to common Vue versions and can include accessibility and performance recommendations.

When to use it

  • Scaffolding a new Vue component (SFC) with props, emits, and slots
  • Converting design or spec into component code and tests
  • Enforcing consistent folder structure and naming conventions
  • Adding accessibility, unit test, or performance hints to components
  • Generating config snippets for linting, formatting, or build tools

Best practices

  • Define clear props with types and default values; prefer composition API for new components
  • Keep components small and focused—extract reusable logic into composables
  • Include unit tests and basic accessibility checks alongside the component
  • Use CSS modules or scoped styles to limit style leakage; prefer utility classes for layout
  • Provide clear documentation comments and example usage for each generated component

Example use cases

  • Generate a form input component with props, validation, and ARIA attributes
  • Scaffold a presentational card component with slots and responsive styles
  • Create a data-table row component with event emits and keyboard navigation support
  • Produce a reusable modal component including focus trap and close behavior
  • Output a component template plus ESLint/Prettier and basic Vitest unit test

FAQ

Which Vue versions does this target?

Generated output targets modern Vue patterns; specify Vue 2 or Vue 3 in your request for exact syntax and API differences.

Can it generate tests and accessibility checks?

Yes — you can request unit tests and basic accessibility annotations; the skill also suggests validation steps you should run locally.