Cómo mejoré mi blog con Vercel Agent Skills y buenas prácticas de React

A principios de este año, Vercel lanzó un Agent Skill dedicado que contiene su guía interna de buenas prácticas para React.

Pensé: ¿Quién mejor que Vercel para enseñarle a los asistentes de IA cómo escribir código React de primer nivel? Ellos crearon Next.js e impulsaron el ecosistema de React Server Components. Tenía curiosidad por ver cómo su experiencia colectiva de ingeniería podía auditar y mejorar mi blog.

Así que ejecuté un solo comando, y los resultados cambiaron por completo la forma en que reviso y optimizo código React con IA.

En este artículo, te voy a mostrar cómo funcionan los Agent Skills, los antipatrones de rendimiento más críticos que el agente detectó en mi código con ejemplos de antes y después, y cómo puedes ejecutar esta misma auditoría en tus propios proyectos en menos de dos minutos.

El problema: código que "funciona" vs. código "optimizado"

Mi blog ya utilizaba Next.js 16 y React 19. El build pasaba sin problemas, ESLint reportaba 0 errores y las páginas cargaban rápido. Pero como desarrolladores, sabemos que pasar las pruebas no garantiza el mejor rendimiento posible.

Tenía varias dudas rondando en mi cabeza:

• ¿Estaba creando cascadas de peticiones (waterfalls) por accidente en los Server Components?
• ¿Había hooks de estado en el cliente provocando re-renders innecesarios en cascada?
• ¿Podría reducir el tamaño del bundle en las rutas dinámicas?
• ¿Cumplían los elementos interactivos con los estándares estrictos de accesibilidad WCAG?

Estos no son errores de sintaxis que rompen el build. Son cuellos de botella silenciosos de rendimiento que se acumulan con el tiempo y perjudican los Core Web Vitals.

Veamos ahora cómo los Agent Skills resuelven este problema.

¿Qué son los Agent Skills y por qué son importantes?

Los modelos de IA genéricos suelen alucinar patrones obsoletos de React, como hacer fetch de datos innecesarios dentro de useEffect o envolver todo con useCallback manualmente.

Los Agent Skills cierran esta brecha. Son conjuntos de instrucciones estructuradas y seleccionadas que enseñan a los asistentes de IA (como Cursor, Claude Code y Antigravity) pautas de ingeniería exactas:

Al agregar el repositorio vercel-labs/agent-skills, la IA obtiene acceso inmediato a más de 40 reglas probadas en batalla, ordenadas estrictamente por su nivel de impacto.

Veamos lo sencillo que resulta configurarlo.

Cómo instalar el skill en 30 segundos

Instalar el skill de buenas prácticas de React de Vercel solo requiere un comando:

npx add-skill vercel-labs/agent-skills

Una vez instalado, tu agente de IA consultará automáticamente los archivos del skill dentro de tu editor.

Ahora veamos los antipatrones reales que el agente encontró en mi código.

3 antipatrones críticos de React que el agente detectó

1. Eliminar cascadas de peticiones asíncronas (Impacto: CRÍTICO)

El agente señaló de inmediato una cascada de llamadas await secuenciales en una de mis funciones de carga de datos en el servidor:

❌ Antes (Cascada secuencial: ~650ms)

// ¡Cada petición espera a que la anterior termine!
export async function getDashboardData(userId: string) {
  const profile = await fetchUserProfile(userId);      // 200ms
  const posts = await fetchUserPosts(userId);          // 300ms
  const analytics = await fetchUserAnalytics(userId);  // 150ms
 
  return { profile, posts, analytics };
}

✅ Después (Ejecución en paralelo: ~300ms)

// ¡Todas las peticiones se ejecutan de forma concurrente!
export async function getDashboardData(userId: string) {
  const [profile, posts, analytics] = await Promise.all([
    fetchUserProfile(userId),
    fetchUserPosts(userId),
    fetchUserAnalytics(userId),
  ]);
 
  return { profile, posts, analytics };
}

Al resolver las peticiones en paralelo con Promise.all, la latencia total se redujo de 650ms a solo 300ms (el tiempo que tarda la petición individual más lenta).

2. Reemplazar useEffect innecesarios por estado derivado (Impacto: ALTO)

En un componente de filtro de búsqueda, yo había escrito un useEffect para sincronizar los elementos filtrados dentro del estado local:

❌ Antes (Ciclo de re-render redundante)

function PostFilter({ posts }: { posts: Post[] }) {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState<Post[]>([]);
 
  useEffect(() => {
    // ⚠️ Redundante: ¡Provoca un re-render extra con cada tecla pulsada!
    setFiltered(posts.filter(p => p.title.toLowerCase().includes(query.toLowerCase())));
  }, [query, posts]);
 
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <PostList items={filtered} />
    </div>
  );
}

✅ Después (Estado derivado al instante en una sola pasada)

function PostFilter({ posts }: { posts: Post[] }) {
  const [query, setQuery] = useState('');
 
  // ✅ Limpio: Se calcula al vuelo durante el render sin pasadas extra.
  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return q ? posts.filter(p => p.title.toLowerCase().includes(q)) : posts;
  }, [query, posts]);
 
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <PostList items={filtered} />
    </div>
  );
}

3. Carga diferida dinámica para modales interactivos pesados (Impacto: ALTO)

Mi modal de búsqueda importaba las utilidades del índice de búsqueda directamente en el layout raíz, lo que aumentaba el tamaño inicial del bundle.

El agente me sugirió usar importaciones dinámicas en el cliente:

// Carga dinámicamente el modal de búsqueda solo cuando el usuario lo solicita
import dynamic from 'next/dynamic';
 
const SearchModal = dynamic(
  () => import('@/components/search-modal').then((mod) => mod.SearchModal),
  { ssr: false }
);

Este cambio redujo 42 KB de JavaScript en la carga inicial de la página para los usuarios que visitan el sitio por primera vez.

Cómo auditar tu propio proyecto

Para ejecutar una auditoría automatizada en tu proyecto:

1. Instala el skill:

   npx add-skill vercel-labs/agent-skills

2. Pídele la auditoría a tu asistente de IA:

   "Perform a full codebase audit using the Vercel React Best Practices skill. List all CRITICAL and HIGH priority performance violations with code diffs."

3. Revisa y valida: Ejecuta siempre tu suite de pruebas y el build de producción después de aplicar los cambios:

   npm run lint
   npm run build

Conclusión y próximos pasos

Los agent skills transforman a los asistentes de desarrollo con IA: pasan de ser simples motores de autocompletado a actuar como ingenieros senior especializados que siguen estándares estrictos de alto rendimiento.

Al aplicar las pautas de React de Vercel:

• Eliminamos las cascadas de peticiones en el servidor.
• Quitamos ciclos de re-render innecesarios provocados por la sincronización de estado.
• Redujimos el peso inicial del bundle en el cliente.

Si estás construyendo aplicaciones web full-stack modernas, te recomiendo revisar estas otras guías en mi blog:

• ¿Qué es la observabilidad de agentes? Por qué y cuándo importa
• Cómo crear enlaces de instalación de MCP en un clic para Cursor y VS Code
• Inyección de prompts en aplicaciones agénticas: 4 capas de defensa
• Next.js en Google Cloud Run: caché y gestión de secretos en producción