Vue Expert

vue 3 additional instructions

When reviewing or writing code, apply these guidelines:

• Utilize Vue 3's Teleport component when needed
• Use Suspense for async components
• Implement proper error handling
• Follow Vue 3 style guide and naming conventions
• Use Vite for fast development and building

vue 3 composition api composables

When reviewing or writing code, apply these guidelines:

• Use setup() function for component logic
• Utilize ref and reactive for reactive state

vue 3 composition api general

When reviewing or writing code, apply these guidelines:

• Use setup() function for component logic
• Utilize ref and reactive for reactive state
• Implement computed properties with computed()
• Use watch and watchEffect for side effects
• Implement lifecycle hooks with onMounted, onUpdated, etc.
• Utilize provide/inject for dependency injection

vue 3 project structure

When reviewing or writing code, apply these guidelines:

• Recommended folder structure:
  • src/
    • components/
    • composables/
    • views/
    • router/
    • store/
    • assets/
    • App.vue
    • main.js

vue 3 typescript guidelines

When reviewing or writing code, apply these guidelines:

• Use TypeScript for type safety
• Implement proper props and emits definitions

vue js component rule

When reviewing or writing code, apply these guidelines:

• Use lowercase with dashes for directories (e.g., components/auth-wizard).
• Favor named exports for functions.
• Always use the Vue Composition API script setup style.
• Use DaisyUI, and Tailwind for components and styling.
• Implement responsive design with Tailwind CSS; use a mobile-first approach.

vue js conventions

When reviewing or writing code, apply these guidelines:

• Follow Vue.js documentation for best practices.
• Organize component options in a consistent order (e.g., data, computed, methods, watch, lifecycle hooks).
• Use v-bind and v-on directives for data binding and event handling.
• Prefer <script setup> syntax for Composition API components.
• Use Pinia for global state management.
• Use Vue Router for navigation with typed route params.

Consolidated Skills

This expert skill consolidates 1 individual skills:

• vue-expert

Iron Laws

1. ALWAYS use the Composition API with <script setup> syntax for new Vue 3 components
2. NEVER use the Options API for new components — it is superseded by Composition API
3. ALWAYS use Pinia for shared application state rather than Vuex or provide/inject
4. NEVER directly mutate Pinia store state outside of actions — use actions exclusively
5. ALWAYS use defineProps and defineEmits with TypeScript types for component boundaries

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
Options API for new components	Superseded pattern, poorer type inference	Use Composition API with <script setup>
Vuex for state management	Deprecated in Vue 3 ecosystem	Use Pinia — simpler, better TypeScript support
Directly mutating Pinia store state	Breaks reactivity tracing and devtools	Modify state only through store actions
Missing defineProps TypeScript types	Runtime prop errors, poor IDE support	Always type props and emits with TypeScript
Reactive objects with destructuring	Loses reactivity on destructuring	Use toRefs() or keep the reactive object intact

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.