83.3K+Télécharger
Aller au guide d’utilisation
shadcn-uipar Google Labs

shadcn UI Skill.

Un skill Claude Code et Codex pour la conception UI : intégration et personnalisation des composants shadcn/ui : découverte, installation, bonnes pratiques.

  • Web et UI
  • Code UI
Télécharger OpenDesignVoir le guide d'utilisation
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 9 117 caractères au total

01 Ce qu'il fait

Ce que fait le skill shadcn-ui dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill donne à un agent des conseils d'expert pour créer des applications avec shadcn/ui, la collection de composants accessibles et personnalisables construits avec Radix UI ou Base UI et Tailwind CSS. Il couvre la découverte de composants via les outils MCP shadcn, l'installation via le CLI ou l'intégration manuelle, la configuration du projet via les commandes create et init, ainsi que les options de components.json telles que style, baseColor, cssVariables, rsc et rtl.

Il explique la structure des fichiers components/ui/ et l'assistant cn(), puis la personnalisation via les variables CSS dans app/globals.css, les variantes class-variance-authority et les composants wrapper. Les blocs sont organisés par catégorie, suivis des règles d'accessibilité, des modèles courants de formulaires, de dialogues et de tableaux, du dépannage et d'une liste de validation en cinq étapes.

Ce qu'il produit

  • Fichiers source des composants écrits dans components/ui/ et intégrés à vos imports.
  • Un components.json mis à jour reflétant la configuration et les composants ajoutés.
  • Code source des blocs récupéré pour des interfaces multi-fichiers telles que des tableaux de bord ou des flux de connexion.
  • Vos propres fichiers de composants wrapper, par exemple components/custom-button.tsx.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Parcourir d'abord le catalogue

    Explorez les composants disponibles via les outils MCP de shadcn plutôt que de deviner les noms, en utilisant list_components, get_component_metadata et get_component_demo.

  2. 02
    Ajouter le composant avec le CLI

    La voie recommandée est la commande add, qui télécharge un code source adapté à votre configuration, installe les dépendances et place les fichiers dans components/ui/.

  3. 03
    Ou intégrer le code source à la main

    Pour une intégration manuelle, récupérez le code avec get_component, créez le fichier vous-même, installez les dépendances homologues et ajustez les imports.

  4. 04
    Initialiser la configuration du projet

    Les nouveaux projets utilisent create pour choisir le style, les polices et la bibliothèque de composants ; les projets existants exécutent init, qui écrit components.json.

  5. 05
    Thème avec des variables CSS

    Les couleurs vivent dans la configuration Tailwind et les variables CSS, avec un bloc .dark fournissant les surcharges du mode sombre.

  6. 06
    Valider avant de committer

    Vérifiez les types, exécutez le lint, testez l'accessibilité, vérifiez les modes clair et sombre et validez les points de rupture.

02 Trouvez celui qui vous convient

Quand utiliser le skill shadcn-ui

Utilisez le skill shadcn-ui dans Claude Code ou Codex lorsque le travail est une conception UI de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • Démarrer un nouveau projet où le style, les polices et la bibliothèque de composants doivent être choisis dès le départ.
  • Intégrer shadcn/ui dans une base de code existante nécessitant une configuration components.json.
  • Travailler avec un registre privé ou d'équipe déclaré dans components.json, ou parcourir le Registry Directory public.
  • Assembler des écrans plus larges tels que des flux d'authentification ou des tableaux de bord à partir de blocs préconstruits.
  • Projets où la navigation au clavier, les attributs ARIA et la gestion du focus sont non négociables.

Connaître les limites

  • Les versions des composants et des primitives dérivent, donc les mises à niveau peuvent casser et nécessiter de consulter les notes de version.

Quoi fournir

  • Bibliothèque de primitivesChoisissez Radix UI ou Base UI ; le code source téléchargé est adapté à ce choix.
  • Noms de registresLorsque plus que le registre par défaut est configuré, listez ce qui est disponible avant d'en récupérer des éléments.
  • Catégorie de blocsUn filtre de catégorie facultatif restreint les blocs listés avant de récupérer leur code source.

03 Dans le skill

Règles que le skill shadcn-ui donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. S'approprier le code des composants

    Traitez les composants comme du code source que vous avez copié et pouvez réécrire, et non comme une dépendance à mettre à niveau intégralement ; vous pouvez modifier librement le style, le comportement et la structure.

  2. Garder les wrappers hors de Components/ui/

    Les composants composés ou étendus vont dans components/, jamais dans components/ui/, qui contient les composants shadcn eux-mêmes.

  3. Fusionner les classes avec Cn()

    Chaque composant shadcn utilise l'assistant cn(), une combinaison de clsx et tailwind-merge, afin que les surcharges n'entrent pas en conflit.

  4. Exprimer les variantes avec Cva

    La logique de variante et de taille relève de class-variance-authority, avec defaultVariants qui déclare quelle variante et quelle taille s'appliquent quand aucune n'est passée.

  5. Préserver l'accessibilité pendant la personnalisation

    Conservez les attributs ARIA, gardez les gestionnaires clavier, testez avec des lecteurs d'écran et maintenez des indicateurs de focus visibles.

  6. Respecter les exigences d'exécution

    shadcn/ui v4 nécessite React 18+ et, sur les projets Next.js, Next.js 13+ ; certains composants imposent aussi des versions spécifiques de Radix UI.

  7. Installer vous-même les dépendances homologues en mode manuel

    L'intégration manuelle signifie que vous résolvez les dépendances homologues et corrigez les imports à la main plutôt que de laisser le CLI le faire.

04 Mettez-le en pratique

Installer shadcn-ui dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter shadcn-ui à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

Forme générique du CLI skills pour plugins/stitch-build/skills/shadcn-ui/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Exécutez le linter du projet pour repérer les problèmes de style dans la source copiée.
  • Vérifiez l'accessibilité avec des outils comme axe DevTools.
  • Faites une vérification visuelle en mode clair et en mode sombre.
  • Vérifiez le comportement sur différents points de rupture.

Dans OpenDesign shadcn-ui est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branche main
Fichier du skill
plugins/stitch-build/skills/shadcn-ui/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 0337446
License
Apache-2.0 D'après LICENSE.
Étoiles du dépôt
8 304 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour shadcn-ui.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Principes fondamentauxPourquoi du code copié que vous possédez vaut mieux qu'une dépendance.
  2. Découverte et installation des composantsOutils MCP, installation via CLI ou manuelle, registres personnalisés.
  3. Configuration du projetcreate ou init, options de components.json, dépendances requises.
  4. Architecture des composantsOrganisation des dossiers et l'utilitaire de fusion de classes cn().
  5. Bonnes pratiques de personnalisationThématisation par variables CSS, variantes cva, composants wrapper hors de components/ui/.
  6. Blocs et composants complexesLister, récupérer et installer des blocs multi-fichiers par catégorie.
  7. AccessibilitéComportement clavier, ARIA, focus et désactivation basé sur Radix à préserver.
  8. Modèles courantsRecettes d'import pour formulaires, boîtes de dialogue et tableaux de données.
  9. DépannageCorrections pour les problèmes d'import, de conflit de style, de dépendance et de version.
  10. Validation et qualitéCinq contrôles avant commit, du contrôle de type à l'assurance qualité responsive.
  11. RessourcesFichiers de référence pour l'installation, le catalogue, la personnalisation et la migration.
  12. ExemplesImplémentations d'exemple ainsi que des modèles de formulaires, tableaux de bord, authentification et tableaux de données.
Description du skill lui-même
« Conseils d'expert pour intégrer et développer des applications avec les composants shadcn/ui, incluant la découverte, l'installation, la personnalisation et les meilleures pratiques. »

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 9 117 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill shadcn-ui

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Radix UI ou Base UI ?

Les deux. Vous choisissez la primitive dans votre configuration et le CLI adapte le code source téléchargé en conséquence. Les garanties d'accessibilité décrites sont liées aux composants construits sur des primitives Radix UI.

shadcn UI

Exécuter shadcn-ui sur une tâche de design UI réelle.

Le skill shadcn-ui est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui