vue-jsx-best-practices

Descripción general de la skill vue-jsx-best-practices

La skill vue-jsx-best-practices te ayuda a evitar el error más común al escribir JSX en Vue: asumir que las convenciones de JSX de React se aplican igual. No es así. En Vue JSX, por lo general se usan nombres de atributos HTML estándar como class y for, no las formas de React como className y htmlFor.

Para quién es esta skill

Esta skill encaja especialmente bien para desarrolladores frontend que:

• escriben componentes de Vue 3 con JSX o TSX
• migran componentes de React a Vue
• se encuentran con errores de TypeScript relacionados con props y atributos JSX
• quieren que las render functions de Vue sigan las mismas convenciones que las templates de Vue

Si tu trabajo consiste en “hacer que este código Vue JSX sea seguro en TypeScript e idiomático sin ir probando a ciegas”, vue-jsx-best-practices es una muy buena opción.

Qué tarea resuelve realmente

La tarea real no es “aprender JSX”. Es convertir JSX confuso, mezclado o con forma de React en JSX compatible con Vue que:

• pase las comprobaciones de TypeScript
• siga las convenciones de Vue
• evite errores sutiles de migración
• siga siendo legible para equipos que usan tanto templates como render functions

Qué hace diferente a vue-jsx-best-practices

La skill es estrecha en alcance, y eso le da valor. En lugar de intentar cubrir todo lo relacionado con el renderizado en Vue, se centra en un punto de fricción muy concreto: en Vue JSX se usan nombres de atributos HTML, no las convenciones de nombre de React. Eso la hace útil cuando estás depurando atributos incorrectos, revisando código migrado o estandarizando el uso de TSX en una base de código.

Qué conviene saber antes de instalarla

Esta no es una guía amplia de arquitectura Vue. La evidencia del repositorio muestra una skill compacta centrada en un único documento de referencia: reference/render-function-jsx-vue-vs-react.md. Instala vue-jsx-best-practices si quieres guía específica sobre las diferencias de sintaxis en Vue JSX y patrones de migración más seguros, no un manual completo de JSX.

Cómo usar la skill vue-jsx-best-practices

Contexto de instalación para vue-jsx-best-practices

Usa la skill cuando tu agente o tu flujo de trabajo estén generando, revisando o migrando Vue JSX/TSX. Un comando de instalación práctico es:

npx skills add vuejs-ai/skills --skill vue-jsx-best-practices

Después, actívala cuando tu tarea incluya frases como:

• “convert this React component to Vue TSX”
• “fix JSX attribute type errors in Vue”
• “review this Vue render function for React-style conventions”
• “make this Vue JSX idiomatic”

Lee primero estos archivos del repositorio

Esta skill es pequeña, así que el orden de lectura importa si quieres ir rápido:

1. skills/vue-jsx-best-practices/SKILL.md
2. skills/vue-jsx-best-practices/reference/render-function-jsx-vue-vs-react.md

Ese segundo archivo concentra la mayor parte del valor práctico. Explica la regla clave, por qué TypeScript detecta el problema y qué debes cambiar durante una migración.

Qué información necesita la skill

vue-jsx-best-practices funciona mejor cuando le das código real y contexto, no solo “ayúdame con Vue JSX”. Incluye:

• el código fuente del componente
• si es Vue 3
• si estás usando JSX o TSX
• los errores actuales de TypeScript, si los hay
• si el código viene de React
• tu herramienta de build, como Vite

Entrada mínima útil:

• “This is a Vue 3 TSX component migrated from React. Fix invalid JSX attributes and explain each change.”

Entrada mejor:

• “Review this Vue 3 TSX file migrated from React. Replace React-only JSX conventions with Vue equivalents, preserve behavior, and note anything that will still require plugin or TypeScript config checks in Vite.”

La regla clave que la skill ayuda a aplicar

La conclusión práctica principal es simple:

• usa class, no className
• usa for, no htmlFor
• usa nombres de atributos con estilo HTML, alineados con las templates de Vue
• usa nombres estándar para event handlers con el prefijo on, como onClick

Esto importa porque el runtime de Vue puede ser permisivo, pero TypeScript debería marcar las formas propias de React. Y eso es útil: detecta inconsistencias antes de que se propaguen.

Convierte un objetivo impreciso en un prompt sólido

Prompt débil:

• “Fix this JSX.”

Prompt sólido:

• “Apply vue-jsx-best-practices to this Vue 3 TSX component. Identify any React JSX conventions such as className or htmlFor, replace them with Vue JSX equivalents, keep event handlers intact, and explain which changes are for type safety versus runtime behavior.”

Por qué este prompt es mejor:

• identifica el origen del problema en la migración
• pide sustituciones concretas
• separa los problemas de compilación de la tolerancia del runtime
• reduce las respuestas genéricas sobre Vue

Flujo de trabajo recomendado para tareas de migración

Un buen flujo de vue-jsx-best-practices usage es:

1. Pega el componente original de React o el JSX mezclado.
2. Pide una primera conversión a las convenciones de Vue JSX.
3. Pide una segunda pasada centrada solo en compatibilidad con TypeScript.
4. Compara props, labels y event bindings línea por línea.
5. Ejecuta tu verificador de tipos en local y devuelve a la skill cualquier error que siga apareciendo.

Este enfoque por etapas funciona mejor que pedir una “migración completa” de una sola vez, porque esta skill destaca al limpiar convenciones de JSX, no al reescribir frameworks enteros.

Qué revisar en el código convertido

Después de usar vue-jsx-best-practices, revisa:

• labels que usen for
• bindings de clases CSS con class
• nombres de props del DOM copiados desde React
• la forma en que se escriben los event handlers
• si el resultado sigue asumiendo patrones de componentes propios de React

La skill puede mejorar la sintaxis y las convenciones, pero aun así necesitas validar la lógica específica del framework, como hooks, estado y APIs de componentes.

Consideraciones sobre TypeScript y Vite

El material fuente menciona explícitamente la configuración de TypeScript para la inferencia de tipos en Vue JSX y la configuración de Vite como temas relevantes. En la práctica, eso significa que no deberías tratar los errores de atributos como si fueran solo una cuestión de estilo. Si tu configuración de TSX está bien, los atributos inválidos con estilo React deberían aparecer en la comprobación de tipos. Si no aparecen, verifica tu plugin de Vue JSX y la configuración de TypeScript antes de dar por bueno un resultado que “funciona” en runtime.

Cuándo encaja bien y cuándo no

Encaje ideal:

• migración de React a Vue TSX
• revisión de código para convenciones de Vue JSX
• corrección de errores de atributos JSX en Vue 3
• estandarización del estilo del equipo en render functions

Mal encaje:

• aprender Vue desde cero
• ayuda con sintaxis de templates
• diseño con Composition API
• resolución completa de problemas de build más allá de la configuración relacionada con JSX

Ejemplo de petición que produce mejores resultados

Usa algo como esto:

“Use vue-jsx-best-practices on this Vue 3 TSX component. Flag every React-style JSX attribute, replace it with Vue JSX syntax, keep the component behavior unchanged, and give me a short checklist I can apply to the rest of the codebase.”

Ese prompt te da tanto la corrección como un patrón de revisión reutilizable.

Preguntas frecuentes sobre la skill vue-jsx-best-practices

¿vue-jsx-best-practices sirve solo para migraciones desde React?

No. La migración desde React es el caso de uso más claro, pero la skill también ayuda si tu equipo escribe Vue TSX directamente y quiere convenciones coherentes y seguras para TypeScript. Es útil siempre que se cuelen nombres de atributos estilo React en Vue JSX.

¿vue-jsx-best-practices instala un plugin o cambia mi configuración?

No. La skill aporta guía; no es un paquete que parchee automáticamente tu toolchain. Sigues necesitando tu propia configuración de Vue JSX y TypeScript dentro de la aplicación. La skill te ayuda a identificar cómo debería verse el código una vez que esa configuración ya está en su sitio.

¿Cuál es la principal diferencia frente a un prompt normal?

Un prompt normal puede generar JSX verosímil sin respetar las convenciones de atributos específicas de Vue. vue-jsx-best-practices es más fiable para este problema concreto porque pone en el centro el desajuste entre JSX de Vue y JSX de React, junto con sus implicaciones para la seguridad de tipos.

¿Es una skill apta para principiantes?

Sí, siempre que ya conozcas lo básico de Vue o JSX. Su alcance es lo bastante acotado como para resultar abordable. Pero si eres completamente nuevo en el renderizado de Vue, esta skill no sustituye una introducción más amplia a componentes, templates o render functions.

¿Cuándo no debería usar vue-jsx-best-practices?

Sáltatela si tu base de código usa solo templates de Vue y no trabaja con JSX/TSX. También conviene omitirla si tu problema no tiene relación con el nombre de los atributos JSX, por ejemplo si estás lidiando con routing, gestión de estado o renderizado del lado del servidor.

¿El comportamiento en runtime siempre se rompe si uso atributos con estilo React?

No siempre. La referencia indica que el runtime de Vue puede ser permisivo y convertir correctamente algunos atributos. El problema de fondo es mayor: consistencia y seguridad de tipos. TypeScript debería rechazar esas convenciones de React dentro de Vue JSX, que es exactamente lo que normalmente te interesa.

Cómo mejorar la skill vue-jsx-best-practices

Da código, errores e intención de framework al mismo tiempo

La forma más rápida de mejorar los resultados de vue-jsx-best-practices es aportar:

• el componente de origen
• la forma objetivo que debe tener en el framework de destino
• errores reales del compilador o del editor
• si el objetivo es migración, limpieza o revisión

Sin ese contexto, la salida puede quedarse en cambios evidentes de atributos y pasar por alto supuestos JSX que también vienen arrastrados.

Pide una revisión orientada a diff

Un prompt de alto valor es:

“Review this file using vue-jsx-best-practices. Do not rewrite everything. Only flag JSX conventions that are invalid, risky, or non-idiomatic in Vue, and explain each change briefly.”

Esto reduce la sobreedición y facilita la revisión en bases de código ya existentes.

Separa los arreglos de sintaxis de las reescrituras de framework

Un modo de fallo habitual es pedirle a la skill que resuelva a la vez las diferencias de sintaxis JSX y toda la migración de comportamiento de React a Vue. Para mejorar la calidad del resultado, separa esas tareas:

1. normalizar las convenciones JSX
2. corregir los errores de tipos
3. refactorizar la lógica del framework

Así mantienes vue-jsx-best-practices enfocada en lo que realmente cubre bien.

Pide una checklist reutilizable

El repositorio ya sugiere una forma de trabajar basada en checklist. Aprovecha eso y pídele a la skill una lista de auditoría lista para equipo, por ejemplo:

• reemplazar className por class
• reemplazar htmlFor por for
• verificar los event handlers on*
• volver a ejecutar las comprobaciones de TS sobre los archivos convertidos

Eso convierte una ayuda puntual en un proceso de revisión repetible.

Valida las suposiciones de configuración después de la primera pasada

Si la salida parece correcta pero tu editor no marca los atributos erróneos, haz una pregunta de seguimiento sobre las suposiciones del entorno TSX. La skill menciona la inferencia de TypeScript y la configuración de Vite como contexto relevante, así que una validación débil en tu entorno local puede ocultar errores reales.

Fallos habituales a los que conviene prestar atención

Vigila estos problemas después de usar vue-jsx-best-practices:

• nombres de atributos de React que siguen presentes en elementos anidados
• resultados que “funcionan” en runtime pero fallan en las comprobaciones de TS
• recomendaciones de migración que cambian el comportamiento, no solo la sintaxis
• limpieza incompleta de labels, clases y props del DOM

Todos estos casos son buenos candidatos para una segunda pasada de revisión.

Mejora el prompt después de la primera respuesta

Un buen prompt de iteración es:

“Now do a second pass with vue-jsx-best-practices focused only on missed React-style JSX conventions and any Vue JSX typing issues. Keep logic unchanged.”

Ese seguimiento suele ser más eficaz que pedir una reescritura completamente nueva.

Usa el archivo de referencia como ancla para decidir

Si no tienes claro si debes confiar en la salida, compárala con:

reference/render-function-jsx-vue-vs-react.md

Ese archivo es la referencia más clara sobre el comportamiento esperado de esta skill. También es una buena señal a la hora de decidir si instalarla: la skill es compacta, pero su guía es lo bastante específica como para reducir errores evitables en Vue JSX.