Skills para agentes · Programación
Vercel React Best Practices: reglas de rendimiento para tu agente Un agente que escribe React encadena peticiones, infla el bundle y provoca re-renders innecesarios con facilidad. Esta skill del equipo de ingeniería de Vercel le da 70 reglas en 8 categorías ordenadas por impacto, desde eliminar cascadas y reducir el bundle hasta microoptimizaciones de JavaScript, y el agente las aplica al escribir y revisar código.
32.930 estrellas en GitHub · #32
Obtener skill Abrir en GitHub
Autor Vercel
Licencia no indicada
Paquete Una skill
Actualizada 14 de octubre de 2026 Qué hace Elimina cascadas de peticiones con Promise.all() para operaciones independientes, await solo donde se usa y streaming con Suspense Reduce el bundle: imports directos en lugar de archivos barrel, next/dynamic para componentes pesados y analítica tras la hidratación Acelera el servidor con React.cache() para deduplicar por petición, caché LRU entre peticiones y after() para tareas no bloqueantes Evita re-renders derivando el estado durante el render, con setState funcional y startTransition para actualizaciones no urgentes Cada regla tiene su archivo en rules/ con la explicación, un ejemplo de código incorrecto y otro correcto Cuándo usarla Escribes componentes React o páginas Next.js nuevas y quieres esquivar los fallos de rendimiento habituales Una página carga lento y necesitas ver dónde las peticiones van en cadena en lugar de en paralelo Antes de publicar quieres una revisión centrada en el tamaño del bundle y el tiempo de carga Pídale al agente Revisa este componente React según las reglas de rendimiento de Vercel Busca cascadas de peticiones en app/dashboard/page.js y hazlas en paralelo ¿Por qué esta lista se vuelve a renderizar con cada tecla? Corrígelo con las reglas rerender Antes de instalar Las reglas están pensadas para React y Next.js, y al refactorizar el agente modifica tu código para cumplirlas. README y SKILL.md indican licencia MIT, aunque GitHub no detecta un archivo de licencia en el repositorio.
Preguntas ¿Cómo se instala React Best Practices de Vercel? Ejecuta npx skills add vercel-labs/agent-skills@vercel-react-best-practices. Sin la parte de @ se instala toda la colección de Vercel.
¿Cuántas reglas incluye? Según SKILL.md, 70 reglas en 8 categorías con prioridad de crítica a baja. El README de la colección todavía habla de 40+.
¿Sirve solo para Next.js? No. Algunas reglas tratan componentes de servidor y next/dynamic, pero las secciones de re-renders y JavaScript valen para cualquier código React.
