Ein spezialisierter Satz von Richtlinien zum Erstellen, Überprüfen und Refactoring wiederverwendbarer React-Komponenten unter Verwendung erstklassiger Kompositionsmuster.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install building-components
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, building-components ü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 Best Practices für den Bau von React-Komponenten?
Dieser Skill bietet ein umfassendes Framework für die Entwicklung wartbarer React-Anwendungen. Er konzentriert sich auf die Kernprinzipien der Einzelverantwortung (Single Responsibility) und Komposition gegenüber Vererbung, um sicherzustellen, dass Ihre Frontend-Architektur skalierbar bleibt. Durch die Integration in Ihre Openclaw Skills-Bibliothek können Sie die Einhaltung der von Vercel empfohlenen Muster für das Design von React-Komponenten automatisieren.\n\nEgal, ob Sie ein komplexes Dashboard oder ein einfaches UI-Kit entwerfen, dieser Skill rationalisiert den Prozess der Props-Typisierung, Komponentenstrukturierung und Zustandsmanagement-Logik. Er dient als Referenz zur Gewährleistung der Konsistenz in Ihrem Entwicklungsteam, während moderne Muster wie Compound Components und Custom Hooks genutzt werden.
Best Practices für den Bau von React-Komponenten Anwendungsfälle
- Erstellen neuer React-Komponenten von Grund auf mit TypeScript.\n- Überprüfung bestehender Komponentenstrukturen und API-Designs für bessere Lesbarkeit.\n- Refactoring von Legacy-Code in modulare, wiederverwendbare funktionale Komponenten.\n- Implementierung fortgeschrittener Kompositionsmuster wie Compound Components oder Render Props.\n- Entwerfen robuster Props-Schnittstellen, die den Best Practices von Openclaw Skills entsprechen.
So funktioniert Best Practices für den Bau von React-Komponenten
- Der KI-Agent analysiert die Komponentenforderungen oder die bestehende Codestruktur, um sicherzustellen, dass sie den Openclaw Skills-Standards entsprechen.\n2. Er wendet das Single-Responsibility-Prinzip an, um zu entscheiden, ob eine Komponente in kleinere Teile aufgeteilt werden sollte.\n3. Das System implementiert die empfohlene TypeScript-Struktur für Props und funktionale Komponenten.\n4. Kompositionsmuster werden angewendet, um tiefe Verschachtelungen zu minimieren und die Wiederverwendbarkeit zu maximieren.\n5. Der Skill schlägt optimierte Zustandsmanagement-Strategien vor, wie z. B. State Lifting oder das Erstellen von Custom Hooks.
Best Practices für den Bau von React-Komponenten Einrichtung
Um diesen Skill in Ihren Workflow zu integrieren, nehmen Sie ihn in Ihre Konfiguration auf.\n\nbash\n# Fügen Sie den Skill building-components Ihrem Openclaw Skills-Verzeichnis hinzu\nopenclaw install building-components\n\n\nStellen Sie sicher, dass Ihre Umgebung TypeScript und React unterstützt, um die Codebeispiele dieser Openclaw Skills voll auszuschöpfen.
Best Practices für den Bau von React-Komponenten Datenschema & Taxonomie
Der Skill nutzt ein strukturiertes Metadatenformat, um Best Practices und Muster zu kategorisieren.\n\n| Feld | Beschreibung |\n| :--- | :--- |\n| name | Die eindeutige Kennung für den Skill (building-components) |\n| description | Kontextuelle Nutzung für React-Komposition und -Struktur |\n| patterns | Beinhaltet Compound Components, Render Props und Hooks |\n| license | MIT-Lizenzierung für die offene Nutzung innerhalb von Openclaw Skills |
Best Practices für den Bau von React-Komponenten Erweiterte Funktionen
- Unterstützung für komplexe Compound Component APIs wie Tabs, Auswahlmenüs und Akkordeons.\n- Logikfreigabe durch wiederverwendbare benutzerdefinierte React Hooks für zustandsbehaftete Operationen.\n- Vollständige TypeScript-Integration für typsichere Props und Komponentenschnittstellen.\n- Automatisierte Refaktorisierung von vererbungsbasierten Komponenten in kompositionsbasierte Modelle mithilfe der Openclaw Skills-Logik.\n- Nahtlose Integration mit verwandten Best-Practice-Sets von Vercel und Next.js.
SKILL.md
Laden
Verwandte Openclaw-Skills
TCL Lyon Transport Integration
Eine hochzuverlässige lokale Datenquelle für das Lyoner Nahverkehrsnetz mit präzisen Fahrplänen für Bus-, Metro-, Tram- und Standseilbahnlinien.
FadNote
Erstellen und teilen Sie sichere, clientseitig verschlüsselte und selbstzerstörende Notizen direkt aus Ihrem KI-Agenten-Workflow.
Voice Log
Ein Hintergrund-Sprachjournal-Tool, das Mikrofonaudio erfasst und mithilfe von Soniox Echtzeit-STT in minutenweise Textprotokolle umwandelt.
Sui Wissensdatenbank
Eine umfassende technische Wissensdatenbank zur Beantwortung von Fragen zur Architektur, Tokenomics und zum Ökosystem der Sui-Blockchain.
Claude Code Setup
Ein spezialisierter Skill zur Initialisierung und Überwachung der .claude/ KI-Kollaborationsebene, um standardisierte Entwicklungsumgebungen für Agenten zu gewährleisten.
Stock Monitor Pro
Ein professionelles KI-Aktienüberwachungssystem, das technische Echtzeit-Warnungen, Kostenbasis-Tracking und automatisierte Marktanalysen für A-Aktien und ETFs bietet.
Hervorgehoben*
