joyeking/redesigned-portfolio

Compétence frontend anti-cliché (tasteskill)

Pages d'atterrissage, portfolios et refontes. Pas de tableaux de bord, de tableaux de données ou d'UI produit multi-étapes. Chaque règle ci-dessous est contextuelle. Rien ne se déclenche automatiquement. Lisez d'abord le brief, puis utilisez uniquement ce qui correspond.

---

0. INFÉRENCE DU BRIEF (Lire la situation avant toute chose)

Avant de toucher au code ou de modifier des réglages, inférez ce que l'utilisateur veut réellement. La plupart des designs générés par LLM sont mauvais car le modèle saute vers une esthétique par défaut au lieu de lire la situation.

0.A Lisez ces signaux en premier

1. Type de page - page d'atterrissage (SaaS / grand public / agence / événement), portfolio (développeur / designer / studio créatif), refonte (préserver vs. refondre), éditorial / blog.
2. Mots décrivant l'ambiance utilisés par l'utilisateur - "minimaliste", "calme", "style Linear", "Awwwards", "brutaliste", "grand public premium", "Apple-esque", "ludique", "B2B sérieux", "éditorial", "style agence", "vitré", "tech sombre".
3. Signaux de référence - URLs qu'ils ont liées, captures d'écran qu'ils ont collées, produits qu'ils ont nommés, marques avec lesquelles ils sont en concurrence.
4. Public cible - Comité d'achat B2B vs. consommateur soucieux du design vs. recruteur parcourant un portfolio. Le public choisit l'esthétique, pas votre goût.
5. Actifs de marque existants - logo, couleur, typographie, photographie. Pour les refontes, ce sont des matériaux de départ, pas une entrée facultative (voir Section 11).
6. Contraintes implicites - publics priorisant l'accessibilité, secteur public, industries réglementées, commerce basé sur la confiance, produits pour enfants. Ces contraintes OUTREPASSENT les préférences esthétiques.

0.B Produisez une "Analyse de conception" en une ligne avant de générer

Avant tout code, indiquez en une ligne : "Analyse : pour , avec un langage , tendance vers <système de conception ou famille esthétique>."

Exemples d'analyse :

• "Analyse : page d'atterrissage SaaS B2B pour acheteurs techniques, avec un langage minimaliste style Linear, tendance vers les utilitaires Tailwind + Geist + animations retenues."
• "Analyse : portfolio de designer solo pour recruteurs, avec un langage éditorial / typographie cinétique, tendance vers CSS natif + animation pilotée par le défilement + typographie personnalisée."
• "Analyse : refonte d'un site de service public, avec un langage priorisant la confiance, tendance vers GOV.UK Frontend ou USWDS."

0.C Si le brief est ambigu, posez une question, ne devinez pas

Posez exactement une question de clarification - jamais un tas de questions - et seulement lorsque l'analyse de conception diverge réellement. Exemple : "Devrait-on se rapprocher du style propre de Linear ou de l'expérimental d'Awwwards ?"

Si vous pouvez inférer avec confiance à partir du contexte, ne demandez pas. Déclarez simplement l'analyse de conception et procédez.

0.D Discipline anti-par défaut

Ne vous rabattez pas sur : les dégradés violet-IA, le héros centré sur fond sombre à motifs, les trois cartes de fonctionnalités égales, le glassmorphisme générique partout, les micro-animations en boucle infinie, Inter + slate-900. Ce sont les défauts des LLM. Allez au-delà délibérément en vous basant sur l'analyse de conception.

---

1. LES TROIS CADRANS (Configuration de base)

Après l'analyse de conception, réglez trois cadrans. Toute décision de mise en page, de mouvement et de densité ci-dessous est conditionnée par ceux-ci.

• DESIGN_VARIANCE: 8 - 1 = Symétrie parfaite, 10 = Chaos artistique
• MOTION_INTENSITY: 6 - 1 = Statique, 10 = Cinématique / Physique
• VISUAL_DENSITY: 4 - 1 = Galerie d'art / Aéré, 10 = Cockpit / Données denses

Référence : 8 / 6 / 4. Utilisez-les sauf si l'analyse de conception les remplace. Ne demandez pas à l'utilisateur de modifier ce fichier - les remplacements se font par conversation.

1.A Inférence des cadrans (analyse de conception → valeurs des cadrans)

Signal	VARIANCE	MOUVEMENT	DENSITÉ
"minimaliste / propre / calme / éditorial / style Linear"	5-6	3-4	2-3
"grand public premium / Apple-esque / luxe / marque"	7-8	5-7	3-4
"ludique / sauvage / Dribbble / Awwwards / expérimental / agence"	9-10	8-10	3-4
"page d'atterrissage / portfolio / site marketing (défaut)"	7-9	6-8	3-5
"confiance d'abord / secteur public / réglementé / accessibilité critique"	3-4	2-3	4-5
"refonte - préserver"	correspondre à l'existant	+1	correspondre à l'existant
"refonte - refondre"	+2	+2	correspondre à l'existant

1.B Préréglages par cas d'utilisation

Cas d'utilisation	VARIANCE	MOUVEMENT	DENSITÉ
Page d'atterrissage (SaaS, grand public)	7	6	4
Page d'atterrissage (Agence / créatif)	9	8	3
Page d'atterrissage (Grand public premium)	7	6	3
Portfolio (Designer / studio)	8	7	3
Portfolio (Développeur)	6	5	4
Éditorial / Blog	6	4	3
Service secteur public	3	2	5
Refonte - préserver	correspondre	correspondre+1	correspondre
Refonte - refondre	+2	+2	correspondre

1.C Comment les Cadrans Pilotent le Résultat

Utilisez ces valeurs (ou celles remplacées par l'utilisateur) comme variables globales. Les références croisées dans ce document font référence à ces noms de variables exacts - n'inventez jamais d'alias comme LAYOUT_VARIANCE ou ANIM_LEVEL.

---

2. BRIEF → CARTE DU SYSTÈME DE CONCEPTION

Une fois que vous avez l'analyse de conception (Section 0) et les cadrans (Section 1), choisissez la bonne fondation. N'inventez pas de CSS pour des choses qui ont un package officiel. Ne prétendez pas qu'une tendance esthétique est un système officiel.

2.A Quand utiliser un véritable système de conception (utilisez les packages officiels)

Le brief ressemble à…	Utilisez	Pourquoi
Microsoft / SaaS entreprise / tableaux de bord	@fluentui/react-components ou @fluentui/web-components	Fluent UI officiel, jetons Microsoft, accessibilité intégrée
UI de type Google, produit inspiré de Material	@material/web + jetons Material 3	Officiel, personnalisable via Material Theming
Analytique B2B / entreprise de style IBM	@carbon/react + @carbon/styles	Carbon officiel, modèles de densité de données matures
Surfaces d'application Shopify	composants Web polaris.js / Polaris React	Requis pour l'UI admin Shopify
Produit de style Atlassian / Jira	@atlaskit/* + @atlaskit/tokens	DS Atlassian officiel
Page communautaire / outil de développement de style GitHub	@primer/css ou @primer/react-brand	Primer officiel ; variante Brand pour le marketing
Service secteur public britannique	govuk-frontend	Attendu légalement / réglementairement
Secteur public américain / confiance d'abord	uswds	Identique
MVP rapide pour agence / entreprise locale	Bootstrap 5.3	Ennuyeux, rapide, fonctionne
Fondation React moderne et accessible	@radix-ui/themes	Primitives + thème soigné
SaaS moderne où vous possédez les composants	shadcn/ui (npx shadcn@latest add ...)	Vous possédez le code, facile à personnaliser ; ne livrez jamais l'état par défaut
Marketing SaaS / IA moderne basé sur Tailwind	Utilitaires Tailwind v4 + variante dark:	Par défaut pour les builds indépendants et petites équipes

Règle d'honnêteté : si le brief correspond à l'un des systèmes ci-dessus, installez et utilisez le package officiel. Ne recréez pas son CSS à la main. N'importez pas les jetons d'un système pour ensuite en remplacer 90%.

Un système par projet. Ne mélangez pas Fluent React avec Carbon dans la même arborescence. N'importez pas de composants shadcn/ui dans une application Material 3.

2.B Quand le brief est une esthétique, pas un système

Pour ces directions, il n'existe pas de package officiel unique. Construisez avec CSS natif + Tailwind + une bibliothèque de composants maintenue. Soyez honnête dans les commentaires de code sur ce qui est une inspiration empruntée vs. un matériel officiel.

Esthétique	Implémentation honnête
Glassmorphisme / "verre dépoli"	backdrop-filter, bordures en couches, superpositions de surbrillance. Fournissez un repli de remplissage uni pour prefers-reduced-transparency.
Bento (grilles de tuiles style Apple)	Grille CSS avec tailles de cellules mixtes. Aucune bibliothèque ne possède cela seule.
Brutalisme	CSS natif, espacement monospace, bordures brutes. Aucune bibliothèque.
Éditorial / Magazine	Police serif, grille asymétrique, espaces blancs généreux. Aucune bibliothèque.
Tech sombre / Hacker	Mono + accent néon, motifs de terminal. Aucune bibliothèque.
Dégradés Aurora / Mesh	SVG ou dégradés radiaux en couches. Aucune bibliothèque.
Typographie cinétique	Animations CSS natives, animations pilotées par le défilement, GSAP pour les détournements. Aucune bibliothèque.
Apple Liquid Glass	Apple documente cela uniquement pour les plateformes Apple. Il n'existe pas de liquid-glass.css officiel. Les implémentations Web sont des approximations utilisant backdrop-filter + bordures en couches + surbrillances. Étiquetez clairement comme approximation.

---

3. ARCHITECTURE ET CONVENTIONS PAR DÉFAUT

Sauf si l'analyse de conception choisit un véritable système de conception (Section 2.A), voici les valeurs par défaut :

3.A Stack

• Framework : React ou Next.js. Par défaut : Composants Serveur (RSC).
  • SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Client. Dans Next.js, enveloppez les fournisseurs dans un composant "use client".
  • ISOLATION DE L'INTERACTIVITÉ : Tout composant utilisant Motion, des écouteurs de défilement ou une physique de pointeur DOIT être une feuille isolée avec 'use client' en haut. Les Composants Serveur rendent uniquement des mises en page statiques.
• Stylisation : Tailwind v4 (par défaut). Tailwind v3 uniquement si le projet existant l'exige.
  • Pour v4 : n'utilisez PAS le plugin tailwindcss dans postcss.config.js. Utilisez @tailwindcss/postcss ou le plugin Vite.
• Animation : Motion (la bibliothèque anciennement connue sous le nom de Framer Motion). Importez depuis motion/react (import { motion } from "motion/react"). Le package framer-motion fonctionne toujours comme un alias hérité - préférez motion/react dans le nouveau code.
• Polices : Utilisez toujours next/font (Next.js) ou auto-hébergez avec @font-face + font-display: swap. Ne liez jamais les polices Google via <link> en production.

3.B État

• useState / useReducer local pour l'UI isolée.
• État global UNIQUEMENT pour éviter le forage profond de props - Zustand, Jotai, ou contexte React.
• NE JAMAIS utiliser useState pour suivre des valeurs continues pilotées par l'entrée utilisateur (position de la souris, progression du défilement, physique du pointeur, survol magnétique). Utilisez useMotionValue / useTransform / useScroll de Motion. useState re-rend l'arborescence React à chaque changement et s'effondre sur mobile.

3.C Icônes

• Bibliothèques autorisées (ordre de priorité) : @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Déconseillé : lucide-react. Acceptable uniquement lorsque l'utilisateur le demande explicitement ou que le projet en dépend déjà.
• NE JAMAIS créer d'icônes SVG à la main. Si un glyphe manque, installez une deuxième bibliothèque ou composez à partir de primitives - ne dessinez pas les chemins d'icônes à partir de zéro.
• Une famille par projet. Ne mélangez pas Phosphor avec Lucide dans la même arborescence de composants.
• Standardisez strokeWidth globalement (par ex. 1.5 ou 2.0).

3.D Politique des émojis

Déconseillé par défaut dans le code, le balisage et le texte visible. Remplacez les symboles par des glyphes de bibliothèque d'icônes. Remplacement : autorisez les émojis uniquement lorsque l'utilisateur demande explicitement une ambiance ludique / style chat / social-native - et même dans ce cas, utilisez-les avec parcimonie et intention.

3.E Réactivité et mécanismes de mise en page

• Standardisez les points de rupture (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Contenez les mises en page des pages en utilisant max-w-[1400px] mx-auto ou max-w-7xl.
• Stabilité de la zone d'affichage : N'utilisez JAMAIS h-screen pour les sections Héros pleine hauteur. Utilisez TOUJOURS min-h-[100dvh] pour éviter les sauts de mise en page sur mobile (barre d'adresse iOS Safari).
• Grille plutôt que calculs Flex : N'utilisez JAMAIS de mathématiques de pourcentage flexbox complexes (w-[calc(33%-1rem)]). Utilisez TOUJOURS la grille CSS (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Vérification des dépendances (obligatoire)

Avant d'importer UNE BIBLIOTHÈQUE TIERCE, vérifiez package.json. Si le package est manquant, affichez d'abord la commande d'installation. Ne supposez jamais qu'une bibliothèque existe.

---

4. DIRECTIVES D'INGÉNIERIE DE CONCEPTION (Correction des biais)

Les LLM se rabattent sur des clichés. Remplacez ces valeurs par défaut de manière proactive. Chaque règle a un chemin de remplacement contextuel.

4.1 Typographie

• Affichage / Titres : Par défaut text-4xl md:text-6xl tracking-tighter leading-none.

• Corps / Paragraphes : Par défaut text-base text-gray-600 leading-relaxed max-w-[65ch].

• Choix de police sans empattement :

  • Déconseillé par défaut : Inter. Choisissez d'abord Geist, Outfit, Cabinet Grotesk, Satoshi, ou une police serif adaptée à la marque.
  • Remplacement : Inter est acceptable lorsque l'utilisateur demande explicitement un style neutre / standard / Linear, ou lorsque le brief concerne un site du secteur public / priorisant l'accessibilité.

• Appariements à connaître : Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• DISCIPLINE DES SERIFS (TRÈS DÉCONSEILLÉE PAR DÉFAUT) :

  • Les serifs sont très déconseillés comme police par défaut pour tout projet. "Cela semble créatif / premium / éditorial" n'est PAS une raison pour utiliser des serifs. Le modèle mental par défaut de l'agent selon lequel "brief créatif = serif" est l'indice d'IA le plus fréquemment testé dans les cycles de production.
  • Les serifs sont uniquement acceptables lorsque l'UNE de ces conditions est explicitement vraie :
    • Le brief de la marque nomme littéralement une police serif, OU
    • La famille esthétique est véritablement éditoriale / luxe / publication / manuscrit / patrimoine / vintage ET vous pouvez exprimer pourquoi cette police serif spécifique correspond à cette marque spécifique
  • Pour tout le reste (agence créative, studio de design, marque moderne, grand public premium, portfolio, lifestyle), par défaut, utilisez une police d'affichage sans empattement (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Les polices d'affichage sans empattement ne sont pas "ennuyeuses" - elles sont la valeur par défaut pour la même raison que le noir est la valeur par défaut dans la mode.
  • RÈGLE DE MISE EN VALEUR (connexe) : Lorsque vous voulez mettre en valeur un mot dans un titre (le mouvement typographique cinétique "et spatial"), utilisez l'italique ou le gras de la MÊME police. N'injectez PAS un mot serif aléatoire dans un titre sans empattement (ou vice-versa) juste pour ajouter un intérêt visuel. La mise en valeur de famille mixte est amateure. La mise en valeur en italique/gras dans la même famille est la bonne approche.
  • Spécifiquement INTERDITS par défaut : Fraunces et Instrument_Serif (les deux polices serif d'affichage préférées des LLM).
  • Si une police serif est justifiée (rare, conformément à ce qui précède), faites tourner à partir de ce pool, ne réutilisez PAS la même police serif sur des projets consécutifs : PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I

… [tronqué pour la traduction]

Note : Le document original SKILL.md a été tronqué dans l'entrée. La traduction ci-dessus reflète la partie fournie.