Compétence de Style UI
Compétence complète pour créer des interfaces utilisateur magnifiques et accessibles en combinant les composants shadcn/ui, le style utilitaire Tailwind CSS et des systèmes de conception visuelle basés sur canvas.
Référence
- shadcn/ui : https://ui.shadcn.com/llms.txt
- Tailwind CSS : https://tailwindcss.com/docs
Quand Utiliser Cette Compétence
Utilisez-la lorsque :
- Vous construisez une UI avec des frameworks basés sur React (Next.js, Vite, Remix, Astro)
- Vous implémentez des composants accessibles (boîtes de dialogue, formulaires, tableaux, navigation)
- Vous stylisez avec une approche CSS utilitaire
- Vous créez des mises en page responsives et mobile-first
- Vous implémentez le mode sombre et la personnalisation des thèmes
- Vous construisez des systèmes de design avec des tokens cohérents
- Vous générez des designs visuels, des affiches ou des supports de marque
- Vous prototypage rapide avec un retour visuel immédiat
- Vous ajoutez des motifs d'UI complexes (tableaux de données, graphiques, palettes de commandes)
Stack de Base
Couche Composant : shadcn/ui
- Composants accessibles pré-construits via les primitives Radix UI
- Modèle de distribution copier-coller (les composants vivent dans votre codebase)
- TypeScript-first avec sécurité de type complète
- Primitives composables pour des UI complexes
- Installation et gestion via CLI
Couche de Style : Tailwind CSS
- Framework CSS utilitaire
- Traitement à la compilation sans surcharge à l'exécution
- Design responsive mobile-first
- Tokens de design cohérents (couleurs, espacement, typographie)
- Élimination automatique du code mort
Couche de Conception Visuelle : Canvas
- Compositions visuelles de qualité musée
- Approche de conception guidée par la philosophie
- Communication visuelle sophistiquée
- Texte minimal, impact visuel maximal
- Motifs systématiques et esthétique raffinée
Démarrage Rapide
Configuration Composant + Style
Installer shadcn/ui avec Tailwind :
npx shadcn@latest init
Le CLI demande le framework, TypeScript, les chemins et les préférences de thème. Cela configure à la fois shadcn/ui et Tailwind CSS.
Ajouter des composants :
npx shadcn@latest add button card dialog form
Utiliser les composants avec le style utilitaire :
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
export function Dashboard() {
return (
<div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card className="hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-2xl font-bold">Analytiques</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-muted-foreground">Consultez vos métriques</p>
<Button variant="default" className="w-full">
Voir les Détails
</Button>
</CardContent>
</Card>
</div>
)
}
Alternative : Configuration Uniquement Tailwind
Projets Vite :
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";
Guide de la Bibliothèque de Composants
Catalogue complet des composants avec motifs d'utilisation, installation et exemples de composition.
Voir : references/shadcn-components.md
Couvre :
- Composants de formulaire et de saisie (Button, Input, Select, Checkbox, Date Picker, validation de formulaire)
- Mise en page et navigation (Card, Tabs, Accordion, Navigation Menu)
- Superpositions et boîtes de dialogue (Dialog, Drawer, Popover, Toast, Command)
- Retour d'information et état (Alert, Progress, Skeleton)
- Composants d'affichage (Table, Data Table, Avatar, Badge)
Thème et Personnalisation
Configuration du thème, variables CSS, implémentation du mode sombre et personnalisation des composants.
Voir : references/shadcn-theming.md
Couvre :
- Configuration du mode sombre avec next-themes
- Système de variables CSS
- Personnalisation des couleurs et palettes
- Personnalisation des variantes de composants
- Implémentation du basculement de thème
Motifs d'Accessibilité
Motifs ARIA, navigation au clavier, support des lecteurs d'écran et utilisation accessible des composants.
Voir : references/shadcn-accessibility.md
Couvre :
- Fonctionnalités d'accessibilité de Radix UI
- Motifs de navigation au clavier
- Gestion du focus
- Annonces pour lecteurs d'écran
- Accessibilité de la validation de formulaire
Utilitaires Tailwind
Classes utilitaires principales pour la mise en page, l'espacement, la typographie, les couleurs, les bordures et les ombres.
Voir : references/tailwind-utilities.md
Couvre :
- Utilitaires de mise en page (Flexbox, Grid, positionnement)
- Système d'espacement (padding, margin, gap)
- Typographie (tailles de police, graisses, alignement, hauteur de ligne)
- Couleurs et arrière-plans
- Bordures et ombres
- Valeurs arbitraires pour un style personnalisé
Design Responsive
Points de rupture mobile-first, utilitaires responsives et mises en page adaptatives.
Voir : references/tailwind-responsive.md
Couvre :
- Approche mobile-first
- Système de points de rupture (sm, md, lg, xl, 2xl)
- Motifs d'utilitaires responsives
- Requêtes de conteneur
- Requêtes de largeur maximale
- Points de rupture personnalisés
Personnalisation Tailwind
Structure du fichier de configuration, utilitaires personnalisés, plugins et extensions de thème.
Voir : references/tailwind-customization.md
Couvre :
- Directive @theme pour les tokens personnalisés
- Couleurs et polices personnalisées
- Extensions d'espacement et de points de rupture
- Création d'utilitaires personnalisés
- Variantes personnalisées
- Organisation des couches (@layer base, components, utilities)
- Directive Apply pour l'extraction de composants
Système de Conception Visuelle
Philosophie de conception basée sur canvas, principes de communication visuelle et compositions sophistiquées.
Voir : references/canvas-design-system.md
Couvre :
- Approche philosophique du design
- Communication visuelle plutôt que texte
- Motifs systématiques et composition
- Conception des couleurs, formes et espaces
- Intégration de texte minimal
- Exécution de qualité musée
- Systèmes de design multi-pages
Scripts Utilitaires
Automatisation Python pour l'installation des composants et la génération de configuration.
shadcn_add.py
Ajouter des composants shadcn/ui avec gestion des dépendances :
python scripts/shadcn_add.py button card dialog
tailwind_config_gen.py
Générer tailwind.config.js avec un thème personnalisé :
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
Meilleures Pratiques
- Composition de Composants : Construisez des UI complexes à partir de primitives simples et composables
- Style Utilitaire : Utilisez les classes Tailwind directement ; extrayez les composants uniquement pour une vraie répétition
- Responsive Mobile-First : Commencez par les styles mobiles, ajoutez des variantes responsives en couches
- Accessibilité Avant Tout : Exploitez les primitives Radix UI, ajoutez des états de focus, utilisez du HTML sémantique
- Tokens de Design : Utilisez une échelle d'espacement cohérente, des palettes de couleurs, un système typographique
- Cohérence du Mode Sombre : Appliquez des variantes sombres à tous les éléments thématisés
- Performance : Exploitez le purging automatique du CSS, évitez les noms de classes dynamiques
- TypeScript : Utilisez la sécurité de type complète pour une meilleure expérience développeur
- Hiérarchie Visuelle : Laissez la composition guider l'attention, utilisez l'espacement et la couleur de manière intentionnelle
- Artisanat d'Expert : Chaque détail compte - traitez l'UI comme un artisanat
Navigation des Références
Bibliothèque de Composants
references/shadcn-components.md- Catalogue complet des composantsreferences/shadcn-theming.md- Thème et personnalisationreferences/shadcn-accessibility.md- Motifs d'accessibilité
Système de Style
references/tailwind-utilities.md- Classes utilitaires principalesreferences/tailwind-responsive.md- Design responsivereferences/tailwind-customization.md- Configuration et extensions
Conception Visuelle
references/canvas-design-system.md- Philosophie de conception et workflows canvas
Automatisation
scripts/shadcn_add.py- Installation des composantsscripts/tailwind_config_gen.py- Génération de configuration
Motifs Courants
Formulaire avec validation :
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
const schema = z.object({
email: z.string().email(),
password: z.string().min(8)
})
export function LoginForm() {
const form = useForm({
resolver: zodResolver(schema),
defaultValues: { email: "", password: "" }
})
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
<FormField control={form.control} name="email" render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<Button type="submit" className="w-full">Se Connecter</Button>
</form>
</Form>
)
}
Mise en page responsive avec mode sombre :
<div className="min-h-screen bg-white dark:bg-gray-900">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
Contenu
</h3>
</CardContent>
</Card>
</div>
</div>
</div>
Ressources
- Documentation shadcn/ui : https://ui.shadcn.com
- Documentation Tailwind CSS : https://tailwindcss.com
- Radix UI : https://radix-ui.com
- Tailwind UI : https://tailwindui.com
- Headless UI : https://headlessui.com
- v0 (Générateur d'UI IA) : https://v0.dev