PhuongDeveloper/landingpage

React-Kompositionsmuster, die skalieren. Verwenden Sie dies beim Refactoring von Komponenten mit übermäßigen booleschen Props, beim Erstellen flexibler Komponentenbibliotheken oder beim Entwerfen wiederverwendbarer APIs. Auslöser bei Aufgaben, die zusammengesetzte Komponenten, Render-Props, Kontextanbieter oder Komponentenarchitektur betreffen. Enthält React 19 API-Änderungen.

Was ist landingpage?

Dieses Skill definiert eine Sammlung von React-Kompositionsmustern, die Entwicklern und KI-Agenten helfen, skalierbare und wartbare Komponenten zu erstellen. Es konzentriert sich auf die Vermeidung von booleschen Props (sogenannter 'Prop-Proliferation') durch den Einsatz von zusammengesetzten Komponenten, State-Lifting und expliziten Varianten. Das Skill ist besonders nützlich beim Refactoring bestehender Komponenten, beim Aufbau von Komponentenbibliotheken und beim Entwurf flexibler APIs. Es unterstützt gängige Entwicklungsumgebungen wie Claude Code, Cursor und Codex, indem es strukturierte Regeln in den Kategorien Komponentenarchitektur, State-Management, Implementierungsmuster und React 19 APIs bereitstellt. Die Umsetzung erfolgt über Referenzdateien mit detaillierten Erklärungen und Codebeispielen, die entweder einzeln oder als kompiliertes Dokument (AGENTS.md) genutzt werden können.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/PhuongDeveloper/landingpage/tree/HEAD/.agents/skills/vercel-composition-patterns

Dokumentation

React-Kompositionsmuster

Kompositionsmuster zum Erstellen flexibler, wartbarer React-Komponenten. Vermeiden Sie die Proliferation boolescher Props durch die Verwendung zusammengesetzter Komponenten, State-Lifting und das Zusammensetzen interner Strukturen. Diese Muster erleichtern die Arbeit mit Codebasen für Menschen und KI-Agenten gleichermaßen, wenn diese skalieren.

Wann anwenden

Beachten Sie diese Richtlinien bei:

Refactoring von Komponenten mit vielen booleschen Props
Aufbau wiederverwendbarer Komponentenbibliotheken
Entwurf flexibler Komponenten-APIs
Überprüfung der Komponentenarchitektur
Arbeiten mit zusammengesetzten Komponenten oder Kontextanbietern

Regelkategorien nach Priorität

Priorität	Kategorie	Auswirkung	Präfix
1	Komponentenarchitektur	HOCH	`architecture-`
2	State-Management	MITTEL	`state-`
3	Implementierungsmuster	MITTEL	`patterns-`
4	React 19 APIs	MITTEL	`react19-`

Kurzreferenz

1. Komponentenarchitektur (HOCH)

architecture-avoid-boolean-props – Fügen Sie keine booleschen Props hinzu, um das Verhalten anzupassen; verwenden Sie Komposition
architecture-compound-components – Strukturieren Sie komplexe Komponenten mit gemeinsamem Kontext

2. State-Management (MITTEL)

state-decouple-implementation – Der Provider ist der einzige Ort, der weiß, wie der Zustand verwaltet wird
state-context-interface – Definieren Sie eine generische Schnittstelle mit Zustand, Aktionen, Metadaten für Dependency Injection
state-lift-state – Verschieben Sie Zustand in Provider-Komponenten für den Zugriff durch Geschwister

3. Implementierungsmuster (MITTEL)

patterns-explicit-variants – Erstellen Sie explizite Variantenkomponenten anstelle von booleschen Modi
patterns-children-over-render-props – Verwenden Sie children für die Komposition anstelle von renderX-Props

4. React 19 APIs (MITTEL)

⚠️ Nur React 19+. Überspringen Sie diesen Abschnitt bei Verwendung von React 18 oder älter.

react19-no-forwardref – Verwenden Sie nicht forwardRef; verwenden Sie use() anstelle von useContext()

Verwendung

Lesen Sie die einzelnen Regeldateien für detaillierte Erklärungen und Codebeispiele:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Jede Regeldatei enthält:

Kurze Erklärung, warum es wichtig ist
Falsches Codebeispiel mit Erklärung
Richtiges Codebeispiel mit Erklärung
Zusätzlicher Kontext und Verweise

Vollständig kompiliertes Dokument

Für die vollständige Anleitung mit allen Regeln: AGENTS.md