Skill shadcn/ui pour EloPhanto
Ce skill fournit à l'agent EloPhanto une référence opérationnelle complète pour travailler avec shadcn/ui dans des projets Next.js modernes. Il couvre l'ensemble du cycle de vie : initialisation via CLI, ajout de composants et de blocks, gestion des formulaires avec react-hook-form et Zod, configuration du dark mode avec next-themes, et intégration du MCP server officiel de shadcn/ui.
Contenu et structure
Le skill est organisé en sections thématiques : installation et configuration Tailwind pour Next.js 16, usage des composants copiés dans components/ui, ajout de blocks de haut niveau, gestion des toasts via Sonner (remplaçant le composant toast déprécié), et architecture recommandée pour étendre les composants sans modifier les fichiers sources. Des exemples de code TypeScript/TSX accompagnent chaque section, notamment pour cn(), cva, et les wrappers de composants.
Rôle dans EloPhanto
EloPhanto est un agent autonome capable de construire et déployer des produits complets. Ce skill lui permet de prendre des décisions cohérentes lorsqu'il génère ou modifie du code frontend : quel gestionnaire de paquets utiliser (pnpm obligatoire), comment structurer les composants UI, quels tokens CSS respecter, et comment préférer les commandes CLI aux copier-coller manuels. L'intégration MCP est particulièrement pertinente : l'agent peut interagir avec le MCP server de shadcn/ui pour ajouter des composants de façon programmatique et versionnable.
Utilisation
Ce skill est déclenché automatiquement par l'agent lorsque la conversation mentionne des termes comme shadcn, radix, ui components, tailwind components ou des noms de composants spécifiques (button, dialog, form, data table). Il sert de source de vérité pour les conventions de code UI au sein des projets générés par EloPhanto, garantissant que les interfaces produites respectent les bonnes pratiques d'accessibilité, de theming et d'architecture de composants.