Was macht vercel-react-best-practices?
Richtlinien von Vercel Engineering zur Leistungsoptimierung von React und Next.js. Dieses Skill sollte beim Schreiben, Überprüfen oder Refaktorisieren von React/Next.js-Code verwendet werden, um optimale Leistungsmuster sicherzustellen. Es wird ausgelöst bei Aufgaben, die React-Komponenten, Next.js-Seiten, Datenabfragen, Bundle-Optimierung oder Leistungsverbesserungen betreffen.
Warum dieses Skill verwenden?
- Konsistente Leistungsmuster: Stelle sicher, dass alle React/Next.js-Apps den Best Practices von Vercel Engineering folgen.
- Automatische Überprüfung: Erkenne Leistungsengpässe während des Code-Reviews oder der Refaktorisierung.
- Proaktive Optimierung: Vermeide typische Fehler wie unnötige Re-Renders, übermäßige Bundle-Größe oder ineffiziente Datenabfragen.
Unterstützte Plattformen
- Claude Code
- Cursor
- Codex
- GitHub Copilot
- JetBrains AI Assistant
- Andere KI-Assistenten, die Skills unterstützen
Funktionsweise
- Auslösung: Das Skill wird aktiviert, wenn der KI-Assistent Code mit React-Komponenten, Next.js-Seiten, Datenabfragen, Bundle-Optimierung oder Leistungsverbesserungen erkennt.
- Anwendung: Der Assistent wendet die Richtlinien auf den aktuellen Code an, z. B. durch Vorschläge zur Verwendung von
React.memo,useMemo,useCallback, oder durch Optimierung von Next.js-Rendering-Strategien. - Überprüfung: Bei Code-Reviews markiert das Skill potenzielle Probleme und bietet konkrete Verbesserungsvorschläge gemäß den Vercel-Best Practices.
Beispiel-Code
// Vorher: Ineffiziente Komponente
function ExpensiveComponent({ data }) {
return <div>{/* ... */}</div>;
}
// Nachher: Optimiert mit React.memo
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
return <div>{/* ... */}</div>;
});
// Vorher: Unnötige Re-Renders
function Parent() {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child />
</>
);
}
// Nachher: Optimiert mit useCallback
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => setCount(count + 1), [count]);
return (
<>
<button onClick={handleClick}>Increment</button>
<Child />
</>
);
}