Que fait shadcn-first ?
Quelqu'un maintient ce code après vous. Chaque div écrit à la main avec des classes personnalisées et chaque style={{}} est une chose qu'il garde en vie, et cela dérive. Les UI artisanales laissent aussi tomber silencieusement le savoir-faire offert gratuitement par la bibliothèque : les anneaux de focus, les états survol et actif, la navigation au clavier, les squelettes, les états vides, ARIA.
L'ordre. Ne sautez jamais une étape.
- Bloc.
ui.shadcn.com/blockscontient des barres latérales complètes, des tableaux de bord, des pages de connexion, des tables de données. Installez le bloc. - Composant. Si aucun bloc ne correspond, utilisez un composant du registre.
- Composez deux ou trois composants.
- Écrivez-le vous-même. Seulement ici, et le message de commit doit nommer le bloc ou composant que vous avez évalué et pourquoi il ne convenait pas.
Adaptez le design au composant, pas le composant au design. La marque et le langage visuel s'atteignent via les variables de thème dans un seul thème, jamais de CSS par écran à côté du composant.
Outils et lesquels utiliser
Deux serveurs MCP sont configurés. Ils font des travaux différents.
shadcn-official (npx shadcn@latest mcp) est conscient du projet : il lit le components.json du dépôt. Utilisez-le pour le vrai travail.
| Outil | Utilisez-le pour |
|---|---|
get_project_registries | confirmer que le projet est initialisé |
search_items_in_registries | trouver le composant pour le travail, flou |
list_items_in_registries | voir tout ce qui est disponible |
view_items_in_registries | lire le code source réel et les dépendances d'un composant avant de l'utiliser |
get_item_examples_from_registries | copier un exemple d'utilisation réel au lieu de deviner l'API |
get_add_command_for_items | obtenir la ligne exacte npx shadcn add …, puis l'exécuter |
get_audit_checklist | exécuter après avoir écrit le code. C'est la porte. |
shadcn (@jpisnice/shadcn-ui-mcp-server) est à l'échelle du registre et connaît les blocs et les thèmes : list_blocks, get_block, list_themes, get_theme, get_component_demo. Utilisez-le pour l'étape 1 et pour la thématisation.
Si un projet n'a pas de components.json, les outils officiels échouent. Exécutez d'abord npx shadcn@latest init, puis continuez.
Pour les surfaces de chat IA, utilisez prompt-kit (prompt-kit.com, compatible shadcn) : chat-container, message, prompt-input, scroll-button, markdown, code-block, loader. Même règle, installez plutôt que de reconstruire.
Composants que les gens réinventent au lieu d'installer
sidebar (pliable, avec menu utilisateur en bas), command (palette Cmd+K), table + bloc de table de données TanStack, tabs, sheet, dialog, alert-dialog, popover, tooltip, skeleton, sonner (toasts), form (react-hook-form + zod), breadcrumb, resizable, scroll-area, avatar, badge, separator, dropdown-menu, select, collapsible, chart.
Si vous vous surprenez à construire l'un d'eux à la main, arrêtez-vous et installez-le.
Raccourcis clavier
Utilisez Cmd+K pour la palette de commandes ; c'est la convention cmdk que le composant command embarque. Cmd+L est réservé par le navigateur pour la barre d'adresse et ne peut pas être intercepté de manière fiable dans Chrome. Si quelqu'un demande Cmd+L, liez Cmd+K, ajoutez Cmd+L opportunément et expliquez pourquoi.
Terminé signifie mesuré, pas prétendu
Avant de signaler comme terminé, exécutez get_audit_checklist et rapportez les chiffres :
- lignes UI personnalisées supprimées
- blocs et composants installés
- occurrences restantes de
style={{}}(grep -rc 'style={{' src/) - par écran : éléments de
components/ui/vs écrits à la main
Tout ce qui est encore écrit à la main doit être justifié par une raison explicite, pas être négligé. Une capture d'écran est la preuve que l'écran s'affiche ; les comptes sont la preuve que la règle a été suivie. Les deux, ou ce n'est pas terminé.
Ne faites pas
- Pas d'émojis dans l'UI. Des icônes SVG réelles (Lucide est livré avec shadcn).
- Pas de textes-dans-cercles pour les logos de marque. Sourcez de vrais chemins SVG : SimpleIcons > svgl.app > gilbarbara/logos > favicon.
- Maximum une ou deux couleurs d'accent. Pas de bordures colorées à gauche sur les cartes. Pas de dégradé sur chaque élément.
- Ne forkez pas un composant pour changer une couleur. Changez la variable de thème.