vercel-react-best-practices: Las 70 reglas de rendimiento que el equipo de Vercel aplica a React y Next.js, dentro de tu agente.

Las 70 reglas de rendimiento que el equipo de Vercel aplica a React y Next.js, dentro de tu agente.

Tu agente escribe React que funciona pero no necesariamente React rápido. Este skill le mete las reglas de rendimiento de Vercel —las mismas que ellos aplican a Next.js— ordenadas por impacto, para que el refactor salga bien desde la primera vez.

Skill

vercel-react-best-practices

Estrellas del repo

31k★

Lenguaje

JavaScript

Revisado

16 sep 2026

Instalar

npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

CompartirX LinkedIn

De un vistazo, qué te llevas si lo instalas.

70 reglas, 8 categorías

Priorizadas por impacto, no alfabéticamente. El agente ataca primero lo que más pesa.

Mantenido por Vercel

Lo escribe el equipo que construye Next.js, no un tercero interpretando la documentación.

Aplica al escribir y al revisar

Sirve igual para código nuevo que para auditar lo que ya está en producción.

Medible

Lighthouse antes y después. Es de los pocos skills donde el resultado no es cuestión de opinión.

El problema que resuelve.

Un agente de código sabe React. Lo que no sabe es cuál de las cinco formas correctas de traer datos es la que no te va a costar 300ms de LCP. Esa diferencia no está en la documentación de React: está en la experiencia de quien opera Next.js a escala.

El skill empaqueta 70 reglas en 8 categorías, priorizadas por impacto. No es una guía de estilo — es una tabla de decisiones que el agente consulta cuando escribe un componente, monta un data fetch o revisa un bundle. Lo mantiene Vercel, que es quien construye el framework.

Es de los pocos skills donde la ganancia se mide sola: corres Lighthouse antes y después del refactor.

Y cuándo no lo recomiendo.

Lo instalé porque este sitio es Next.js y la fábrica de software entrega Next.js. Es el skill con mejor relación valor/esfuerzo de toda la lista: cero configuración, aplica a todo lo que ya escribimos.

Si tu stack no es React, no te sirve de nada. Y si tu app es un prototipo de tres pantallas, el rendimiento todavía no es tu cuello de botella — instálalo cuando empiece a serlo.

Por qué este es el primero que instalé

De los diez skills de esta página, este es el único donde el criterio de "vale la pena" no admite discusión: el sitio corre en Next.js, la fábrica entrega Next.js, y las reglas las mantiene quien hace el framework.

Los otros nueve resuelven problemas de proceso. Este resuelve un problema de producto que se mide en milisegundos.

Cómo se usa

No se invoca. Se activa solo cuando el agente toca un componente de React, un data fetch o el bundle. Es una capa de contexto, no un comando.

Si quieres forzarlo sobre código que ya existe, pídelo explícito: "revisa este componente contra las reglas de rendimiento de Vercel".