# Frontend Master

> Master skill for all Frontend Vue 3 development. Covers Components, Pinia, VueUse, Reactivity, CSS, and UI/UX.

- Skill: `majiayu000/frontend-master-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-master-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-master-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend-master-3

---


# 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
```vue
<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.