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