Does this skill support Vue 2?

No, this skill is specifically designed for Vue 3, utilizing the modern Composition API and syntax for optimal performance and developer experience.

Can I use this for complex business logic?

Absolutely. The skill follows best practices by extracting complex logic into separate composables to keep your component files clean and readable.

Are the components generated with TypeScript?

Yes, all components include full TypeScript support, including interfaces for props and emits, ensuring type safety throughout your application.

Does it include unit testing boilerplate?

Yes, for every component generated, the skill provides a corresponding .spec.ts file using Vue Test Utils patterns.

Vue.js Component Architect

Name: Vue.js Component Architect
Author: Dexploarer

byDexploarer

•

開発者ツール

Generates production-ready Vue 3 components using Composition API, TypeScript, and modern architectural patterns.

The Vue.js Component Architect skill streamlines the creation of high-quality Vue 3 Single File Components (SFCs) by automating boilerplate and enforcing best practices. It leverages the Composition API with <script setup>, implements strict TypeScript typing for props and emits, and follows a modular file structure. Whether you are building simple presentational components or complex stateful UI elements, this skill ensures your code is type-safe, testable, and maintainable by including integrated unit tests and composable extraction logic.

主な機能

01Enforces scoped CSS and accessibility standards by default

02Generates SFCs using Vue 3 Composition API and <script setup> syntax

03Automatically scaffolds unit tests using Vue Test Utils

04Implements strict TypeScript interfaces for props, emits, and state

052 GitHub stars

06Extracts complex logic into reusable composables for better separation of concerns

ユースケース

01Building complex form inputs with integrated v-model and validation logic

02Rapidly scaffolding UI libraries with consistent TypeScript patterns

03Generating feature-rich components with lifecycle hooks and async data fetching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dexploarer/claudius-skills vue-component-generator

For use in Claude.ai and ChatGPT

Download Skill