Workflow Frontend & Design
Un routeur, pas un monolithe. Cette compétence n'effectue pas elle-même le travail de conception — elle décide quelle compétence spécialisée s'exécute quand, et applique les disciplines qui empêchent le résultat de ressembler à une production IA. Le véritable artisanat réside dans les compétences sous-jacentes listées dans references/skill-registry.md.
Principes de fonctionnement
- Router, ne pas réinventer. Chaque étape ci-dessous nomme la compétence qui la possède. Si cette compétence n'est pas installée,
references/skill-registry.mdindique où l'obtenir. Ne réimplémentez pas le travail d'une compétence en ligne. - Rechercher avant les pixels. N'ouvrez jamais une toile vierge à froid. L'étape 1 est un prérequis permanent pour toute tâche de conception réelle.
- À la demande, pas automatique. Cette compétence est invoquée délibérément (par nom / commande slash). Elle n'installe aucun hook et ne déclenche rien par elle-même. Les étapes de réplication (clonage / extraction) sont proposées ; c'est l'utilisateur qui appuie sur le bouton.
- Anti-slob est un verrou, pas une suggestion. L'étape 3 s'exécute avant le « terminé ». Échouer à une règle anti-slob de niveau P0 est une régression, pas une préférence de goût.
- Vérifier avec un passage séparé. La compétence qui a produit l'interface ne l'approuve pas. La révision est une piste distincte (
design-review/ un réviseur frais).
Le workflow
┌── Étape 4 : PILE & VOCABULAIRE (couche de référence — consultée tout au long) ──┐
│ tech-stack.md · design-vocabulary.md │
└───────────────────────────────────────────────────────────────────────────────────┘
IDÉE ─▶ Étape 1 : RECHERCHE ─▶ Étape 2 : PRODUCTION ─▶ Étape 3 : RÉVISION ─▶ LIVRAISON
(recherche + décision (direction + (anti-slob +
de clonage) construction hi-fi) porte d'accès a11y)
Étape 1 — Recherche + décision de clonage → references/stage-1-research-and-clone.md
Avant de concevoir, effectuez un cycle de recherche de mouvements concurrents, puis décidez de la voie de réplication (inspiration seulement / clonage du site complet / extraction d'un seul effet). Possède l'arbre de décision qui enchaîne deep-research → web-clone → web-shader-extractor.
Étape 2 — Production design + direction → references/stage-2-design-output.md
Produisez le prototype haute-fidélité / la page / le composant. Lorsque le brief est vague, passez d'abord en mode conseiller de direction design. Route vers huashu-design / frontend-design et leurs satellites (mouvement, couleur, graphiques, diapositives, art algorithmique).
Étape 3 — Révision + porte anti-slob → references/stage-3-review-anti-slop.md
Exécutez la checklist anti-slob des sept péchés capitaux, les contraintes de discipline d'animation, la base d'accessibilité, et un passage de revue design séparé. C'est la porte de livraison.
Étape 4 — Pile + vocabulaire → references/stage-4-stack-and-vocab.md
La couche de référence, pas une étape séquentielle. Choisissez les bibliothèques depuis tech-stack.md ; nommez les mécanismes (pas les symptômes) en utilisant design-vocabulary.md lors de la rédaction de prompts ou de la révision. Consultée pendant les étapes 1 à 3, jamais ignorée lorsqu'une dépendance ou une description imprécise apparaît.
Tableau de routage rapide
| L'utilisateur… | Aller à | Compétence(s) principale(s) |
|---|---|---|
| Commence une tâche UI réelle | Étape 1 d'abord | deep-research |
| « Répliquer ce site entier » | Étape 1 → branche clonage | web-clone |
| « Prendre juste cet effet de fond » | Étape 1 → branche extraction | web-shader-extractor |
| « Construire un prototype / une page / un composant » | Étape 2 | huashu-design, frontend-design |
| « Je ne sais pas quel style je veux » | Étape 2, mode conseiller | huashu-design, creative-director |
| « Faire en sorte que ça ait l'air bien / moins IA » | Étape 3 | design-review, checklist anti-slob |
| « Qu'est-ce que je devrais utiliser pour X ? » | Étape 4 | tech-stack.md |
| « Comment s'appelle cet effet ? » | Étape 4 | animation-vocabulary |
Notes sur la provenance
Cette compétence est une couche d'orchestration créée pour séquencer un ensemble de compétences appartenant à des tiers. Elle regroupe uniquement du matériel de référence original/curaté (references/design-vocabulary.md, references/tech-stack.md, et les guides d'étape). Chaque compétence tierce vers laquelle elle route est créditée avec sa source dans references/skill-registry.md et n'est pas redistribuée ici — installez-les séparément. Voir README.md pour la liste complète des attributions.