shadcn/ui Agent Skill
Skill agent pour shadcn/ui — workflows CLI, règles critiques de style et composition, registries, presets
- Quoi
- Skill agent pour shadcn/ui — workflows CLI, règles critiques de style et composition, registries, presets
- Coût
- Gratuit
- Prérequis
- un projet avec Node.js et un package runner (npx, pnpm dlx ou bunx — celui du `packageManager` du projet) ; la plupart des commandes exigent un projet shadcn existant avec un fichier `components.json` ; installez avec SKILL.md les fichiers de référence `rules/*.md`, `cli.md` et `registry.md`
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill agent officiel pour shadcn/ui par l'équipe shadcn-ui : il gère composants et projets via la CLI (`init`, `add`, `search`, `view`, `docs` — toujours via le package runner du projet : npx, pnpm dlx ou bunx) et, surtout, encode les règles critiques que l'agent doit appliquer en écrivant du UI — style (tokens de couleurs sémantiques, `gap-*` au lieu de `space-x-*`/`space-y-*`, `size-*` pour dimensions égales, `cn()` pour les conditionnelles, pas de `z-index` manuel sur les overlays), formulaires (`FieldGroup` + `Field`, primitives `InputGroup`, `ToggleGroup` pour 2 à 7 options, états de validation `data-invalid` + `aria-invalid`), composition (items toujours dans leur `Group`, `asChild`/`render` pour les déclencheurs custom, `DialogTitle` obligatoire pour l'accessibilité, composition `Card` complète, `Avatar` toujours avec `AvatarFallback`), composants plutôt que markup custom (`Alert` pour les callouts, `Empty` pour les états vides, `Skeleton` pour le chargement, `Badge` plutôt que spans stylés), icônes (`data-icon` dans les boutons, pas de classes de taille), et UI de chat (composer `MessageScroller`, `Message`, `Bubble`, `Attachment`, `Marker` — jamais de bulles faites main). Il fournit aussi le workflow (vérifier les composants installés avant `add`, récupérer les URL `docs` avant de toucher un composant, `--dry-run`/`--diff` avant les mises à jour, jamais `--overwrite` sans approbation), les champs de contexte projet lus depuis `info` (aliases, isRSC pour `"use client"`, tailwindVersion, style, base radix/base, iconLibrary, resolvedPaths, framework, packageManager), les registries de composants (registry explicite requis — jamais deviné), et la gestion des presets (décoder/appliquer/résoudre les codes de preset, overwrite vs partiel vs merge vs skip lors d'un changement). Crédit : @shadcn-ui. Bémols honnêtes : c'est un skill invocable par l'agent (`user-invocable: false`) — il éduque votre agent, il n'installe rien tout seul ; ses règles de style sont tranchées et entreront en conflit avec les projets existants qui utilisent des couleurs brutes ou des habitudes `space-y-*` ; les fichiers de référence `rules/*.md` qu'il référence sont livrés avec le SKILL.md et doivent être installés ensemble. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : un projet avec Node.js et un package runner (npx, pnpm dlx ou bunx — celui du `packageManager` du projet) ; la plupart des commandes exigent un projet shadcn existant avec un fichier `components.json` ; installez avec SKILL.md les fichiers de référence `rules/*.md`, `cli.md` et `registry.md` Installe-moi « Skill agent shadcn/ui ». Skill agent pour shadcn/ui — workflows CLI, règles critiques de style et composition, registries, presets Dépôt : https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers auxiliaires) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout comportement suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants passent uniquement par le coffre sécurisé. Vérifie que c'est bien le cas ; ARRÊTE sur le moindre drapeau rouge et dis-le-moi. 3. Installe-le comme skill : copie SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « shadcn-ui ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. enregistrer ma clé API dans le coffre). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.