Hay un hábito que nuevos desarrolladores han normalizado: ver una herramienta interesante, copiar el comando de instalación y seguir adelante. Con los AI skills, creo que pasa lo mismo.
Un skill para agentes de IA es, en esencia, un conjunto de instrucciones que le dice al LLM cómo debe actuar sobre el bloque de código, archivos o proyecto. Cuando instalas uno y otro sin leerlos, básicamente estamos confiandole a un agente que realice trabajos que nosotros desconocemos.
React Best Practices de Vercel Labs
React Best Practices —publicado por Vercel Engineering en enero de 2026— no es una lista genérica de consejos. Es una guía operativa de más de 40 reglas organizadas en 8 categorías, cada una con ejemplos de código incorrecto vs. correcto y una estimación del impacto esperado.
Las categorías cubren:
- Eliminación de waterfalls (impacto: 2-10x) — el principal killer de rendimiento en apps React
- Optimización de bundle size — imports de barrel files, dynamic imports, carga condicional
- Rendimiento en servidor — React.cache(), after(), fronteras de Suspense
- Data fetching en cliente — SWR, deduplicación de event listeners
- Optimización de re-renders — 12 técnicas con dependencias de efectos reducidas
- Rendering performance — hidratación, useTransition, JSX estático hoistado
- JavaScript performance — Set/Map, índices para búsquedas repetidas, early returns
- Patrones avanzados — inicialización única, refs para event handlers
¿Por qué importa leerlo ?
Cuando un agente tiene este skill activo, puede refactorizar código que parece funcionar bien pero que viola alguna de estas reglas. Si no sabes qué esperar, el diff te va a sorprender.
Conocer el contenido del skill te permite:
- Validar que las reglas son correctas para tu contexto (no todas aplican igual en todos los proyectos)
- Revisar los cambios propuestos con criterio, no solo aprobando el output del agente
- Aprender — cada regla bien documentada es una clase técnica de alto nivel
Lo que el agente sabe sobre tu stack, tú también deberías saberlo.
La regla más importante del skill
Sin duda, la eliminación de waterfalls. El documento lo marca como CRITICAL y con justa y merecida razón: un await secuencial donde podrían ejecutarse promesas en paralelo puede duplicar o triplicar los tiempos de respuesta, sin ningún error visible en consola.
// ❌ Waterfall: la segunda llamada espera a que termine la primera
const user = await getUser(id);
const posts = await getPosts(id);
// ✅ Paralelo: ambas llamadas corren al mismo tiempo
const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);Parece obvio. Pero en codebases grandes, este patrón se filtra en capas de abstracción donde no lo ves a simple vista.
Checklist para cualquier skill que instales
- Lee el archivo
AGENTS.mdcompleto antes de activarlo - Identifica qué categorías de cambios puede hacer sobre tu código
- Verifica que las reglas son compatibles con tu arquitectura actual
No olvides consulta la información completa en React Best Practices