Agent Skills: Vue Expert

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. </instructions>

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.