Vue Development

Applica pattern TypeScript di Vue 3.4+: defineModel, typed emits, Testing Library al posto di test-utils.

di alexanderop · alexanderop/claude-skill-vue-development

Promosso ★ 8.0/10

Vue Development — Applica pattern TypeScript di Vue 3.4+: defineModel, typed emits, Testing Library al posto di test-utils.

Cosa fa

Una skill di applicazione di pattern Vue 3 + TypeScript per la pianificazione e l'implementazione di componenti, composables, routing e test - promuove defineModel() rispetto alle prop manuali modelValue, defineProps/defineEmits tipizzate rispetto alla validazione runtime, e @testing-library/vue + MSW rispetto a test-utils e mock manuali. Si attiva quando si architettano o si scrivono codici Vue 3 Composition-API; esclude esplicitamente lavori su Vue 2 e Options API.

Rapporto di test

Costruito lo stesso componente UserAvatar due volte: senza guida è risultato un div cliccabile non semantico senza testo alt o gestione errori e un mock fetch manuale nel test; con la guida della skill è diventato un pulsante accessibile con testo alt, stato di errore try/catch, defineModel e un test Testing Library supportato da MSW - un divario reale e visibile. Ma il README cita SKILL-CREATION-SUMMARY.md, FINAL-STATUS.md, OPTIMIZATION-SUMMARY.md e una cartella test-scenarios/ come prova della sua affermazione '100% compliance / PRODUCTION-READY', e nessuno di questi file esiste nel repo clonato.

Testato il: 2026-07-14 · Claude Code 2.x (agent harness)

Installazione

git clone https://github.com/alexanderop/claude-skill-vue-development
cd claude-skill-vue-development
mkdir -p ~/.claude/skills
cp -r skills/vue-development ~/.claude/skills/vue-development

Comandi e prompt di esempio

  • /vue-developmentApplica pattern TypeScript di Vue 3.4+: defineModel, typed emits, Testing Library al posto di test-utils.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • Build a UserAvatar component in Vue 3 with a v-model prop
  • Write typed defineProps and defineEmits for this Vue form
  • Add a Testing Library test for my Vue composable, not test-utils