hakushiidev/claude-skills

Cette compétence guide la création d'interfaces frontend distinctives et prêtes pour la production. Implémentez du code fonctionnel avec une attention exceptionnelle aux détails esthétiques.

Exemples de prompts

• "Construis la section hero à partir du brief"
• "Crée un composant carte dans un style scandinave"
• "Je veux que ça ressemble à un magazine japonais. Construis la mise en page."
• "Construis la page des paramètres. Utilise le style qui convient."

Avant d'écrire du code

1. Explorez d'abord la base de code existante. Scannez spécifiquement pour :

   • Répertoires de composants : components/, ui/, shared/ et listez chaque composant par son nom et ses props/API
   • Variables CSS / tokens : fichiers nommés tokens.css, variables.css, theme.css, ou déclarations :root avec des propriétés personnalisées
   • Configuration Tailwind : tailwind.config.js ou tailwind.config.ts, vérifiez theme.extend pour les valeurs personnalisées
   • Thèmes de frameworks UI : Material UI createTheme, Chakra extendTheme, shadcn globals.css et components.json
   • Storybook : répertoire .storybook/ ou fichiers *.stories.* indiquant des composants documentés
   • Chargement de polices : liens Google Fonts, déclarations @font-face, imports de polices
   • Motifs de mise en page : comment les pages existantes gèrent les grilles, conteneurs, points de rupture et espacements
   • Dépendances UI dans package.json : tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   • Si des composants existent qui correspondent partiellement ou totalement à ce que vous devez construire, étendez-les ou composez-les. Ne créez pas de doublons.

2. Comprenez le contexte :

   • Quel problème cette interface résout-elle ? Qui l'utilise ?
   • Quel est le ton émotionnel souhaité ?
   • Quelles sont les contraintes strictes (framework, appareils, performances, accessibilité) ?

3. Engagez-vous sur une direction esthétique. Soit l'utilisateur en nomme une (voir philosophies ci-dessous), soit vous en choisissez une qui correspond au contexte. Énoncez votre choix et pourquoi avant d'écrire du code.

Philosophies esthétiques

Lorsque l'utilisateur nomme une philosophie ou décrit une ambiance, utilisez-les comme guides d'implémentation concrets. Chaque philosophie définit la typographie, la couleur, la mise en page, les espacements, les animations et le traitement des détails.

Dieter Rams (Fonctionnaliste)

Moins mais mieux. Chaque élément mérite sa place. Rien de décoratif sans fonction.

• Typographie : Sans-serif propre (Helvetica Neue, Suisse Intl, Akkurat). Espacement serré des lettres sur les titres. Hauteur de ligne généreuse sur le corps. Une seule échelle de taille, utilisée strictement.
• Couleur : Retenue. Monochromatique avec un seul accent fonctionnel. Arrière-plans blancs ou gris clair. La couleur est information, pas décoration.
• Mise en page : Grille stricte. Hiérarchie fonctionnelle claire. Composants alignés sur un système spatial. Pas d'asymétrie pour elle-même.
• Espacement : Échelle mathématique cohérente (base 4px/8px). Padding généreux. Espace de respiration entre les éléments.
• Animation : Minimale. Transitions utiles uniquement (changements d'état, révélations). Pas d'animation décorative.
• Détails : Bordures et séparateurs subtils plutôt qu'ombres. Alignement précis. Coins arrondis utilisés avec parcimonie et cohérence.

Suisse / Typographie Internationale

Objectivité par la structure. La grille est sacrée. Le contenu est roi.

• Typographie : Sans-serif forts (Neue Haas Grotesk, Univers, Aktiv Grotesk). Contraste d'échelle dramatique entre titres et corps. Sous-titres en majuscules avec espacement généreux.
• Couleur : Contraste élevé. Noir, blanc et une couleur primaire. Blocs de couleur audacieux comme éléments de composition.
• Mise en page : Grille multi-colonnes rigide. Équilibre asymétrique. Texte et image en dialogue. L'alignement entre les éléments est non-négociable.
• Espacement : Défini par le module de grille. Les gouttières font partie du design, pas une réflexion après coup.
• Animation : Transitions de page et révélations déclenchées par le défilement qui respectent la grille. Pas de rebond ludique.
• Détails : Règles (lignes horizontales) comme éléments structurels. Pas de dégradés. Pas d'ombres. La platitude est le but.

Minimalisme Japonais (Ma)

L'espace négatif est contenu. La retenue communique la sophistication. Le calme plutôt que le fort.

• Typographie : Sans-serif fines ou serif élégants (Noto Sans, Cormorant). Hauteur de ligne généreuse (1.8-2.0). Taille de corps petite avec grandes marges d'espace blanc.
• Couleur : Tons naturels sourds (gris chauds, pierre, sauge, washi). Variations tonales subtiles plutôt que contrastes durs. Presque monochrome.
• Mise en page : Asymétrique mais équilibrée. Contenu décentré. Grandes zones vides intentionnelles. Le contenu flotte dans l'espace.
• Espacement : Espace blanc extrême. Padding et marges 2 à 3 fois ce qui semble "normal". Les éléments respirent.
• Animation : Fondus lents et doux (400-600ms). Pas de rebond, pas de dépassement. Transitions d'opacité plutôt que déplacements.
• Détails : Bordures très fines. Texture subtile (grain de papier, lin). Pas d'ombres marquées. Effets doux et diffus.

Brutaliste / Brut

La structure est visible. Pas de polissage. L'anti-esthétique est l'esthétique.

• Typographie : Polices système, monospace (JetBrains Mono, IBM Plex Mono, Courier), ou polices d'affichage agressives. Tailles mélangées. Texte comme texture.
• Couleur : Noir et blanc primaires. Si couleur, elle est brute et clash (jaune chantier, orange danger, vert terminal). Pas de dégradés.
• Mise en page : Bordures visibles. Boîte modèle exposée. Blocs empilés. Rugosité délibérée. Contenu d'abord, beauté jamais.
• Espacement : Serré ou intentionnellement inégal. Padding qui semble compressé.
• Animation : Aucune, ou brutale (changements d'état instantanés, coupes franches). Pas d'assouplissement.
• Détails : Contours visibles. Les éléments de formulaire par défaut du navigateur peuvent être intentionnels. Interfaces uniquement textuelles. Pas d'icônes sauf fonctionnelles.

Scandinave

Chaleur plus retenue. Beauté fonctionnelle. Accessibilité par défaut.

• Typographie : Sans-serif arrondis et amicaux (Nunito, Poppins, Circular, Cera Pro). Poids moyens. Tailles de lecture confortables.
• Couleur : Palette naturelle. Blancs chauds, bleus doux, verts sourds, argile. Accents pastel. Pas de noir pur (utilisez du charbon).
• Mise en page : Propre et ouverte. Basée sur des cartes. Coins arrondis (8-12px). Mises en page confortables et généreuses.
• Espacement : Généreux mais pas extrême. Tout semble abordable et sans encombrement.
• Animation : Assouplissement naturel et doux. Effets de survol subtils. Contenu qui se met en place.
• Détails : Ombres douces (grand flou, faible opacité). Éléments arrondis. Sous-tons chauds dans les gris. Amical pour les illustrations.

Art Déco / Géométrique

Symétrie audacieuse. Précision décorative. Déclaration et luxe.

• Typographie : Polices d'affichage géométriques (Futura, Poiret One, Josefin Sans). Titres en majuscules avec espacement extrême des lettres. Texte du corps serif pour le contraste.
• Couleur : Riche et profonde. Or/champagne, émeraude, marine, bordeaux, noir. Accents métalliques (dégradés dorés, effets chatoyants).
• Mise en page : Symétrique et centrée. Fort axe vertical. Cadres et bordures décoratifs. Profondeur en couches.
• Espacement : Structuré et formel. Le padding est architectural.
• Animation : Révélations élégantes. Animations d'entrée échelonnées. Profondeur en parallaxe.
• Détails : Motifs géométriques (chevrons, soleils, éventails). Bordures ornementales. Texture (marbre, métal brossé). Typographie statement à l'échelle hero.

Néo-Memphis

Chaos ludique. Anti-corporatif. Les formes comme personnages.

• Typographie : Mélange de poids et de styles. Les polices clash sont intentionnelles. Titres surdimensionnés. Texte incliné.
• Couleur : Primaires audacieuses et néons. Combinaisons clash (rose et jaune, bleu et orange). Pas de tons sourds. Couleur plate, pas de dégradés.
• Mise en page : Grille brisée. Éléments superposés. Formes (cercles, triangles, squiggles) comme éléments de composition. Asymétrique volontairement.
• Espacement : Dense dans certaines zones, vide dans d'autres. Le rythme est irrégulier.
• Animation : Rebondissante, ludique. Effets de survol exagérés. Éléments qui bougent, tournent ou surgissent.
• Détails : Bordures épaisses. Formes géométriques comme décoration. Motifs (points, tirets, zigzags). Ombres portées avec bords nets et couleurs vives.

Éditorial / Magazine

Design mené par le contenu. La typographie fait le gros du travail. Chaque page est une double page.

• Typographie : Serif d'affichage pour les titres (Playfair Display, Fraunces, Instrument Serif). Sans-serif propre pour le corps (DM Sans, Source Sans). Échelle dramatique (titres hero à 72-120px). Citations en exergue. Lettrines.
• Couleur : Minimale. Noir et blanc avec un accent. Couleur utilisée éditorialement (pour souligner, pas décorer).
• Mise en page : Grille de colonnes forte (3-5 colonnes). Images à fond perdu. Texte enveloppant. Largeurs de colonnes mélangées. Rythme vertical.
• Espacement : Marges généreuses. Interlignage serré sur les titres, aéré sur le corps. Espace blanc comme outil de composition.
• Animation : Révélations déclenchées par le défilement. Parallaxe sur les images. Transitions de page fluides.
• Détails : Règles fines comme séparateurs. Typographie des légendes. Métadonnées numéro/date. Détails inspirés de l'impression (folios, en-têtes courants).

Directives d'implémentation

• Typographie : Choisissez des polices distinctives chargées via Google Fonts ou CDN. Évitez les valeurs par défaut génériques (Inter, Roboto, Arial, polices système). Associez une police d'affichage avec une police de corps.
• Couleur : Utilisez des variables CSS pour la cohérence. Une couleur dominante avec des accents marqués surpasse les palettes sûres et uniformément réparties.
• Animation : Transitions CSS pour HTML. Bibliothèque Framer Motion / Motion pour React. Concentrez-vous sur les moments à fort impact (révélations de chargement de page, changements d'état) plutôt que sur des micro-interactions dispersées.
• Composition spatiale : Les mises en page inattendues attirent l'attention. Asymétrie, chevauchement, flux diagonal, éléments brisant la grille. Ou, si la philosophie l'exige, des grilles strictes exécutées avec précision.
• Arrière-plans et profondeur : Créez une atmosphère. Grilles de dégradés, textures de bruit, motifs géométriques, transparences en couches, superpositions de grain. Correspondent à la philosophie choisie.

Ne produisez JAMAIS d'esthétiques d'IA génériques : dégradés violets sur blanc, police Inter, grilles de cartes prévisibles, mises en page de composants standard. Chaque sortie doit sembler conçue pour son contexte spécifique.

Faites correspondre la complexité d'implémentation à la vision esthétique. Une interface Dieter Rams fait 50 lignes de CSS précis. Une interface Néo-Memphis fait 300 lignes de chaos créatif. Les deux sont correctes.

Mobile-First

Construisez d'abord la mise en page mobile, puis montez en échelle. Ceci est non-négociable.

• Commencez par une mise en page à une colonne à 375px de largeur.
• Ajoutez de la complexité à chaque point de rupture (media queries min-width, pas max-width).
• Les cibles tactiles doivent mesurer au moins 44x44px sur mobile.
• Le texte du corps doit mesurer au moins 16px sur mobile (empêche le zoom iOS lors de la focalisation sur un champ).
• La navigation doit avoir un motif spécifique au mobile (hamburger, onglets en bas, ou tiroir). Ne comptez pas sur des barres de navigation horizontales qui débordent.
• Testez que les longueurs de ligne restent confortables (45-75 caractères) à chaque point de rupture.

Mode sombre

Si un fichier de tokens de design existe (depuis /design-tokens), utilisez sa palette de mode sombre. Sinon, générez la prise en charge du mode sombre en parallèle du thème clair.

• Utilisez des propriétés personnalisées CSS pour que changer de thème signifie modifier les valeurs des variables, pas réécrire les composants.
• Prenez en charge à la fois la media query prefers-color-scheme (préférence système) et un attribut [data-theme="dark"] (bascule manuelle).
• N'inversez pas simplement les couleurs. Les arrière-plans sombres doivent être chauds ou froids pour correspondre à la philosophie (charbon chaud pour le scandinave, ardoise froide pour le suisse, presque noir pour le brutaliste).
• Réduisez le texte blanc pur en blanc cassé (par exemple, #E5E5E5 ou rgba(255,255,255,0.87)) pour réduire la fatigue oculaire.
• Les ombres en mode sombre doivent être plus sombres et plus transparentes, pas les mêmes valeurs qu'en mode clair.
• Les couleurs d'accent peuvent nécessiter des ajustements de luminosité pour maintenir les ratios de contraste WCAG sur les arrière-plans sombres.
• Incluez une media query prefers-reduced-motion pour les utilisateurs qui en ont besoin. Désactivez ou simplifiez toutes les animations et transitions dans cette requête.