shadcn-ui
✓Modèles de composants shadcn/ui avec primitives Radix et style Tailwind. À utiliser lors de la création de composants d'interface utilisateur, de l'utilisation de variantes CVA, de l'implémentation de composants composés ou du style avec des attributs d'emplacement de données. Déclencheurs sur shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps.
Installation
SKILL.md
Tokens: bg-background, text-foreground, bg-primary, text-primary-foreground, bg-card, text-card-foreground, border-input, text-muted-foreground
| Multiple visual variants (primary, outline, ghost) | Yes | Plain className | | Size variations (sm, md, lg) | Yes | Plain className | | Compound conditions (outline + large = thick border) | Yes | Conditional cn() | | One-off custom styling | No | className prop | | Dynamic colors from props | No | Inline styles or CSS variables |
| Complex UI with multiple semantic parts | Yes | Single component with many props | | Optional sections (header, footer) | Yes | Boolean show/hide props | | Different styling for each part | Yes | CSS selectors | | Shared state between parts | Yes + Context | Props drilling | | Simple wrapper with children | No | Single component |
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui- Source
- existential-birds/beagle
- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que shadcn-ui ?
Modèles de composants shadcn/ui avec primitives Radix et style Tailwind. À utiliser lors de la création de composants d'interface utilisateur, de l'utilisation de variantes CVA, de l'implémentation de composants composés ou du style avec des attributs d'emplacement de données. Déclencheurs sur shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps. Source : existential-birds/beagle.
Comment installer shadcn-ui ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/existential-birds/beagle
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01