Ein Experten-Framework für den Aufbau skalierbarer React-Komponenten unter Verwendung fortgeschrittener Kompositionstechniken zur Vermeidung von Boolean-Prop-Proliferation.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install composition-patterns
2. Manuelle Installation
Kopiere den Skill-Ordner an einen dieser Orte
~/.openclaw/skills/ <project>/skills/ Priorität: Workspace > Lokal > Integriert (Bundled)
3. Prompt-Installation
Kopiere diesen Prompt in OpenClaw, um ihn automatisch zu installieren.
Hilf mir, composition-patterns über Clawhub zu installieren. Falls Clawhub nicht installiert ist, installiere es bitte zuerst (npm i -g clawhub).
Lieber herunterladen?
Hole dir die rohen Skill-Dateien in einem ZIP-Archiv.
Was ist React Kompositionsmuster?
React Composition Patterns ist ein umfassender technischer Leitfaden und Skillset, der Entwicklern hilft, wartbare und flexible UI-Komponenten zu erstellen. Durch den Fokus auf Compound Components, gemeinsamen Kontext und explizite Varianten bietet diese Openclaw Skills-Ressource den Bauplan zur Vermeidung gängiger Fallstricke wie Prop Drilling und State Trapping. Es befähigt Teams, Komponenten-APIs zu erstellen, die selbstdokumentierend und widerstandsfähig gegenüber sich ändernden Anforderungen sind – durch Inversion of Control und saubere Trennung von Belangen.
React Kompositionsmuster Anwendungsfälle
- Refactoring komplexer Komponenten, die aufgrund übermäßiger Boolean-Props unüberschaubar geworden sind.
- Entwicklung robuster Komponentenbibliotheken und Designsysteme, die hohe Flexibilität erfordern.
- Erstellung anspruchsvoller UI-Module wie Formulare, Dialoge und Karten mit gemeinsamem internen Zustand.
- Entkopplung der UI-Präsentationslogik von globalen oder lokalen State-Management-Implementierungen.
So funktioniert React Kompositionsmuster
- Analysieren der Komponentenstrukturen, um Boolean-Prop-Proliferation und State-Kopplung zu identifizieren.
- Implementieren des Provider-Musters, um gemeinsamen Zustand, Aktionen und Metadaten-Interfaces zu kapseln.
- Erstellen von Compound-Subkomponenten, die den gemeinsamen Kontext über den use()-Hook oder Context Consumer nutzen.
- Entwerfen expliziter Varianten-Komponenten für spezifische Anwendungsfälle, anstatt sich auf bedingte Flags zu verlassen.
- Anwendung kinderbasierter Komposition, damit Konsumenten die visuelle Struktur definieren können, während die funktionale Integrität gewahrt bleibt.
React Kompositionsmuster Einrichtung
Um diese Muster in Ihren Workflow zu integrieren, installieren Sie den Skill über die Openclaw Skills CLI:
npx clawhub@latest install composition-patterns
React Kompositionsmuster Datenschema & Taxonomie
Der Skill organisiert Architekturwissen in spezialisierten Regelwerken für automatisierte Anleitung:
| Komponente | Referenzdatei | Fokusbereich |
|---|---|---|
| Boolean-Logik | rules/architecture-avoid-boolean-props.md |
Reduzierung der Zustands-Komplexität |
| Compound Components | rules/architecture-compound-components.md |
Kontextbasierte Komposition |
| Interface-Design | rules/state-context-interface.md |
State/Actions/Meta-Verträge |
| State-Isolierung | rules/state-decouple-implementation.md |
Entkopplung von UI/State |
| Komponenten-Varianten | rules/patterns-explicit-variants.md |
Benannte Komponenten-Anwendungsfälle |
React Kompositionsmuster Erweiterte Funktionen
- Generische Context-Interfaces, die eine nahtlose Dependency Injection für State und Actions ermöglichen.
- Lifted State Patterns, die es Komponenten außerhalb der unmittelbaren visuellen Hierarchie ermöglichen, mit dem Provider zu interagieren.
- Namespace-basierte Komponenten-Exporte für eine saubere, intuitive API-Nutzung (z. B. Composer.Header, Composer.Input).
- Fortgeschrittene Implementierung von Children-Composition gegenüber Render Props für strukturelle Flexibilität.
SKILL.md
Laden
Verwandte Openclaw-Skills
Uniswap-Pools vergleichen
Analysieren und bewerten Sie Uniswap-Liquiditätspools über Versionen und Gebührenstufen hinweg, um die profitabelsten Handels- oder Liquiditätsbereitstellungsmöglichkeiten zu finden.
Command Creator
Ein entwicklerorientiertes Dienstprogramm zur Generierung wiederverwendbarer Slash-Befehle und strukturierter Markdown-Workflows für KI-Coding-Agenten.
Checkliste für Code-Reviews
Ein mehrdimensionales Framework für KI-Agenten zur Durchführung strenger Code-Reviews in den Bereichen Sicherheit, Leistung, Korrektheit und Wartbarkeit.
Klares Schreiben
Ein spezialisierter Assistent für technisches Schreiben für Openclaw Skills, der prägnante und kraftvolle Prosa für Dokumentationen, APIs und Berichte erstellt.
x402 Micropayments konfigurieren
Ein spezialisierter Skill zur Konfiguration von HTTP-nativen Micropayments für KI-Agenten unter Verwendung des x402-Protokolls und USDC im Base-Netzwerk.
Kontextgetriebene Entwicklung
Transformieren Sie den Projektkontext in ein verwaltetes Artefakt, um konsistentes KI-Verhalten und nahtlose Team-Ausrichtung zu gewährleisten.
Hervorgehoben*
