Fähigkeiten react-best-practices
📦

react-best-practices

Sicher

Optimierung der React- und Next.js-Performance mit Vercel Best Practices

Auch verfügbar von: 0xBigBoss,0xBigBoss,vercel-labs

Schlechte React-Performance führt zu langsamen Ladezeiten und frustrierten Benutzern. Diese Skill bietet 45 priorisierte Regeln vom Vercel Engineering, um Waterfalls zu eliminieren, Bundle-Größen zu reduzieren und Rendering zu optimieren.

Unterstützt: Claude Codex Code(CC)
📊 69 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "react-best-practices". Dieses Data-Fetching-Pattern auf Waterfalls prüfen

Erwartetes Ergebnis:

  • ISSUE: Sequentielle await-Aufrufe erzeugen Waterfall (3 Round Trips)
  • const user = await fetchUser()
  • const posts = await fetchPosts()
  • const comments = await fetchComments()
  •  
  • FIX: Promise.all() für parallele Ausführung verwenden (1 Round Trip)
  • const [user, posts, comments] = await Promise.all([
  • fetchUser(),
  • fetchPosts(),
  • fetchComments()
  • ])

Verwendung von "react-best-practices". Wie lade ich eine umfangreiche Code-Editor-Komponente lazy

Erwartetes Ergebnis:

  • Verwenden Sie next/dynamic für Lazy Loading umfangreicher Komponenten:
  •  
  • import dynamic from 'next/dynamic'
  •  
  • const MonacoEditor = dynamic(
  • () => import('./monaco-editor').then(m => m.MonacoEditor),
  • { ssr: false, loading: () => <LoadingSkeleton /> }
  • )
  •  
  • Dies verzögert ~300KB Bundle bis zum Rendern der Komponente und verbessert TTI.

Sicherheitsaudit

Sicher
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
Gescannte Dateien
4,906
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
85
Inhalt
23
Community
100
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Frontend-Entwickler für React-Anwendungen

Verwenden Sie diese Skill beim Schreiben neuer Komponenten oder Seiten, um von Anfang an optimale Performance sicherzustellen. Die Skill leitet Bundle-Optimierung, korrekte Data-Fetching-Patterns und Techniken zur Vermeidung von Re-Renderings.

Tech Lead bei Pull-Request-Reviews

Ziehen Sie diese Regeln während Code-Reviews heran, um Performance-Anti-Patterns wie sequentielle async-Aufrufe, unnötige Barrel-Imports oder fehlende Suspense-Boundaries vor dem Merge zu erkennen.

KI-Assistent für Refaktorierung von Legacy-Code

Wenden Sie diese priorisierten Regeln an, um bestehende React-Codebasen systematisch zu verbessern, beginnend mit kritischer Waterfall-Eliminierung, bevor mittelgroße Rendering-Optimierungen angegangen werden.

Probiere diese Prompts

Komponente auf Performance-Probleme prüfen 
Überprüfen Sie diese React-Komponente anhand der Vercel Best Practices. Identifizieren Sie Waterfalls, unnötige Re-Renderings und Bundle-Optimierungsmöglichkeiten. Schlagen Sie konkrete Fixes mit Code-Beispielen vor.
Sequentielles Fetching zu Parallel refaktorieren 
Refaktorieren Sie diesen Code, um async waterfalls zu eliminieren. Verwenden Sie Promise.all() für unabhängige Operationen und verschieben Sie awaits in Branches, wo Ergebnisse tatsächlich benötigt werden.
Bundle-Größe für umfangreiche Komponenten optimieren 
Wenden Sie Code-Splitting-Strategien auf diese Komponente an. Identifizieren Sie Möglichkeiten für next/dynamic imports, bedingtes Laden und Preloading bei Benutzerinteraktionen.
Re-Render-Performance-Probleme beheben 
Analysieren Sie diese Komponente auf unnötige Re-Renderings. Wenden Sie Memoization, korrekte dependency arrays, abgeleitete State-Subscriptions und funktionale setState-Patterns nach Bedarf an.

Bewährte Verfahren

  • Beginnen Sie mit kritischer Waterfall-Eliminierung vor mittelgroßen Optimierungen
  • Verwenden Sie React.cache() für per-request Deduplizierung und LRU-Cache für cross-request Caching
  • Extrahieren Sie stabile Callbacks mit funktionalem setState und speichern Sie Handler in refs bei Bedarf

Vermeiden

  • Sequentielle await-Aufrufe für unabhängige Operationen
  • Importieren gesamter Utility-Bibliotheken statt spezifischer Funktionen
  • Direktes Übergeben von Funktionen als effect dependencies statt Primitives

Häufig gestellte Fragen

Welche React-Versionen werden unterstützt?
Die meisten Patterns funktionieren mit React 17+. Erweiterte Patterns wie startTransition, useTransition und Suspense für Data Fetching benötigen React 18+.
Kann ich dies auch mit JavaScript statt TypeScript verwenden?
Ja, alle Patterns gelten für JavaScript-Projekte. Beispiele verwenden TypeScript-Syntax zur Klarheit, aber die Konzepte übertragen sich direkt.
Sollte ich alle 45 Regeln auf einmal anwenden?
Nein. Beginnen Sie mit CRITICAL-Prioritätsregeln (async waterfalls, Bundle-Optimierung) für maximale Wirkung, und adressieren Sie dann HIGH- und MEDIUM-Prioritäten schrittweise.
Funktioniert diese Skill mit Next.js App Router?
Ja. Server-Component-Patterns wie React.cache(), use cache() und server parallel fetching sind speziell für die App Router-Architektur konzipiert.
Wie messe ich Performance-Verbesserungen?
Verwenden Sie Web Vitals (LCP, FID, CLS) und React DevTools Profiler. Die Skill bietet Impact-Abschätzungen wie '2-10x Verbesserung' für jedes Pattern.
Kann Claude Code diese Fixes automatisch anwenden?
Ja. Stellen Sie die Skill bereit und bitten Sie Claude Code, spezifische Dateien zu prüfen oder zu refaktorieren. Es wird entsprechende Regeln mit Code-Beispielen anwenden.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

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

Ref

main

Dateistruktur

📁 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