Vue Development
Aplica patrones de TypeScript para Vue 3.4+: defineModel, typed emits, Testing Library sobre test-utils.
Probado · Funciona
Qué hace
Una habilidad de aplicación de patrones para Vue 3 + TypeScript para planificar e implementar componentes, composables, enrutamiento y pruebas - promueve defineModel() sobre props manuales de modelValue, defineProps/defineEmits tipados sobre validación en tiempo de ejecución, y @testing-library/vue + MSW sobre test-utils y mocks manuales. Se activa al diseñar o escribir código Vue 3 Composition-API; excluye explícitamente el trabajo con Vue 2 y Options API.
Informe de la prueba
Se construyó el mismo componente UserAvatar dos veces: sin guía, resultó en un div no semántico clicable sin texto alternativo ni manejo de errores y un mock de fetch manual en la prueba; con la guía de la habilidad, se convirtió en un botón accesible con texto alternativo, estado de error try/catch, defineModel y una prueba de Testing Library respaldada por MSW - una brecha real y visible. Pero el README cita SKILL-CREATION-SUMMARY.md, FINAL-STATUS.md, OPTIMIZATION-SUMMARY.md y una carpeta test-scenarios/ como evidencia de su afirmación '100% compliance / PRODUCTION-READY', y ninguno de esos archivos existe en el repositorio clonado.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
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
Comandos y prompts de ejemplo
/vue-developmentAplica patrones de TypeScript para Vue 3.4+: defineModel, typed emits, Testing Library sobre test-utils.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Build a UserAvatar component in Vue 3 with a v-model propWrite typed defineProps and defineEmits for this Vue formAdd a Testing Library test for my Vue composable, not test-utils