Communitygithub.com

ui-styling

Créez des interfaces utilisateur magnifiques et accessibles avec les composants shadcn/ui (basés sur Radix UI + Tailwind), le stylisme utilitaire de Tailwind CSS et des designs visuels basés sur canvas.

Qu'est-ce que ui-styling ?

Cette compétence est conçue pour aider les développeurs et les agents IA à créer des interfaces utilisateur modernes, esthétiques et accessibles. Elle combine trois couches complémentaires : la couche composant avec shadcn/ui (basé sur Radix UI) pour des composants prêts à l'emploi et accessibles, la couche de style avec Tailwind CSS pour un design utilitaire et réactif, et la couche de conception visuelle basée sur canvas pour des compositions sophistiquées. Elle prend en charge les frameworks React comme Next.js, Vite, Remix et Astro, et offre des fonctionnalités telles que la configuration rapide de projet, l'ajout de composants via CLI, la personnalisation de thème avec mode sombre, la gestion des formulaires avec validation, et des motifs de conception responsifs. La compétence est idéale pour le prototypage rapide, la création de systèmes de design cohérents, et l'implémentation de composants d'interface complexes comme les tables de données, les formulaires, les dialogues et les menus de navigation, tout en respectant les meilleures pratiques d'accessibilité et de performance.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/alhurwitz/alberts-agentic-arsenal/tree/HEAD/skills/ui-styling
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence UI Styling

Compétence complète pour créer des interfaces utilisateur belles et accessibles, combinant les composants shadcn/ui, le stylisme utilitaire Tailwind CSS et les systèmes de conception visuelle basés sur canvas.

Références

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, mobile-first
  • Vous implémentez le mode sombre et la personnalisation de thème
  • 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 faites du 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 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 construction 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 design 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

L'interface 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 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 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 dialogues (Dialog, Drawer, Popover, Toast, Command)
  • Retour 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 de la bascule de thème

Motifs d'accessibilité

Motifs ARIA, navigation au clavier, support des lecteurs d'écran et utilisation de composants accessibles.

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é

Conception responsive

Points de rupture mobile-first, utilitaires responsifs 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 responsifs
  • 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 design 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 spatiale, des couleurs et des formes
  • Intégration de texte minimale
  • Exécution de qualité musée
  • Systèmes de design multi-pages

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

Meilleures pratiques

  1. Composition de composants : Construisez des UI complexes à partir de primitives simples et composables
  2. Stylisme utilitaire : Utilisez directement les classes Tailwind ; n'extrayez des composants que pour une véritable répétition
  3. Responsive mobile-first : Commencez par les styles mobiles, ajoutez les variantes responsives
  4. Accessibilité-first : Tirez parti des primitives Radix UI, ajoutez des états de focus, utilisez du HTML sémantique
  5. Tokens de design : Utilisez une échelle d'espacement, des palettes de couleurs et un système typographique cohérents
  6. Cohérence du mode sombre : Appliquez des variantes sombres à tous les éléments thématisés
  7. Performance : Profitez du purging automatique du CSS, évitez les noms de classe dynamiques
  8. TypeScript : Utilisez la sécurité de type complète 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'UI comme un artisanat

Navigation vers les références

Bibliothèque de composants

  • references/shadcn-components.md - Catalogue complet des 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 - Conception responsive
  • references/tailwind-customization.md - Configuration et extensions

Conception visuelle

  • 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

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community