alvinindra/modern-frontend-skills

Frontend moderne — Routeur de packs

Le pack contient six directions. Chacune repose sur le même socle artisanal (le canon d'animation Emil Kowalski + le filtre anti-slop) mais répond à une question de design différente. Le rôle du routeur est de choisir la bonne direction rapidement, puis de s'effacer.

L'identité du pack n'est pas « le bon goût général ». Elle est spécifiquement : la confiance cinématique du travail de Louis Paquet / Locomotive + le savoir-faire invisible d'Emil Kowalski. Chaque direction est organisée par rapport à cet axe. Les pages construites à partir de ce pack doivent sembler à la fois dirigées (Louis Paquet) et fabriquées (Emil Kowalski).

---

Les six directions

Direction	Question à laquelle elle répond
cinematic-scroll	« Comment faire du produit le récit de la page ? »
motion-bento	« Comment montrer une surface produit fonctionnelle dans un contexte marketing ? »
publication	« Comment faire en sorte que la page se lise comme un article conçu ? »
nightside	« Comment donner à cette marque une ambiance after-hours, réfléchie, sans clinquant ? »
modernist-grid	« Comment laisser la typographie et la grille faire tout le travail ? »
considered-modern	« Comment rendre cela chaleureux et professionnel, sans froideur de startup ? »

Une direction est choisie, pas négociée. Le pack ne produit pas de résultat hybride sauf si l'utilisateur le demande explicitement.

---

Choisir la direction

Le routeur décide dans cet ordre :

1. Nom explicite. Si l'utilisateur tape cinematic-scroll, motion-bento, publication, nightside, modernist-grid ou considered-modern, diriger vers celle-ci. Accepter également les formulations proches — voir § Alias ci-dessous.
2. Signaux de phrase. Si l'utilisateur utilise l'une des phrases à fort signal listées dans § Routage par phrase, diriger vers la direction correspondante.
3. Inférence du brief. Lire le brief — produit, public, ambiance, densité, énergie — et choisir la meilleure correspondance à l'aide des § Règles d'inférence.

Le routeur ne demande pas à l'utilisateur de choisir dans un menu. Il choisit et explique son choix en une phrase en haut de la sortie (« Direction nightside — la marque veut une confiance tardive plutôt qu'un polissage de startup. »).

Alias

• cinematic, cinematic product, scrolltell, product launch, immersive → cinematic-scroll
• bento, premium bento, motion engine, SaaS feature grid, archetype bento → motion-bento
• editorial, editorial premium, magazine, publication, design journal → publication
• dark luxe, dark luxury, moody premium, late night UI, after hours → nightside
• swiss, swiss system, swiss design, modernist, grid system, typographic poster → modernist-grid
• warm modern, humane modern, studio site, professional services → considered-modern

Routage par phrase (sans nom explicite)

• « lancement produit » / « matériel » / « piloté par le scroll » / « donne l'impression d'un film » → cinematic-scroll
• « landing page SaaS » / « section fonctionnalités » / « page produit IA » / « bento » → motion-bento
• « magazine » / « piloté par l'image » / « publication » / « studio de design » → publication
• « sombre » + « premium » / « restaurant » / « hôtellerie » / « exclusif » → nightside
• « rationnel » / « grille » / « Suisse » / « poster typographique » / « institutionnel » → modernist-grid
• « services professionnels » / « site d'agence » / « chaleureux » / « cabinet de conseil » / « studio » → considered-modern

Règles d'inférence (lorsque le brief est vague)

• Arc narratif fort + produit en tant que protagoniste → cinematic-scroll
• Montrer ce que le produit fait dans des surfaces miniatures → motion-bento
• Guidé par la typographie avec séquencement d'images organisé → publication
• Guidé par l'ambiance avec un espace négatif profond → nightside
• Guidé par la grille avec une couleur structurelle → modernist-grid
• Voix de studio avec photographie réelle → considered-modern

Si deux directions semblent en compétition, choisir celle qui correspond le mieux à la confiance de la marque : une marque de montres premium voudra probablement nightside, pas motion-bento. Un outil B2B d'observabilité voudra motion-bento, pas cinematic-scroll.

---

Le modèle à deux couches du pack

Chaque résultat est le produit de deux couches, appliquées dans cet ordre :

Couche 1 — Direction

Le skill.md du dossier de style choisi est le brief de design. Il définit :

• Le calibrage du cadran (ligne de base variance / mouvement / densité) pour cette direction.
• Les trois mouvements signatures qui rendent cette direction reconnaissable.
• Les matériaux : typographie, couleur, mise en page, traitement de surface.
• La chorégraphie de mouvement appropriée à cette direction.
• Les marqueurs de mauvais style (signaux de slop spécifiques à cette direction).
• Un artefact de référence pour le calibrage du ton.

Couche 2 — Canon artisanal (universel)

Deux fichiers s'appliquent à chaque résultat, quelle que soit la direction. L'agent les lit après avoir choisi la direction :

• references/animation.md — le canon d'animation Emil Kowalski. Cadre décisionnel (easing d'abord, cadre d'utilisabilité, fréquence, objectif, durée), courbes d'easing, la checklist artisanale (pression de bouton, origine de déclenchement du popover, entrées scale(0.95), minutage asymétrique, vélocité du geste), notes de provenance sur les règles provenant directement d'Emil et celles adaptées à la compétence.
• references/forbidden.md — le filtre anti-slop. Anti-patrons visuels / typographiques / de mise en page / de contenu / de composants / React-Framer + la checklist de pré-vol qui doit être validée avant la sortie.

C'est ainsi que le pack définit le « premium » au niveau artisanal. Un bouton modernist-grid se presse toujours sur :active. Un popover publication s'agrandit toujours depuis son déclencheur. Les motifs interdits s'appliquent également aux six directions.

---

Connaissances des composants — ouvrir les fichiers

Après avoir choisi une direction, l'agent consulte la recherche partagée sur la bibliothèque de composants :

• components/style-recipes.md — Mappe chaque direction aux patrons spécifiques de chaque bibliothèque qui la renforcent (quelles démos GSAP, quelles primitives Framer, quelles recettes Aceternity, quels composants 21st.dev). Ouvrir ceci en premier.
• components/gsap-patterns.md — Recettes GSAP + ScrollTrigger + Lenis pour les directions cinématiques.
• components/motion-libraries.md — Patrons Framer Motion, notes React Bits, notes Aceternity UI (lorsqu'appliqués avec soin).
• components/component-libraries.md — Primitives 21st.dev, règles de personnalisation shadcn, application de l'origine du popover Radix.

Les utiliser comme recherche, pas comme modèles. Tout élément copié-collé brut se lira comme un kit ; personnaliser en fonction de la direction choisie.

---

Règles de sécurité générales du pack — appliquées inconditionnellement

Elles ne dépendent jamais de la direction ou du brief. Elles s'appliquent à chaque résultat.

• Pas d'emojis. Nulle part — code, balisage, contenu, texte alternatif. Utiliser les icônes Phosphor ou Radix.
• Vérification des dépendances. Avant d'importer framer-motion, lucide-react, @phosphor-icons/react, @radix-ui/react-icons, zustand, etc., vérifier package.json. S'il manque, afficher d'abord la commande d'installation.
• Verrouillage de version Tailwind. Vérifier package.json pour v3 vs v4.
• Stabilité de la zone d'affichage. Jamais h-screen. Toujours min-h-[100dvh] pour toute surface plein écran.
• Verrouillage de famille d'icônes. Phosphor OU Radix, pas les deux. Épaisseur de trait 1,5 ou 2,0.
• Pas d'Inter, Roboto ou sans-serif système comme identité.
• Pas de #000000 pur. Utiliser un noir ajusté.
• L'Interdiction Lila. Pas de lueur dégradée IA violette/bleue.
• Pas d'entrées scale(0). Toujours scale(0.95) + opacity: 0.
• Pas de ease-in sur l'interface. Toujours ease-out avec un cubic-bezier personnalisé.

---

Le seuil de qualité

Chaque résultat doit franchir cette barre, quelle que soit la direction :

• Pourrait être extrait en capture d'écran de n'importe quelle section et être perçu comme délibéré.
• Resterait spécifique même avec le logo retiré. Si une autre marque pouvait s'échanger sans tension, le travail a échoué.
• Contient des médias visuels réels (photographie, rendus, illustrations) dans le hero ou les deux premières sections lorsque l'image serait bénéfique.
• Traite les « médias visuels » comme de véritables images, pas des dégradés / particules / shaders.
• Inclut les états d'interaction (chargement, vide, erreur, survol, focus, actif) qui correspondent au rythme de la direction.
• Passe la pré-vol dans references/forbidden.md avant d'être déclaré terminé.

---

Lorsque le brief est large

Le routeur choisit la direction plausible la plus forte et s'engage. Il ne tergiverse pas.

Si le brief est ambigu entre deux directions, le choix va à celle qui préserve le mieux la confiance de la marque. Une marque artisanale va vers cinematic-scroll ou nightside avant motion-bento. Une plateforme B2B va vers motion-bento ou modernist-grid avant publication.

Si le brief est large d'une manière qui ne correspond bien à aucune direction, c'est en soi le signal : le brief doit être affiné avant le code. Poser une question de clarification, puis s'engager.

---

Exemples du pack — pour le ton, pas pour le contenu

Deux artefacts de référence se trouvent dans exemples/ :

• exemples/cinematic-landing.html — Maris & Co., voiliers de Newport depuis 1947. Une page cinematic-scroll de bout en bout : mât asymétrique, lettre persistante, bento inventaire, citation bleu nuit profond, CTA magnétique, pied de page colophon, rythme en trois actes.
• exemples/bento-saas.tsx — Morse, workflow de bibliothèque de design sonore pour studios de jeux. Une page motion-bento avec les cinq archétypes connectés.

Les lire pour le calibrage du ton. Ne pas copier littéralement. Chaque page doit inventer son propre monde.