Vercel React Best Practices

Sag das, um den Skill zu aktivieren

---
name: vercel-react-best-practices
description: Prüft React/Next.js-Code auf Performance, Rendering und Bundle-Größe, liefert anwendbare Fixes.
---

Prüft React/Next.js-Code auf Performance-, Rendering- und Bundle-Probleme und liefert priorisierte Fixes mit Code (eigene Methodik, kein offizieller Vercel-Skill).

## Wann dieser Skill aktiviert wird
- Ein Next.js-Frontend soll vor dem Launch auf Bottlenecks geprüft werden.
- Jemand bittet um Review von Komponenten, Data-Fetching oder Rendering-Strategie.
- Core Web Vitals (LCP, INP, CLS) sind schlecht und die Ursache ist unklar.

## Workflow
1. Kontext erfassen: App Router oder Pages Router, Versionen aus package.json, Rendering pro Route (statisch, dynamisch, ISR).
2. Client/Server-Grenze prüfen: "use client" per grep listen. Zu hohe Direktiven ziehen Teilbäume ins Client-Bundle. Interaktives als Blatt isolieren, Statisches als children durchreichen.
3. Request-Waterfalls jagen: sequentielle awaits in Server Components mit Promise.all parallelisieren; fetch-Ketten in useEffect auf den Server verlagern oder per Suspense streamen.
4. LCP-Pfad prüfen: Hero-Bild über next/image mit priority und sizes, Fonts über next/font statt externem CSS, Third-Party-Scripts über next/script mit strategy.
5. Bundle analysieren: schwere Dependencies und Barrel-Imports finden, selten genutzte Client-Komponenten (Modals, Charts) per next/dynamic nachladen.
6. Re-Render-Hygiene: State tief kolokalisieren, instabile Objekt-Props an memoisierte Kinder aufspüren, große Contexts aufteilen.
7. Caching und Streaming: revalidate und fetch-Cache pro Route prüfen, loading.tsx und Suspense-Boundaries für langsame Quellen vorschlagen.
8. Befunde priorisieren: erst Nutzer-Impact (LCP, INP, CLS), dann Bundle, dann DX. Quick Wins markieren.

## Output-Format
Markdown-Report: Kurzfazit in 3 bis 5 Sätzen, dann Befunde nach Priorität (Kritisch, Hoch, Mittel). Jeder Befund: Datei und Zeile, Problem mit Begründung, Fix als Vorher/Nachher-Snippet, erwarteter Effekt. Abschluss: Quick-Win-Liste mit Aufwand pro Fix (15min, 1-2h).

## Qualitätsregeln
- Jeder Befund nennt Datei und Zeile, keine Pauschalaussagen ohne Fundstelle.
- Jeder Fix enthält lauffähigen Ersatzcode, keine reine Beschreibung.
- App-Router- und Pages-Router-APIs nie mischen; gegen installierte Version prüfen.
- Keine useMemo/useCallback-Empfehlung ohne benennbaren Re-Render-Pfad.
- Kein "use client" entfernen, wenn die Komponente echte Interaktivität braucht.
- Keine erfundenen Messwerte; stattdessen Messung vorschlagen (Lighthouse, next build).

Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.

Skill teilen