Communitygithub.com

chakra-ui/chakra-ui-builder

Erstelle responsive, barrierefreie UI-Komponenten und Layouts mit Chakra UI v3, installiere oder konfiguriere Chakra UI in neuen und bestehenden Projekten, und entwerfe skalierbare Themes mit Tokens, semantischen Tokens, Recipes und Slot Recipes.

Was ist chakra-ui-builder?

Diese Skill befähigt KI-Agenten, responsive und barrierefreie UI-Komponenten sowie Layouts mit Chakra UI v3 zu erstellen. Sie unterstützt sowohl die Neuinstallation und Konfiguration von Chakra UI in Projekten als auch die Erweiterung bestehender Projekte. Besonders hervorzuheben ist die Fähigkeit, skalierbare Themes zu entwerfen – mittels Design Tokens, semantischen Tokens, Recipes und Slot Recipes. Die Skill wird bei einer Vielzahl von Anfragen aktiviert, von der Erstellung einzelner Komponenten (wie Karten, Navbars, Formulare) bis hin zu komplexen Layouts (Dashboards, Preistabellen). Auch themenbezogene Anforderungen wie die Definition von Markenfarben, Dark-Mode-Werten oder das Erstellen von Charts (Balken-, Liniendiagramme) werden abgedeckt. Der Skill unterstützt gängige Agenten-Plattformen wie Claude Code, Cursor und Codex und arbeitet auf Basis der offiziellen Chakra-UI-Dokumentation.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht chakra-ui-builder?

Erstelle responsive, barrierefreie UI-Komponenten und Layouts mit Chakra UI v3, installiere oder konfiguriere Chakra UI in neuen und bestehenden Projekten, und entwerfe skalierbare Themes mit Tokens, semantischen Tokens, Recipes und Slot Recipes. Verwende diese Skill immer dann, wenn ein Benutzer darum bittet, eine UI-Komponente, Seite, ein Formular, Dashboard, eine Navbar, Karte, Landing-Section, Preistabelle oder ein Layout mit Chakra UI zu erstellen, zu generieren oder zu bauen; Chakra UI zu einem Projekt hinzufügen, ChakraProvider einrichten, CLI-Snippets ausführen, den Farbmodus konfigurieren oder die Provider-Umwicklung reparieren möchte; oder nach Theming fragt – Markenfarben definieren, Design Tokens, semantische Tokens, Dark-Mode-Werte, Komponenten-Recipes, Slot Recipes, Typegen oder das Extrahieren des Standard-Themes. Reagiere auf jede Anfrage zum Bauen, Einrichten oder Theming mit Chakra UI oder zu Diagrammen, egal wie beiläufig formuliert – „meine Markenfarben hinzufügen“, „einen wiederverwendbaren Kartenstil erstellen“, „ein Balkendiagramm bauen“, „zeig mir ein Liniendiagramm“, „erstell mir ein Login-Formular“, „eine Sidebar bauen“, „Chakra zu meiner App hinzufügen“.

Verwandte Skills