shadcnpar shadcn

shadcn Skill.

Un skill Claude Code et Codex pour la conception UI : ajoute, recherche, corrige, stylise et compose des composants shadcn dans un projet.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 19 427 caractères au total

01 Ce qu'il fait

Ce que fait le skill shadcn 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 gère les projets shadcn/ui en ajoutant, recherchant, corrigeant et composant des composants. Il injecte le contexte du projet en direct depuis components.json, applique des règles spécifiques au framework pour les formulaires, le style, la composition, les icônes, et l'UI de chat, et utilise la CLI shadcn pour toutes les opérations. Les composants sont installés en tant que code source via npx shadcn@latest (ou le gestionnaire de paquets du projet).

Le skill s'applique lorsqu'on travaille avec shadcn/ui, des registres de composants, des codes prédéfinis, ou tout projet avec un fichier components.json. Il couvre les directives RSC, Tailwind v3/v4, les primitives Base UI vs Radix, la détection de la bibliothèque d'icônes, et les configurations monorepo. Chaque commande fait référence aux alias, gestionnaire de paquets, et chemins résolus réels du projet.

Ce qu'il produit

Fichiers de code source pour les composants shadcn ajoutés au chemin ui résolu du projet
Fichiers de composants fusionnés lors de la mise à jour, préservant les modifications locales tout en appliquant les mises à jour amont

Voir l'exemple de prompt ↗

Fonctionnement

01
Injecter le contexte du projet
Exécute npx shadcn@latest info --json pour obtenir la configuration du projet, les composants installés, les alias, le drapeau RSC, la version de Tailwind, la bibliothèque d'icônes, la base (radix ou base), et les chemins résolus.
02
Rechercher dans les registres avant d'écrire une UI personnalisée
Utilise npx shadcn@latest search pour vérifier le registre shadcn et les registres communautaires à la recherche de composants existants correspondant au besoin.
03
Récupérer la documentation et les exemples des composants
Exécute npx shadcn@latest docs <component> pour obtenir la documentation et les URL d'exemples, puis les récupère pour vérifier l'usage correct de l'API avant de créer ou corriger un composant.
04
Ajouter ou mettre à jour des composants avec la CLI
Utilise npx shadcn@latest add pour installer des composants.
05
Corriger les imports dans les composants tiers
Après l'ajout de composants depuis des registres communautaires, vérifie les fichiers non-UI pour des chemins codés en dur comme @/components/ui/...
06
Revoir et vérifier les composants ajoutés
Lit tous les fichiers ajoutés pour vérifier l'absence de sous-composants, une composition incorrecte, des violations de règles critiques et des imports d'icônes non concordants.

02 Trouvez celui qui vous convient

Quand utiliser le skill shadcn

Utilisez le skill shadcn 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

Création d'une UI avec des composants shadcn/ui dans un projet existant possédant un fichier components.json
Initialisation d'un nouveau projet shadcn avec un code de préréglage ou un préréglage nommé comme nova ou vega
Création d'interfaces de chat ou de conversation avec MessageScroller, Message, Bubble, Attachment et Marker

Connaître les limites

Récupération manuelle des fichiers de composants depuis GitHub au lieu d'utiliser le CLI
Utilisation d'un registre par défaut lorsque l'utilisateur ne précise pas lequel utiliser
Utilisation de --overwrite pour mettre à jour des composants sans l'approbation explicite de l'utilisateur
Invention de fonctionnalités, d'intégrations ou de noms de fichiers absents du contexte du projet

Quoi fournir

Nom du composant ou du blocLe nom d'un composant shadcn (button, dialog, select) ou d'un élément de registre (@magicui/shimmer-button, owner/repo/item) à ajouter ou à rechercher.
Code de préréglage ou préréglage nomméUne chaîne base62 préfixée par une version (par ex. a2r6bw) provenant de ui.shadcn.com, ou un préréglage nommé (nova, vega, maia, lyra, mira, luma) pour init ou apply.

03 Dans le skill

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

8 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.

Utiliser gap-, jamais space-x- ou space-y-*
Pour l'espacement entre les enfants flex, utilisez gap-. Pour les piles verticales, utilisez flex flex-col gap-. space-x- et space-y- ne sont jamais autorisés.
Les formulaires utilisent FieldGroup + Field
Les mises en page de formulaire doivent utiliser les composants FieldGroup et Field. N'utilisez jamais de div brut avec space-y- ou grid gap- pour la mise en page de formulaire.
Icônes dans les boutons : utiliser data-icon
Les icônes à l'intérieur de Button doivent avoir data-icon="inline-start" ou data-icon="inline-end". Aucune classe de dimensionnement comme size-4 ou w-4 h-4 sur les icônes à l'intérieur des composants.
Les éléments sont toujours à l'intérieur de leur groupe
SelectItem va à l'intérieur de SelectGroup, DropdownMenuItem à l'intérieur de DropdownMenuGroup, CommandItem à l'intérieur de CommandGroup. Ne jamais afficher les éléments directement.
Utiliser des tokens de couleur sémantiques, pas des valeurs brutes
Utilisez bg-primary, text-muted-foreground, etc. N'utilisez jamais de couleurs Tailwind brutes comme bg-blue-500 ou text-emerald-600. Aucune surcharge manuelle de couleur dark:.
Dialog, Sheet et Drawer ont toujours besoin d'un titre
DialogTitle, SheetTitle et DrawerTitle sont requis pour l'accessibilité. Utilisez className="sr-only" si le titre doit être visuellement masqué.
Ne jamais décoder manuellement les codes de préréglage
Utilisez npx shadcn@latest preset decode <code>, preset url <code>, ou preset open <code>. Pour une détection de preset tenant compte du projet, utilisez preset resolve. Ne construisez jamais les URL de preset à la main.
Exécutez toutes les commandes CLI avec le gestionnaire de paquets du projet
Utilisez npx shadcn@latest, pnpm dlx shadcn@latest, ou bunx --bun shadcn@latest selon le champ packageManager du projet. Ne codez jamais npx en dur si le projet utilise pnpm ou bun.

04 Mettez-le en pratique

Installer shadcn 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 à 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/shadcn-ui/ui --skill shadcn

Forme CLI générique skills pour skills/shadcn/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

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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 npx shadcn@latest info pour vérifier que le composant a été ajouté à la liste des composants installés
Vérifiez que les imports d'icônes correspondent au champ iconLibrary du projet (lucide-react, @tabler/icons-react, etc.)

Dans OpenDesign importez shadcn depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire 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: shadcn
Repository: github.com/shadcn-ui/ui Branche main
Fichier du skill: skills/shadcn/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 2b3e6d4
License: MIT Depuis LICENSE.md.
Étoiles du dépôt: 123 708 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt shadcn-ui/ui. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour shadcn.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Contexte du projet actuelInjecte la configuration du projet en temps réel et les composants installés à partir de npx shadcn@latest info --json
PrincipesUtilisez d'abord les composants existants, composez plutôt que de réinventer, utilisez les variantes intégrées, utilisez des couleurs sémantiques
Règles critiquesRègles toujours appliquées pour le style, les formulaires, la composition, les icônes, le chat et le CLI, avec liens vers les fichiers détaillés
Patterns clésLes patterns de code les plus courants : mise en page de formulaire, validation, icônes dans les boutons, espacement, dimensions égales, couleurs de statut
Sélection de composantsTableau associant les besoins UI aux composants shadcn corrects (boutons, formulaires, overlays, feedback, navigation, chat)
Champs clésExplique aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset à partir du contexte du projet
Docs, exemples et usage des composantsExécutez npx shadcn@latest docs pour obtenir les URL, puis récupérez-les pour l'API et les patterns d'usage corrects
WorkflowProcessus en neuf étapes : récupérer le contexte, vérifier l'installation, rechercher, obtenir la documentation, installer, corriger les imports, relire, gérer les registres, changer de preset
Mise à jour des composantsUtilisez --dry-run et --diff pour fusionner les changements amont tout en préservant les modifications locales, n'utilisez jamais --overwrite sans approbation
Référence rapideExemples de commandes CLI pour init, apply, add, search, docs, view, les opérations de preset avec leurs options et la syntaxe du registre
Références détailléesLiens vers des fichiers de règles séparés pour les formulaires, la composition, le chat, les icônes, le style, base-vs-radix, le CLI, le registre, la personnalisation

Description du skill lui-même

« Gère les composants et projets shadcn — ajout, recherche, correction, débogage, stylisation et composition d'UI, y compris les interfaces de chat. Fournit le contexte du projet, la documentation des composants et des exemples d'utilisation. S'applique lors du travail avec shadcn/ui, les registres de composants, les préréglages, les codes --preset, ou tout projet contenant un fichier components.json. Se déclenche également pour "shadcn init", "créer une app avec --preset", ou "passer à --preset". »

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

shadcn

Exécuter shadcn sur une vraie tâche de conception d'UI.

Téléchargez OpenDesign, importez shadcn depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Ce que fait le skill shadcn dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill shadcn

Bon choix

Connaître les limites

Quoi fournir

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

Utiliser gap-, jamais space-x- ou space-y-*

Les formulaires utilisent FieldGroup + Field

Icônes dans les boutons : utiliser data-icon

Les éléments sont toujours à l'intérieur de leur groupe

Utiliser des tokens de couleur sémantiques, pas des valeurs brutes

Dialog, Sheet et Drawer ont toujours besoin d'un titre

Ne jamais décoder manuellement les codes de préréglage

Exécutez toutes les commandes CLI avec le gestionnaire de paquets du projet