Does it include routing best practices?

Yes, it promotes explicit route parameters and structured route groups while discouraging the use of generic index.vue files.

Can I use this for JavaScript-only projects?

While possible, the skill is designed to enforce TypeScript-first patterns to ensure maximum type safety and maintainability.

How does it handle v-model?

It enforces the use of the defineModel() macro introduced in Vue 3.4, which significantly reduces boilerplate compared to manual props and emits.

Why does it prefer Testing Library over Vue Test Utils?

It prioritizes testing user behavior and accessibility rather than internal component state to ensure tests are resilient to refactors.

Does this skill support Vue 2?

No, this skill is specifically optimized for Vue 3 using the Composition API and modern features like defineModel.

Modern Vue Development

Name: Modern Vue Development
Author: alexanderop

byalexanderop

•

Developer Tools

Architects production-grade Vue 3 applications using TypeScript, the Composition API, and testing-first methodologies.

This skill equips Claude with the expertise to build robust Vue 3 applications by enforcing modern patterns like defineModel, type-safe props/emits, and user-centric testing with Testing Library. It focuses on eliminating technical debt during the planning phase, ensuring architectural consistency across components, composables, and routing while strictly adhering to TypeScript-first principles and avoiding common anti-patterns like manual v-model implementations or flaky test utilities.

Key Features

01Guides user-behavior testing using Testing Library and MSW to avoid implementation leakage.

028 GitHub stars

03Standardizes routing with explicit naming and route groups to prevent navigation bugs.

04Enforces Vue 3.4+ patterns like defineModel for streamlined two-way binding.

05Implements strict TypeScript-first architecture for props, emits, and state management.

06Promotes clean composable design by isolating UI logic and ensuring proper naming conventions.

Use Cases

01Scaffolding a new Vue 3 project with enterprise-grade folder structures and type safety.

02Implementing complex forms and components requiring robust two-way data binding and async testing.

03Refactoring legacy Vue 2 or Options API codebases into modern Composition API patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alexanderop/claude-skill-vue-development vue-development

For use in Claude.ai and ChatGPT

Download Skill