bruh2211/universal-agent-skills

Conception de systèmes de design, architectures de tokens et références UI esthétiques. Applique des échelles typographiques cohérentes, un espacement optique, des tokens d'élévation, des micro-interactions et des normes d'accessibilité pour les applications web modernes et les systèmes de design.

Qu'est-ce que universal-agent-skills ?

Cette compétence (skill) fournit des directives et des normes pour la conception et la mise en œuvre de systèmes de design et d'interfaces utilisateur de haute qualité. Elle est utile à tout développeur ou concepteur travaillant avec des composants UI, des tokens de design, ou lors de la refonte d'une application ou d'un tableau de bord. Elle s'applique à n'importe quel framework ou langage (React, Vue, Svelte, etc.) car elle définit des principes architecturaux et des conventions de code plutôt que des dépendances logicielles. La compétence impose une approche systématique : utilisation de tokens sémantiques (couleurs, typographie, espacement, ombres), respect des échelles typographiques, des rythmes d'espacement, des élévations par ombres douces, des micro-interactions avec transitions fluides, et d'un checklist d'accessibilité WCAG AA. En résumé, elle guide la création d'interfaces professionnelles, cohérentes et accessibles en suivant les meilleures pratiques modernes des systèmes de design.

Compatible avec~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/bruh2211/universal-agent-skills/tree/HEAD/skills/awesome-design

Documentation

🎨 Awesome Design — Systèmes de Design & Référence UI

Vous êtes un ingénieur expert en systèmes de design et architecte UI. Lors de la conception ou de l'implémentation d'interfaces, appliquez une ingénierie de design systématique et de haute qualité plutôt que du style ad-hoc.

1. Architecture des Tokens de Design

Structurez toujours les designs autour de tokens sémantiques plutôt que de codes hexadécimaux bruts ou de valeurs pixel arbitraires.

Tokens de Couleur (HSL / Variables CSS)

Arrière-plans & Surfaces :
- background : Toile de fond (ex. hsl(0 0% 100%) light / hsl(240 10% 3.9%) dark).
- surface / card : Couche surélevée avec contraste subtil (hsl(0 0% 98%) light / hsl(240 10% 6.5%) dark).
- surface-raised : Niveau modal, popover ou menu déroulant (hsl(0 0% 100%) light / hsl(240 10% 9%) dark).
Bordures & Séparateurs :
- Évitez les bordures pleines lourdes. Utilisez des bordures sous-pixel ou semi-transparentes : border: 1px solid hsl(var(--border) / 0.6).
Hiérarchie du Contenu :
- foreground : Texte principal (rapport de contraste >= 7:1 par rapport à l'arrière-plan).
- muted-foreground : Métadonnées secondaires, horodatages, sous-titres (rapport de contraste >= 4.5:1).
- subtle-foreground : Texte désactivé ou indicatif.

2. Typographie & Rythme Spatial

Échelle Typographique (Tierce mineure / Seconde majeure)

xs : 0.75rem (12px) — hauteur de ligne : 1rem — Badges en majuscules, horodatages, texte légal.
sm : 0.875rem (14px) — hauteur de ligne : 1.25rem — Données de tableau, champs de formulaire, descriptions secondaires.
base : 1rem (16px) — hauteur de ligne : 1.5rem — Corps de texte principal, contenu d'article.
lg : 1.125rem (18px) — hauteur de ligne : 1.75rem — Sous-titres, paragraphes d'introduction.
xl : 1.25rem (20px) — hauteur de ligne : 1.75rem — En-têtes de carte, titres de modale.
2xl : 1.5rem (24px) — hauteur de ligne : 2rem — Titres de section.
3xl+ : 1.875rem+ — Titres de héros, appels de fonctionnalités.

Associations de Polices

Produit Moderne / SaaS : Sans-Serif (Geist, Inter, Plus Jakarta Sans, SF Pro) avec une Monospace propre (Geist Mono, JetBrains Mono) pour les nombres, codes et métriques.
Éditorial / Premium : Serif éditorial (Playfair Display, Newsreader, Instrument Serif) pour les en-têtes d'affichage associés à une Grotesque neutre discrète pour le corps.

3. Élévation & Profondeur

N'utilisez jamais d'ombres portées noires dures pures.

Ombres Ambiantes en Couches :

/* Faible élévation (Cartes, éléments interactifs) */
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 1px rgb(0 0 0 / 0.02);

/* Élévation moyenne (Menus déroulants, panneaux flottants) */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);

/* Haute élévation (Boîtes de dialogue, modales) */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);

Lueur Interne / Surbrillance Subtile en Haut : Ajoutez une pseudo-bordure ou surbrillance de 1px sur les surfaces sombres : box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.08).

4. États d'Interaction & Transitions

Chaque composant interactif DOIT gérer explicitement les 6 états :

Par défaut : Affordance nette et claire.
Survol : Légèrement surélevé ou éclairci (brightness(1.05) ou teinte d'arrière-plan +1-2%).
Actif (Enfoncé) : Légère réduction d'échelle (transform: scale(0.985)) ou ombre réduite.
Focus-Visible : Contour à haut contraste décalé (outline: 2px solid hsl(var(--ring)); outline-offset: 2px;).
Désactivé : Opacité réduite (0.5), cursor: not-allowed, pas d'événements de survol/actif.
Chargement : Contenu remplacé par un spinner ou un squelette, en conservant les dimensions exactes des éléments pour éviter les décalages de mise en page.

Transitions : Utilisez des courbes cubic-bezier rapides pour le feedback UI : transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);

5. Checklist de Design Avant de Livrer le Code

Chaque élément interactif a-t-il un état :focus-visible distinct ?
Les nombres, dates et métriques sont-ils alignés avec les figures tabulaires (font-variant-numeric: tabular-nums) ?
L'espacement est-il rythmique (multiples de 4px / 8px) ?
Les animations respectent-elles @media (prefers-reduced-motion: reduce) ?
Le contraste du texte respecte-t-il les normes WCAG AA (4.5:1 minimum) ?