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-bindandv-ondirectives 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
- ALWAYS use the Composition API with
<script setup>syntax for new Vue 3 components - NEVER use the Options API for new components — it is superseded by Composition API
- ALWAYS use Pinia for shared application state rather than Vuex or provide/inject
- NEVER directly mutate Pinia store state outside of actions — use actions exclusively
- ALWAYS use
definePropsanddefineEmitswith 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.mdAfter completing: Record any new patterns or exceptions discovered.
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.