ui-designlisted
Anti-slop UI sur tout code de composant visuel. Se charge à l'écriture/modification de : .html, .css, .scss, .sass, .less, .jsx, .tsx, .vue, .svelte, .astro, .svg, classes Tailwind, styled-components, emotion, CSS-in-JS, blocs <style>, ET à la génération d'assets — logo, favicon, image Open Graph, avatar, icône SVG, conversion svg→png. Vise des interfaces distinctives : bannit cyan/violet/glassmorphism générique, gradients indigo-blue par défaut, boutons bg-indigo-500, Inter partout, trois cartes icônes en ligne. Couvre typographie (sélection par contexte, hiérarchie, éditorial), couleur (palette marque, discipline de l'accent), layout (hiérarchie visuelle), spacing (échelle cohérente), motion (recipes), micro-interactions, responsive, accessibilité WCAG AA, cohérence marque, lois UX (Fitts, Hick, Gestalt, Anchoring…), hero rules, personnalité UI, copywriting d'interface, assets SVG et export PNG fidèle. Ne se charge PAS quand : fichiers .md, templates de référence, HTML d'email, HTML de doc/config.
vendeesign/codebloom · ★ 3 · Web & Frontend · score 69
Install: claude install-skill vendeesign/codebloom
# Design — Interfaces distinctives, zéro AI slop
Les LLMs sont des machines à moyennes statistiques. Leur corpus d'entraînement (2019–2024) est saturé de tutoriels Tailwind, démos Shadcn et clones SaaS. Le résultat par défaut est toujours le même : boutons `bg-indigo-500`, Inter partout, hero en dégradé violet-bleu, trois cartes icônes en ligne, glassmorphism comme "premium". Ce n'est pas du design — c'est de la moyenne statistique. Ce skill existe pour l'éviter.
## Pré-requis
- **Consulter `DESIGN.md`** s'il existe — les choix du projet priment sur les recommandations de ce skill
## Chargement des références
Avant de générer du code UI, **lire avec Read** les guides pertinents selon le type de travail :
| Type de travail | Références à lire |
|-----------------|-------------------|
| Landing page / site web | reference/spatial.md, reference/typography.md, reference/typography-hierarchy.md, reference/color.md, reference/personality.md |
| App / dashboard | reference/spatial.md (section dashboards), reference/interaction.md, reference/typography.md, reference/typography-hierarchy.md |
| Contenu éditorial / article long / magazine | reference/typography.md, reference/typography-hierarchy.md, reference/typography-editorial.md, reference/spatial.md |
| Composants UI / formulaires | reference/interaction.md, reference/accessibility.md |
| Animations / transitions | reference/motion.md, reference/motion-recipes.md |
| Responsive / mobile | reference/responsive.md |
| Texte /