design-boris
> Routeur design perso de Boris. À charger dès que Boris a besoin de design, quel qu'en soit le type : site web, landing, app, UI, UX, page, composant, identité de marque, typographie, palette de couleurs, image/visuel/infographie, présentation/PPT/slides, thème, design system. Déclencheurs : "design ça", "rends ça plus beau", "fais-moi une landing/UI/page", "améliore le design", "une palette", "un visuel/une image", "un PPT/des slides", "une charte/un thème". Ce skill ne fait pas le design lui-même : il oriente vers le bon skill interne + le bon outil externe validé, et impose les défauts stack de Boris. Ne PAS charger pour du contenu purement texte (copywriting), ni pour du Notion (pas de besoin design là).
Installation & invocation
1. Crée le fichier sur ta machine :
2. Colle le contenu du SKILL.md ci-dessous, et redémarre Claude Code. Tu peux ensuite l'invoquer manuellement avec :
Claude peut aussi la déclencher automatiquement quand le contexte matche.
Routeur design perso : oriente vers le bon skill interne + le bon outil externe selon le besoin (web, UI, brand, image, slides, design system).
Contenu de la skill
Design Boris (routeur)
Quand Boris demande du design, ce skill route vers le bon skill interne et nomme le bon outil externe validé. Objectif : sortir des designs percutants au lieu de générer de zéro (le piège qui produit du médiocre). On part toujours de bases léchées (mockups, blocs, templates), puis on adapte.
Défauts stack (toujours)
- Web : Next.js 14 (App Router), shadcn/ui + @base-ui/react, Tailwind.
- Couleur : palette → tokens OKLCH + thème shadcn. Contraste WCAG AA vérifié.
- France/RGPD : analytics privacy-friendly, pas de bannière cookies lourde.
- Rédaction : français, jamais d'em-dash, ton sobre.
- Principe : partir de blocs/mockups forts, pas de génération from scratch.
Routage par besoin
| Besoin | Skills internes | Outils externes validés |
|---|---|---|
| Site / landing / app (UI) | ui-ux-pro-max, frontend-design, shadcn, web-design-guidelines, ui-styling | Stitch (direction), 21st.dev + Magic UI (blocs), Motion (anim), galeries d'inspi |
| Design system / thème | design-system, extract-design-system, theme-factory, design:design-system | OKLCH + tokens Tailwind |
| Critique / audit UX | design:design-critique, design:accessibility-review | - |
| UX research / copy UX | design:user-research, design:research-synthesis, design:ux-copy | - |
| Handoff dev | design:design-handoff, figma:figma-code-connect | Figma |
| Identité de marque | brand, brand-guidelines | Color Hunt (inspi palette) |
| Couleur / palette / thème | (intégré ui-ux-pro-max : 161 palettes) | tweakcn (éditeur thème shadcn), Coolors, Color Hunt, ColorKit |
| Image / visuel / infographie | image, canvas-design, banner-design, algorithmic-art, ad-creative | Nano Banana Pro (Gemini 3) |
| Présentation / PPT / slides | slides, pptx | Gamma (MCP connecté) |
| Maquette dans Figma | figma:figma-use, figma:figma-generate-design, figma:figma-generate-library | Figma |
| Artefact web / prototype | web-artifacts-builder | - |
Workflows clés
Web (sites / apps) : sortir du "design à chier"
- Direction visuelle : Google Stitch (stitch.withgoogle.com) génère une maquette d'écran à partir d'un prompt. Sert de base visuelle forte.
- Blocs léchés : 21st.dev et Magic UI (magicuidesign) — composants shadcn/Tailwind, dont des blocs animés. Install via la CLI shadcn (
npx shadcn@latest add "<url>") ou copie, jamais le MCP Magic payant de 21st.dev. Récupérer hero, pricing, cards. Index des registries : awesome-shadcn-ui. - Système :
ui-ux-pro-maxpour palette / typo / espacement / direction esthétique (en choisir UNE, pas de mélange). - Animation : Motion (ex Framer Motion, motiondivision/motion) pour les micro-interactions et transitions. Sobre, GPU, pas d'animation gratuite.
- Implémentation : Claude reconstruit proprement en shadcn/Tailwind, tokens OKLCH, contraste WCAG.
PPT / slides : la qualité passe par Gamma, pas le pptx brut
- Contenu + structure :
deep-research+ Claude (méthode MECE). - Design : Gamma via le MCP connecté (
generate/generate_from_template) → import du brand kit (logo, couleurs, fonts). - Skills
slides/pptxseulement si livrable .pptx natif requis.
Image / visuel
- Nano Banana Pro (Gemini 3) : excellent pour infographies, diagrammes, texte-dans-l'image, là où les générateurs classiques galèrent. Pour visuels LinkedIn, slides, schémas.
image/canvas-design/banner-designpour le reste (assets, bannières).
Couleur → thème
Voie rapide : tweakcn (éditeur visuel de thèmes shadcn) pour composer le thème et exporter directement les tokens OKLCH prêts pour shadcn. Sinon palette via Coolors (générer), Color Hunt (s'inspirer), ColorKit (shades/tints + contraste) → convertir en OKLCH + tokens Tailwind → appliquer au thème shadcn. Toujours vérifier le contraste WCAG AA.
Galeries d'inspiration (références, pas des outils)
land-book.com · godly.website · awwwards.com · mobbin.com (UI mobile). Pour piocher layout et interactions avant de construire.
Anti-patterns (à éviter)
- Générer un design de zéro sans base léchée → médiocre. Toujours partir de Stitch/21st.dev/template.
- Mélanger plusieurs directions esthétiques incohérentes. En choisir une.
- Pondre des .pptx à la main quand Gamma fait mieux.
- Le MCP Magic de 21st.dev (payant, cher) : on utilise la CLI shadcn à la place.
- Sur-outiller : pas besoin de tout, on prend le maillon qui manque pour le besoin précis.
- Notion : pas de besoin design ici, ne pas charger ce skill pour ça.
Skills proches
design
Design UI/UX complet : styling shadcn/ui & Radix, intelligence UI/UX (styles, palettes, pairings de polices, guidelines), interfaces front production-grade, design system et tokens, extraction de tokens d'un site, revue de code UI contre guidelines, polish/critique/refonte d'interface. Charge ce skill pour concevoir, construire, styliser, auditer ou améliorer une UI. design-boris reste le routeur de haut niveau.
site-architecture
When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "how should I organize my site," or "site navigation." Use this whenever someone is planning what pages a website should have and how they connect. NOT for XML sitemaps (that's technical SEO — see seo-audit). For SEO audits, see seo-audit. For structured data, see schema-markup.