Communitygithub.com

chakra-ui/chakra-ui-builder

Construisez des composants d'interface utilisateur réactifs et accessibles avec Chakra UI v3, installez ou configurez Chakra UI dans des projets nouveaux ou existants, et concevez des thèmes évolutifs avec des tokens, des tokens sémantiques, des recettes et des slot recipes.

Qu'est-ce que chakra-ui-builder ?

Cette compétence permet aux agents IA comme Claude Code, Cursor ou Codex de construire, installer et configurer Chakra UI v3 dans des projets React. Elle couvre la création de composants d'interface (boutons, cartes, formulaires, tableaux de bord, barres de navigation, sections d'atterrissage, tableaux de prix), la configuration de ChakraProvider et du mode couleur, ainsi que la conception de thèmes avancés avec des tokens de design, des tokens sémantiques, des recettes de composants et des slot recipes. Elle prend en charge la génération de graphiques (barres, lignes) et l'extraction du thème par défaut. En se basant sur le fichier SKILL.md dédié, l'agent peut répondre à des demandes formulées de manière informelle comme 'ajoute mes couleurs de marque', 'crée un style de carte réutilisable' ou 'construis une barre latérale', en traduisant ces requêtes en implémentations concrètes avec Chakra UI.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait chakra-ui-builder ?

Construisez des composants d'interface utilisateur réactifs et accessibles avec Chakra UI v3, installez ou configurez Chakra UI dans des projets nouveaux ou existants, et concevez des thèmes évolutifs avec des tokens, des tokens sémantiques, des recettes et des slot recipes. Utilisez cette compétence lorsqu'un utilisateur demande de construire, créer ou générer un composant d'interface, une page, un formulaire, un tableau de bord, une barre de navigation, une carte, une section d'atterrissage, un tableau de prix ou une mise en page avec Chakra UI ; souhaite ajouter Chakra UI à un projet, configurer ChakraProvider, exécuter des extraits CLI, configurer le mode couleur ou corriger l'encapsulation du provider ; ou pose des questions sur la thématisation — définition des couleurs de marque, tokens de design, tokens sémantiques, valeurs du mode sombre, recettes de composants, slot recipes, typegen ou extraction du thème par défaut. Déclenchez-vous sur toute demande de construction, configuration ou thématisation ou de graphiques avec Chakra UI, quelle que soit la formulation — "ajoute mes couleurs de marque", "crée un style de carte réutilisable", "construis un graphique à barres", "montre-moi un graphique en lignes", "crée-moi un formulaire de connexion", "construis une barre latérale", "ajoute Chakra à mon application".

Skills associés