Fähigkeiten vercel-react-best-practices
📦

vercel-react-best-practices

Sicher

Optimieren Sie React- und Next.js-Performance mit Vercel-Richtlinien

Auch verfügbar von: vercel-labs

Das Erstellen performanter React-Anwendungen erfordert das Verständnis komplexer Optimierungsmuster. Diese Fähigkeit bietet 45 priorisierte Regeln vom Vercel Engineering, um KI beim Schreiben, Überprüfen und Refaktorieren von React- und Next.js-Code für optimale Performance zu unterstützen.

Unterstützt: Claude Codex Code(CC)
🥉 73 Bronze
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 "vercel-react-best-practices". Überprüfen Sie diese Komponente, die Benutzerdaten und Posts sequenziell abruft

Erwartetes Ergebnis:

  • Problem: Wasserfall-Muster erkannt - Posts-Abruf wartet darauf, dass Benutzer-Abruf abgeschlossen wird
  • Lösung: Verwenden Sie Promise.all(), um beide Ressourcen parallel abzurufen
  • Erwartete Verbesserung: 50-100ms Reduzierung der Ladezeit (eliminiert eine Netzwerk-Roundtrip)

Verwendung von "vercel-react-best-practices". Optimieren Sie diese Icon-Imports von lucide-react

Erwartetes Ergebnis:

  • Aktuell: Import der gesamten lucide-react-Bibliothek (1.583 Module, ~2,8s Dev-Boot)
  • Empfohlen: Verwenden Sie direkte Imports von dist/esm/icons/ für jedes Icon
  • Erwartete Verbesserung: 15-70% schnellerer Dev-Boot, 40% schnellere Cold Starts

Sicherheitsaudit

Sicher
v1 • 2/24/2026

This skill is documentation-only containing React and Next.js performance optimization guidelines. All 999 static analyzer findings are false positives from code examples in markdown documentation files. The skill does not execute code, make network requests, or access sensitive data. It provides educational content and code patterns for AI to reference when writing or reviewing React/Next.js code.

53
Gescannte Dateien
5,215
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Code-Überprüfung und Refactoring

Überprüfen Sie bestehende React-Komponenten auf Performance-Anti-Muster und schlagen Sie Verbesserungen basierend auf Vercel-Richtlinien vor

Entwicklung neuer Komponenten

Generieren Sie neue React- und Next.js-Komponenten von Beginn an gemäß Performance-Best-Practices

Performance-Audit

Analysieren Sie die Codebasis auf Wasserfall-Muster, Bundle-Überlastung und Rendering-Ineffizienzen

Probiere diese Prompts

Einfache Komponenten-Überprüfung 
Überprüfen Sie diese React-Komponente auf Performance-Probleme unter Verwendung von Vercel-Best-Practices. Identifizieren Sie Wasserfälle, unnötige Re-Renderings oder Bundle-Optimierungsmöglichkeiten:

[Fügen Sie Komponenten-Code ein]
Optimierung des Datenabrufs 
Ich habe diese API-Aufrufe, die sequenziell ausgeführt werden. Refaktorieren Sie sie mit Vercels Wasserfall-Eliminierungsmustern, um sie parallel auszuführen, wo möglich:

[Fügen Sie Datenabruf-Code ein]
Bundle-Größen-Analyse 
Analysieren Sie diese Imports auf Bundle-Optimierungsmöglichkeiten. Schlagen Sie direkte Imports, dynamische Imports oder Preload-Strategien basierend auf Vercel-Richtlinien vor:

[Fügen Sie Import-Anweisungen und Komponenten-Nutzung ein]
Vollständiges Komponenten-Refactoring 
Refaktorieren Sie diese Next.js-Seitenkomponente gemäß aller anwendbaren Vercel React-Best-Practices. Adressieren Sie Wasserfälle, Caching, Re-Renderings und Bundle-Optimierung. Erklären Sie jede durchgeführte Änderung:

[Fügen Sie vollständige Seitenkomponente ein]

Bewährte Verfahren

  • Beginnen Sie immer mit Wasserfall-Eliminierung - sie bietet die höchstwirkenden Performance-Gewinne
  • Verwenden Sie Promise.all() für unabhängige asynchrone Operationen und verzögern Sie await, bis Ergebnisse benötigt werden
  • Importieren Sie direkt von Package-Subpfaden anstelle von Barrel-Dateien, um die Bundle-Größe zu reduzieren

Vermeiden

  • Sequenzielle await-Anweisungen für unabhängige Operationen verursachen unnötige Latenz
  • Importieren ganzer Komponent-Bibliotheken, wenn nur wenige Exports benötigt werden
  • Verwendung von Array sort() zum Finden von Min/Max-Werten anstelle einer einzelnen Schleifen-Iteration

Häufig gestellte Fragen

Für welche React- und Next.js-Versionen sind diese Richtlinien optimiert?
Diese Richtlinien zielen auf React 18+ mit Concurrency-Features und Next.js 13+ App Router mit Server Components ab. Einige Muster können auf früheren Versionen anwendbar sein, aber volle Vorteile erfordern moderne React-Features.
Wie priorisiere ich, welche Regeln zuerst angewendet werden sollen?
Beginnen Sie mit Regeln der Kategorie CRITICAL (Wasserfall-Eliminierung, Bundle-Optimierung), da sie die größten Performance-Gewinne bieten. Adressieren Sie dann Kategorien HIGH und MEDIUM basierend auf den spezifischen Engpässen Ihrer Anwendung.
Gelten diese Richtlinien für reine clientseitige React-Anwendungen?
Die meisten Richtlinien gelten für jede React-Anwendung. Server-spezifische Regeln (server-cache-react, server-serialization) gelten nur für Next.js App Router mit Server Components.
Was ist die erwartete Performance-Wirkung der Befolgung dieser Richtlinien?
Die Wirkung variiert je nach Anwendung. Wasserfall-Eliminierung kann die Seitenladezeit um 200-500ms reduzieren. Bundle-Optimierung kann das initiale Laden um 15-40% verbessern. Re-Render-Optimierungen verbessern typischerweise die Interaktions-Reaktionsfähigkeit um 10-30%.
Kann ich diese Fähigkeit mit Claude Code für automatisiertes Refactoring verwenden?
Ja. Diese Fähigkeit ist für KI-Assistenten konzipiert. Stellen Sie den Fähigkeit-Kontext bereit und bitten Sie Claude Code, Code unter Verwendung der Vercel-Best-Practices-Richtlinien zu überprüfen oder zu refaktorieren.
Gibt es Kompromisse bei der Befolgung dieser Muster?
Einige Muster fügen Code-Komplexität hinzu (z.B. manuelle Parallelisierung, direkte Imports). Die Performance-Vorteile wiegen typischerweise die Komplexitätskosten auf, aber wenden Sie Urteilsvermögen basierend auf den Bedürfnissen Ihres Teams und der Anwendungsskala an.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-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-localstorage-schema.md

📄 client-passive-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

📄 README.md

📄 SKILL.md

📄 metadata.json