vercel-react-best-practices
Optimizar el Rendimiento de React y Next.js
También disponible en: sickn33,ZhanlinCui,vercel-labs
Esta habilidad proporciona 45 reglas de optimización de rendimiento para aplicaciones React y Next.js, ayudando a los desarrolladores a eliminar cascadas de dependencias, reducir tamaños de bundles y mejorar el rendimiento de renderizado a través de guía automatizada.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "vercel-react-best-practices". Review this component for performance: function Counter() { const [count, setCount] = useState(0); return <div onClick={() => setCount(count + 1)}>{count}</div>; }
Resultado esperado:
Issues found: 1) Inline function in onClick creates new function on every render - use useCallback. 2) No memoization - wrap component with React.memo if parent re-renders frequently. Rule: rerender-functional-setstate, rerender-memo
Usando "vercel-react-best-practices". Optimize this data fetching: const user = await getUser(id); const posts = await getPosts(user.id); const comments = await getComments(user.id);
Resultado esperado:
Waterfall detected - posts and comments both depend on user but fetch sequentially. Fix: Use Promise.all([getPosts(user.id), getComments(user.id)]). Rule: async-parallel
Auditoría de seguridad
SeguroAll 911 static findings are false positives. This is a documentation skill containing React/Next.js best practices with code examples. The flagged patterns (backticks, storage access, dynamic imports) are legitimate documentation content, not security risks.
Puntuación de calidad
Lo que puedes crear
Generar Componentes React Optimizados
Al escribir nuevos componentes React, la habilidad te guía para usar memo, dependencias adecuadas y evitar errores comunes como funciones inline en JSX.
Refactorizar Páginas Lentas de Next.js
Al optimizar páginas existentes de Next.js, la habilidad ayuda a identificar cascadas, paralelizar la obtención de datos e implementar estrategias de caché adecuadas.
Revisión de Código para Rendimiento
Al revisar pull requests, la habilidad proporciona una lista de verificación de 45 reglas para asegurar que el código cumple los estándares de rendimiento antes de fusionar.
Prueba estos prompts
Review this React component for performance issues and suggest improvements based on the vercel-react-best-practices skill rules.
Optimize this Next.js page for faster load times. Identify any async waterfalls and suggest parallel data fetching patterns.
Analyze this codebase for bundle size issues. Identify large dependencies that should be dynamically imported and suggest code splitting strategies.
Perform a complete performance audit of this Next.js application using all 45 rules from vercel-react-best-practices. Prioritize by impact category.
Mejores prácticas
- Siempre usa Promise.all para operaciones asíncronas independientes para eliminar cascadas
- Usa React.memo y useCallback solo cuando es necesario - la optimización prematura añade complejidad
- Implementa caché del lado del servidor con React.cache() para llamadas de funciones repetidas
Evitar
- Evita funciones inline en props de JSX - crean nuevas referencias en cada renderizado
- No obtengas datos dentro de componentes cuando puede hacerse en tiempo de construcción o del lado del servidor
- Evita suscribirse a objetos costosos en dependencias de useEffect
Preguntas frecuentes
¿Qué hace diferente esta habilidad de los tutoriales generales de React?
¿Necesito implementar las 45 reglas?
¿Puede esta habilidad corregir automáticamente problemas de rendimiento?
¿Esto funciona con Create React App o solo con Next.js?
¿Cómo sé qué regla aplicar primero?
¿Puedo usar esto para automatización de revisión de código?
Detalles del desarrollador
Estructura de archivos