Frontend Master

Frontend Master Skill

🎯 Capabilities

• Vue 3 Components: Creation and refactoring (<script setup>, TypeScript)
• State Management: Pinia stores, actions, and persistence
• Reactivity: Debugging ref, reactive, computed, watch
• UI/UX: Tailwind CSS, Design Tokens, Animations
• VueUse: Implementation of browser APIs and utilities

🛠️ Best Practices

Component Structure

<script setup lang="ts">
import { computed } from 'vue'
// Imports...
// Props/Emits...
// Composables...
// Computed...
// Methods...
</script>

<template>
  <!-- Semantic HTML -->
</template>

Pinia Patterns

• Use Setup Stores (export const useStore = defineStore(...))
• Always type state interfaces
• Use storeToRefs for destructuring reactive state

Debugging Reactivity

• Check for lost reactivity on destructuring (use toRefs)
• Verify computed dependencies
• Ensure deeply nested objects are reactive

🧹 Action Protocol

1. Analyze: Understand the UI/UX requirement or bug.
2. Plan: Identify which components/stores are affected.
3. Implement: Write clean, typed Vue 3 code.
4. Verify: Check for reactivity leaks and console errors.