vue

Visión general de vue skill

Para qué sirve vue skill

vue skill es una guía enfocada en generar y revisar código de Vue 3 con prácticas actuales, especialmente Composition API, <script setup lang="ts">, compiler macros, APIs de reactividad y componentes integrados como Transition, Teleport, Suspense y KeepAlive. Resulta especialmente útil cuando quieres que un agente de IA produzca Vue Single File Components que ya sigan un estilo moderno de Vue, en lugar de caer en patrones más antiguos de Options API.

Quién debería instalar vue skill

Este vue skill encaja bien para frontend developers, full-stack developers y usuarios de IA que piden con frecuencia componentes de Vue, composables o refactors. Tiene un valor especial si buscas resultados con enfoque TypeScript-first, conscientes de macros y alineados con la documentación de la era Vue 3.5, en vez de mezclar hábitos de Vue 2 con primeros enfoques de Vue 3.

Trabajo real que resuelve

La mayoría de los usuarios no necesitan un resumen genérico del framework. Necesitan que el agente escriba código Vue de forma fiable que:

• use Composition API por defecto
• priorice <script setup lang="ts">
• maneje correctamente defineProps, defineEmits y defineModel
• elija con más criterio entre ref, shallowRef, computed y watch
• recurra a built-ins avanzados solo cuando realmente encajen

Ese es el valor práctico de vue for Frontend Development: reducir la limpieza posterior al código generado por IA.

Qué hace que este skill sea realmente diferente

El principal diferenciador es su orientación clara y opinada. La fuente prioriza explícitamente TypeScript, <script setup lang="ts"> y Composition API, y desaconseja Reactive Props Destructure. Además, incluye referencias específicas sobre:

• macros de script setup
• reactividad y APIs core más recientes
• componentes integrados avanzados y directivas

Eso hace que el skill sea más útil para trabajo de implementación que un prompt amplio del tipo “enséñame Vue”.

Lo que este skill no intenta cubrir

Esto no es un mapa completo del ecosistema Vue. No sustituye documentación profunda sobre routing, librerías de estado, frameworks SSR, testing ni build tooling. Si tu tarea principal es arquitectura en Nuxt, configuración de Vue Router, diseño con Pinia o pipelines de despliegue, vue skill ayuda con el estilo de código a nivel de componente, pero no debería ser tu única fuente.

Cómo usar vue skill

Contexto de instalación para vue skill

Instala el skill en tu entorno con soporte para skills con:

npx skills add antfu/skills --skill vue

La evidencia en el repositorio muestra que el skill vive en skills/vue dentro de antfu/skills. Aquí no hay una instalación separada del paquete de Vue en sí; esto es una guía para mejorar la generación de Vue asistida por IA, no el runtime del framework.

Lee primero estos archivos

Si quieres la ruta de mayor señal antes de usar vue skill, lee esto en este orden:

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

Por qué en este orden:

• SKILL.md te da las preferencias operativas y el alcance.
• Los tres archivos de referencias concentran los detalles prácticos que el agente probablemente aplicará.
• GENERATION.md indica que el material se genera a partir de la documentación de Vue y que sigue un snapshot reciente.

Qué entradas necesita vue skill

La calidad de vue usage depende mucho de la petición que le pases al agente. Dale:

• propósito del componente
• props y eventos emitidos
• si necesitas v-model
• forma esperada del estado
• necesidades de datos asíncronos
• si la salida debe ser un componente, un composable o un ejemplo de patrón
• restricciones de versión de Vue si no estás en un Vue 3 reciente
• requisito de TypeScript
• cualquier restricción de UI o de rendimiento

Entrada débil:

• “Make a Vue component for search.”

Entrada sólida:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

Cómo convertir objetivos imprecisos en prompts sólidos para vue

Para invocar bien vue skill, pide explícitamente las decisiones de implementación. Una buena estructura de prompt sería:

1. indicar el artefacto
2. indicar las convenciones de Vue
3. definir entradas y salidas
4. añadir comportamiento y restricciones
5. pedir razonamiento cuando haya tradeoffs relevantes

Ejemplo:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

Esto funciona mejor que una petición genérica de “write Vue” porque coincide con las preferencias incorporadas del skill.

Estilo de código por defecto al que te llevará vue skill

El material fuente empuja con claridad al agente hacia:

• Vue 3.5
• Composition API
• <script setup lang="ts">
• definiciones de componentes basadas en macros
• props y emits tipados
• uso selectivo de shallowRef para datos sensibles al rendimiento

Si quieres Options API, JavaScript plano o patrones legacy de Vue, dilo de forma explícita, porque el skill está sesgado en contra de esas opciones.

Mejores casos de uso de vue skill

Esta vue guide destaca especialmente para:

• crear nuevos Vue SFCs
• refactorizar componentes antiguos a <script setup>
• definir props, emits y models tipados
• elegir entre ref, reactive, computed y watchers
• usar Transition, Teleport, Suspense o KeepAlive
• producir ejemplos de composables que sigan patrones modernos de Vue

Es menos útil para trabajo puramente visual de diseño o tareas frontend agnósticas del framework.

Flujo práctico para la primera salida

Un flujo fiable es:

1. Pedir una primera versión de un Vue SFC con props, emits y forma del estado explícitos.
2. Revisar si la API generada coincide con el contrato real de tu componente.
3. Pedir una segunda pasada que ajuste mejor las decisiones de reactividad, tipado y edge cases.
4. Solo entonces pedir funciones avanzadas como transiciones o límites de suspense.

Esta secuencia importa porque las funciones avanzadas de Vue se pueden sobreactivar fácilmente si el flujo básico de estado todavía no está claro.

Detalles respaldados por el repositorio que afectan a la calidad de salida

Detalles útiles que aparecen en la fuente del skill:

• defineModel se trata como disponible en Vue 3.4+
• withDefaults sigue siendo relevante para Vue 3.4 y anteriores
• reactive() pierde reactividad al hacer destructuring
• se prefiere shallowRef cuando la reactividad profunda no es necesaria
• built-ins como Transition y Suspense se cubren con patrones prácticos

Ese es exactamente el tipo de detalle que mejora el código generado más allá de una lectura superficial del repositorio.

Ejemplos de peticiones que encajan bien con vue skill

Buenas peticiones de vue usage:

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

Casos de desajuste habituales antes de instalar vue skill

No esperes que vue skill por sí solo resuelva:

• scaffolding del proyecto
• arquitectura del router
• diseño del store de estado en una app grande
• decisiones específicas de SSR o Nuxt
• configuración del test runner
• detalles de integración con frameworks CSS

Si esos son tus principales bloqueos, instálalo por la calidad de generación de componentes, no como guía completa de tu stack Vue.

Preguntas frecuentes sobre vue skill

¿Es bueno este vue skill para principiantes?

Sí, si ya estás construyendo con Vue 3 y quieres una salida de IA más limpia. No es un currículo para principiantes, pero sí reduce la confusión al favorecer un estilo claro: Composition API con <script setup lang="ts">. Esa consistencia ayuda a los usuarios nuevos a evitar patrones mezclados.

¿vue skill da soporte a patrones antiguos de Vue?

No como primera opción. La fuente dice que siempre se use Composition API por encima de Options API. Si tu codebase tiene mucho legado, aun así puedes usar el skill, pero deberías pedir explícitamente las restricciones de compatibilidad y revisar con cuidado las migraciones.

¿En qué se diferencia de un prompt normal sobre Vue?

Un prompt normal suele producir código Vue inconsistente: APIs mezcladas, tipado más débil o macros desactualizadas. vue skill le da al agente un playbook más acotado, con preferencias, uso moderno de macros y referencias específicas. Eso normalmente se traduce en menos correcciones manuales.

¿Es suficiente instalar vue skill si trabajo con Nuxt o con un stack más grande?

No. vue install ayuda con la guía de componentes y reactividad, pero los aspectos de un stack mayor siguen necesitando conocimiento de Nuxt, routing, estado, data fetching y despliegue. Úsalo como una capa de generación de código Vue, no como una skill de arquitectura de aplicaciones completa.

¿Cuándo no debería usar vue skill?

Sáltatelo cuando tu tarea sea:

• código de UI neutral respecto al framework
• trabajo con React/Angular/Svelte
• implementación solo de backend
• convenciones muy específicas de Nuxt con poco trabajo directo de componentes Vue
• mantenimiento estricto de Options API legacy donde no se permiten patrones modernos

¿Cubre funciones avanzadas de Vue?

Sí, pero de forma selectiva. Las referencias incluidas cubren Transition, Teleport, Suspense, KeepAlive, directivas, APIs de reactividad, lifecycle hooks y macros. Eso basta para muchas tareas frontend reales sin convertirse en una enciclopedia completa de Vue.

Cómo mejorar vue skill

Dale al agente límites de versión y compatibilidad

El skill se basa en guías de la era Vue 3.5. Si tu app usa Vue 3.3, 3.4 o tiene límites más antiguos en el soporte de macros, indícalo desde el principio. Esto es especialmente importante para funciones como defineModel y para cómo se manejan los valores por defecto en props.

Especifica contratos de componente, no solo ideas de UI

La forma más rápida de mejorar la salida de vue es proporcionar:

• nombres y tipos de props
• eventos emitidos
• model bindings
• estados asíncronos
• estados vacíos y de error
• responsabilidades entre padre e hijo

El skill es fuerte en implementación cuando el contrato está claro. Es más débil cuando se le pide inferir una API completa a partir de una descripción vaga de UI.

Pide explícitamente las decisiones de reactividad

Muchos errores en Vue vienen del modelado del estado, no de la sintaxis del template. Pide tradeoffs como:

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

Esto se alinea con el material más fuerte de las referencias y mejora la calidad del código más que pedir “best practices” en abstracto.

Detecta pronto los fallos habituales

Revisa las primeras salidas buscando estos problemas:

• aparece Options API cuando querías Composition API
• uso de <script> plano en lugar de <script setup lang="ts">
• defineProps o defineEmits sin tipado
• reactividad profunda innecesaria
• uso incorrecto de watchers donde computed sería más simple
• built-ins avanzados añadidos sin una necesidad real

Estas son las formas más probables en que una generación genérica se aleja del nivel de calidad que busca el skill.

Itera sobre una sola preocupación cada vez

Después de la primera respuesta, no pidas todo a la vez. Mejora por pasadas:

1. forma de la API
2. tipado y macros
3. corrección de la reactividad
4. estados de renderizado
5. patrones avanzados de UX

Eso facilita verificar cada cambio y mantiene al agente anclado a la vue guide en lugar de regenerar todo el componente de manera impredecible.

Usa los archivos de referencia como rutas de escalado

Cuando el primer resultado esté cerca pero todavía no sea sólido, dirige al agente hacia las propias referencias del skill:

• references/script-setup-macros.md para props, emits, models, slots y sintaxis de macros
• references/core-new-apis.md para reactividad, watchers y composables
• references/advanced-patterns.md para componentes integrados y directivas

Esta es una de las formas más prácticas de mejorar salidas de vue for Frontend Development sin reescribir el prompt desde cero.

Pide una versión mínima y otra de producción

Un patrón de alto rendimiento es:

• primera petición: SFC mínimo y funcional
• segunda petición: pasada de producción con tipado, estados, accesibilidad y decisiones de rendimiento

Esto evita borradores iniciales inflados y deja ver dónde importan realmente las decisiones específicas de Vue.

Mantén vue skill alineado con las reglas de tu codebase

Si tu equipo tiene convenciones distintas de las predeterminadas del skill, indícalas directamente. Por ejemplo:

• solo JavaScript
• sin defineModel
• evitar Suspense
• usar objetos de props explícitos en lugar de declaraciones solo con tipos
• no usar built-ins avanzados salvo que se pidan

vue skill tiene una orientación clara, y eso es útil, pero obtendrás mejores resultados cuando ajustes sus valores por defecto a las restricciones reales de tu repositorio.