How does this skill help with Vue 2 to 3 migration?

It identifies Options API patterns and provides specific refactoring logic to convert components to the Composition API while ensuring reactivity and lifecycle hooks are correctly mapped.

Can it prevent Pinia reactivity issues?

Yes, the skill includes automated checks to ensure reactive objects are not destructured without toRefs or storeToRefs, preventing common state sync bugs.

How does it handle Vue compiler macros?

The skill provides optimized patterns for defineModel, defineSlots, and defineExpose to reduce boilerplate and ensure type safety in script setup blocks.

Does it support Nuxt and SSR hydration?

Absolutely. It includes patterns for handling browser-only APIs and serialization limits to prevent hydration mismatches in Nuxt and SSR environments.

Vue 3 Mastery & Patterns

Name: Vue 3 Mastery & Patterns
Author: hjemmesidekongen

byhjemmesidekongen

0•

设计工具

Implements production-grade Vue 3 architectures using Composition API, Pinia state management, and SSR-safe patterns.

This skill equips Claude with specialized knowledge of the Vue 3 ecosystem, focusing on the Composition API, reactivity system, and Pinia state management. It enforces structural best practices through automated checks, preventing common pitfalls like reactivity loss during destructuring or improper SSR hydration. Whether you are migrating from Vue 2 to 3 or architecting complex reactive applications, this skill provides expert-level guidance on composable design, compiler macros, and high-performance state management patterns.

主要功能

01Expert Pinia store architecture and plugin implementation guidance

02Reactivity validation to prevent broken destructuring in stores and components

03Automated Composition API enforcement and Vue 2-to-3 migration patterns

04Advanced compiler macro support for defineModel and type-safe defineSlots

05SSR and Nuxt hydration mismatch detection and resolution strategies

060 GitHub stars

使用场景

01Designing scalable global state management using Pinia with type-safe injection keys

02Refactoring legacy Vue 2 Options API components to modern Vue 3 Composition API

03Optimizing Nuxt applications for server-side rendering and fixing hydration errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai vue-patterns

For use in Claude.ai and ChatGPT