Compétences react-best-practices
📦

react-best-practices

Sûr

Optimize React and Next.js Performance with Vercel Best Practices

Également disponible depuis: vercel-labs,0xBigBoss,0xBigBoss

Poor React performance leads to slow load times and frustrated users. This skill provides 45 prioritized rules from Vercel Engineering to eliminate waterfalls, reduce bundle sizes, and optimize rendering.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "react-best-practices". Review this data fetching pattern for waterfalls

Résultat attendu:

  • ISSUE: Sequential await calls create waterfall (3 round trips)
  • const user = await fetchUser()
  • const posts = await fetchPosts()
  • const comments = await fetchComments()
  •  
  • FIX: Use Promise.all() for parallel execution (1 round trip)
  • const [user, posts, comments] = await Promise.all([
  • fetchUser(),
  • fetchPosts(),
  • fetchComments()
  • ])

Utilisation de "react-best-practices". How do I lazy load a heavy code editor component

Résultat attendu:

  • Use next/dynamic for lazy loading heavy components:
  •  
  • import dynamic from 'next/dynamic'
  •  
  • const MonacoEditor = dynamic(
  • () => import('./monaco-editor').then(m => m.MonacoEditor),
  • { ssr: false, loading: () => <LoadingSkeleton /> }
  • )
  •  
  • This defers ~300KB bundle until component renders, improving TTI.

Audit de sécurité

Sûr
v1 • 2/24/2026

Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.

51
Fichiers analysés
4,906
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Frontend Developer Building React Applications

Use this skill when writing new components or pages to ensure optimal performance from the start. The skill guides bundle optimization, proper data fetching patterns, and re-render prevention techniques.

Tech Lead Reviewing Pull Requests

Reference these rules during code review to catch performance anti-patterns like sequential async calls, unnecessary barrel imports, or missing Suspense boundaries before merging.

AI Assistant Refactoring Legacy Code

Apply these prioritized rules to systematically improve existing React codebases, starting with critical waterfall elimination before addressing medium-impact rendering optimizations.

Essayez ces prompts

Review Component for Performance Issues 
Review this React component using Vercel best practices. Identify waterfalls, unnecessary re-renders, and bundle optimization opportunities. Suggest specific fixes with code examples.
Refactor Sequential Fetching to Parallel 
Refactor this code to eliminate async waterfalls. Use Promise.all() for independent operations and move awaits into branches where results are actually needed.
Optimize Bundle Size for Heavy Components 
Apply code splitting strategies to this component. Identify opportunities for next/dynamic imports, conditional loading, and preloading on user interactions.
Fix Re-render Performance Issues 
Analyze this component for unnecessary re-renders. Apply memoization, proper dependency arrays, derived state subscriptions, and functional setState patterns as appropriate.

Bonnes pratiques

  • Start with critical waterfall elimination before medium-impact optimizations
  • Use React.cache() for per-request deduplication and LRU cache for cross-request caching
  • Extract stable callbacks using functional setState and store handlers in refs when needed

Éviter

  • Sequential await calls for independent operations
  • Importing entire utility libraries instead of specific functions
  • Passing functions directly as effect dependencies instead of primitives

Foire aux questions

What React versions are supported?
Most patterns work with React 17+. Advanced patterns like startTransition, useTransition, and Suspense for data fetching require React 18+.
Can I use this with JavaScript instead of TypeScript?
Yes, all patterns apply to JavaScript projects. Examples use TypeScript syntax for clarity but the concepts transfer directly.
Should I apply all 45 rules at once?
No. Start with CRITICAL priority rules (async waterfalls, bundle optimization) for maximum impact, then address HIGH and MEDIUM priorities progressively.
Does this skill work with Next.js App Router?
Yes. Server component patterns like React.cache(), use cache(), and server parallel fetching are specifically designed for App Router architecture.
How do I measure performance improvements?
Use Web Vitals (LCP, FID, CLS) and React DevTools Profiler. The skill provides impact estimates like '2-10x improvement' for each pattern.
Can Claude Code automatically apply these fixes?
Yes. Provide the skill context and ask Claude Code to review or refactor specific files. It will apply appropriate rules with code examples.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-best-practices

Réf

main

Structure de fichiers

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md