ui-styling

Compétence UI Styling

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 les systèmes de design visuel 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

À utiliser lorsque :

• Vous construisez une UI avec des frameworks React (Next.js, Vite, Remix, Astro)
• Vous implémentez des composants accessibles (dialogues, 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'interface 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 une sécurité de type totale
• Primitives composables pour des interfaces complexes
• Installation et gestion via CLI

Couche Style : Tailwind CSS

• Framework CSS utilitaire
• Traitement à la construction sans surcharge à l'exécution
• Design responsive mobile-first
• Tokens de design cohérents (couleurs, espacement, typographie)
• Élimination automatique du code mort

Couche Design Visuel : Canvas

• Compositions visuelles de qualité musée
• Approche de design guidée par la philosophie
• Communication visuelle sophistiquée
• Texte minimal, impact visuel maximal
• Motifs systématiques et esthétique raffinée

Chemins des scripts

Les chemins des scripts dans cette compétence et son dossier references/ sont relatifs au répertoire qui contient ce SKILL.md, et non au projet : scripts/<fichier> fait référence au dossier scripts/ de cette compétence, et ../<competence>/scripts/<fichier> fait référence à une sous-compétence sœur installée à côté. Construisez le chemin complet à partir de ce répertoire (Claude Code le signale comme répertoire de base de la compétence lors du chargement) et gardez le répertoire de travail à la racine du projet — les scripts lisent et écrivent des fichiers du projet comme docs/brand-guidelines.md, assets/design-tokens.json ou src/ relativement à celui-ci.

Démarrage rapide

Configuration Composant + Style

Installer shadcn/ui avec Tailwind :

npx shadcn@latest init

L'interface en ligne de commande 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 Tailwind uniquement

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 de 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)
• Disposition et navigation (Card, Tabs, Accordion, Navigation Menu)
• Superpositions et dialogues (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 bouton de 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 disposition, l'espacement, la typographie, les couleurs, les bordures et les ombres.

Voir : references/tailwind-utilities.md

Couvre :

• Utilitaires de disposition (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 le 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 design visuel

Philosophie de design basée sur canvas, principes de communication visuelle et compositions sophistiquées.

Voir : references/canvas-design-system.md

Couvre :

• Approche de philosophie de design
• Communication visuelle plutôt que texte
• Motifs systématiques et composition
• Couleur, forme et design spatial
• Intégration minimale de texte
• Exécution de qualité musée
• Systèmes de design multi-page

Scripts utilitaires

Automatisation Python pour l'installation de 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

Le générateur refuse de créer ou de remplacer une configuration lorsqu'un fichier frère tailwind.config.js, .cjs, .mjs ou .ts existe déjà. Examinez d'abord la configuration signalée, puis passez --force uniquement lorsque la sortie concurrente est intentionnelle :

python scripts/tailwind_config_gen.py --colors brand:blue --force

Bonnes pratiques

1. Composition de composants : Construisez des interfaces complexes à partir de primitives simples et composables
2. Style utilitaire-first : Utilisez les classes Tailwind directement ; extrayez les composants uniquement pour une véritable répétition
3. Responsive mobile-first : Commencez par les styles mobiles, superposez les variantes responsives
4. Accessibilité-first : Exploitez les primitives Radix UI, ajoutez des états de focus, utilisez du HTML sémantique
5. Tokens de design : Utilisez une échelle d'espacement cohérente, des palettes de couleurs, un système typographique
6. Cohérence du mode sombre : Appliquez des variantes sombres à tous les éléments thématisés
7. Performance : Exploitez le purge automatique du CSS, évitez les noms de classes dynamiques
8. TypeScript : Utilisez la sécurité de type totale pour une meilleure expérience développeur
9. Hiérarchie visuelle : Laissez la composition guider l'attention, utilisez l'espacement et la couleur intentionnellement
10. Artisanat expert : Chaque détail compte - traitez l'interface utilisateur comme un métier

Navigation des références

Bibliothèque de composants

• references/shadcn-components.md - Catalogue complet de composants
• references/shadcn-theming.md - Thème et personnalisation
• references/shadcn-accessibility.md - Motifs d'accessibilité

Système de style

• references/tailwind-utilities.md - Classes utilitaires principales
• references/tailwind-responsive.md - Design responsive
• references/tailwind-customization.md - Configuration et extensions

Design visuel

• references/canvas-design-system.md - Philosophie de design et workflows canvas

Automatisation

• scripts/shadcn_add.py - Installation de composants
• scripts/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