Claude-skill-registry Frontend Master

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/dev-frontend-master" ~/.claude/skills/majiayu000-claude-skill-registry-frontend-master && rm -rf "$T"

manifest: skills/data/dev-frontend-master/SKILL.md

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

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