Skill : Création d'Interfaces Frontend Distinctives et Production-Ready

Cette skill guide la création d'interfaces frontend distinctives, production-grade, qui évitent l'esthétique générique du "AI slop". Implémente du code réel et fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.

L'utilisateur fournit les requirements frontend : un composant, une page, une application ou une interface à construire. Il peut inclure du contexte sur l'objectif, l'audience, ou les contraintes techniques.

Design Thinking

Avant de coder, comprends le contexte et engage-toi dans une direction esthétique AUDACIEUSE :

• Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
• Ton : Choisis un extrême : minimaliste brutal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/jouet, éditorial/magazine, brutaliste/brut, art déco/géométrique, doux/pastel, industriel/utilitaire, etc. Il existe tant de saveurs à exploiter. Utilise-les comme inspiration mais conçois une direction esthétique authentique.
• Contraintes : Requirements techniques (framework, performance, accessibilité).
• Différenciation : Qu'est-ce qui rend ceci INOUBLIABLE ? Quelle est l'une chose dont quelqu'un se souviendra ?

CRITIQUE : Choisis une direction conceptuelle claire et exécute-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous deux — la clé réside dans l'intentionnalité, pas l'intensité.

Implémente ensuite du code fonctionnel (HTML/CSS/JS, React, Vue, etc.) qui est :

• Production-grade et fonctionnel
• Visuellement frappant et mémorable
• Cohérent avec un point de vue esthétique clair
• Méthodiquement affiné dans chaque détail

Guidelines Esthétiques Frontend

Concentre-toi sur :

• Typographie : Choisis des polices belles, uniques et intéressantes. Évite les polices génériques comme Arial et Inter ; opte plutôt pour des choix distinctifs qui élèvent l'esthétique frontend ; des choix de police caractérisés et inattendus. Associe une police d'affichage distinctive avec une police de corps raffinée.
• Couleur & Thème : Engage-toi dans une esthétique cohésive. Utilise les CSS variables pour la cohérence. Les couleurs dominantes avec des accents aigus surpassent les palettes timides et équitablement distribuées.
• Mouvement : Utilise les animations pour les effets et les micro-interactions. Privilégie les solutions CSS uniquement pour le HTML. Utilise la librairie Motion pour React quand disponible. Concentre-toi sur les moments à fort impact : un chargement de page bien orchestré avec des révélations échelonnées (animation-delay) crée plus de plaisir que des micro-interactions dispersées. Utilise le déclenchement au scroll et des états hover qui surprennent.
• Composition Spatiale : Layouts inattendus. Asymétrie. Chevauchement. Flux diagonal. Éléments qui brisent la grille. Espace blanc généreux OU densité contrôlée.
• Arrière-plans & Détails Visuels : Crée de l'atmosphère et de la profondeur plutôt que de te fier aux couleurs unies. Ajoute des effets contextuels et des textures qui correspondent à l'esthétique générale. Applique des formes créatives comme les dégradés de maille, textures de bruit, motifs géométriques, transparences en couches, ombres dramatiques, bordures décoratives, curseurs custom, et overlays grain.

N'UTILISE JAMAIS d'esthétiques génériques générées par IA comme les familles de polices surutilisées (Inter, Roboto, Arial, polices système), les schémas de couleurs clichés (particulièrement les dégradés violets sur fonds blancs), les layouts prévisibles et les patterns de composants cookie-cutter, et le design sans caractère contexte.

Interprète créativement et fais des choix inattendus qui semblent véritablement conçus pour le contexte. Aucun design ne devrait être identique. Varie entre les thèmes clairs et sombres, différentes polices, différentes esthétiques. NE CONVERGE JAMAIS vers des choix communs (Space Grotesk, par exemple) d'une génération à l'autre.

IMPORTANT : Fais correspondre la complexité d'implémentation à la vision esthétique. Les designs maximalistes ont besoin de code élaboré avec de nombreuses animations et effets. Les designs minimalistes ou raffinés ont besoin de retenue, de précision, et une attention minutieuse à l'espacement, la typographie, et les détails subtils. L'élégance provient de l'exécution réussie de la vision.

Souviens-toi : Claude est capable d'un travail créatif extraordinaire. Ne te retiens pas, montre ce qui peut vraiment être créé quand on pense en dehors des sentiers battus et qu'on s'engage pleinement dans une vision distinctive.