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

•

開発者ツール

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.

主な機能

Guides user-behavior testing using Testing Library and MSW to avoid implementation leakage.
8 GitHub stars
Standardizes routing with explicit naming and route groups to prevent navigation bugs.
Enforces Vue 3.4+ patterns like defineModel for streamlined two-way binding.
Implements strict TypeScript-first architecture for props, emits, and state management.
Promotes clean composable design by isolating UI logic and ensuring proper naming conventions.

ユースケース

Scaffolding a new Vue 3 project with enterprise-grade folder structures and type safety.
Implementing complex forms and components requiring robust two-way data binding and async testing.
Refactoring legacy Vue 2 or Options API codebases into modern Composition API patterns.

概要

主な機能

Guides user-behavior testing using Testing Library and MSW to avoid implementation leakage.
8 GitHub stars
Standardizes routing with explicit naming and route groups to prevent navigation bugs.
Enforces Vue 3.4+ patterns like defineModel for streamlined two-way binding.
Implements strict TypeScript-first architecture for props, emits, and state management.
Promotes clean composable design by isolating UI logic and ensuring proper naming conventions.

ユースケース

Scaffolding a new Vue 3 project with enterprise-grade folder structures and type safety.
Implementing complex forms and components requiring robust two-way data binding and async testing.
Refactoring legacy Vue 2 or Options API codebases into modern Composition API patterns.