BIGboss248/nextjs-wordpress

Skill de Conception de Composants et d'UI (component-design)

Un workflow structuré de découverte et de spécification UX/UI pour concevoir des composants, sections et pages web et d'applications. Génère des spécifications de conception prêtes pour la production (design-spec.md) consommables par des outils de prototypage visuel comme stitch-design et des workflows d'implémentation de code.

---

Garde-fous et Principes Fondamentaux

[!IMPORTANT] 1. Garde-fou Zéro Code (Périmètre de Conception Pure) : Ce skill se limite strictement à l'UX, l'UI, l'architecture de mise en page, la typographie et les jetons visuels. Ne jamais générer de composants React, de directives Next.js, d'interfaces TypeScript de props ou de commandes d'installation de packages (pas de commandes CLI shadcn/Radix). L'implémentation du code est gérée par des workflows de développement en aval.

[!CAUTION] 2. Porte d'Accès aux Jetons de Conception (Règle des Jetons d'Abord) : Aucun composant ne peut être conçu sans des jetons de conception canoniques vérifiés dans docs/project.json. Les jetons manquants doivent être interrogés et persistés avant de rédiger les conceptions de composants. Voir token-verification-matrix.md.

[!TIP] 3. Règle de Conservation des Jetons (Zéro Génération d'Image Directe dans le Skill) : Ne jamais invoquer generate_image directement. Formuler des prompts structurés de génération d'images pour que l'utilisateur les génère et les place dans les répertoires du projet.

[!NOTE] 4. Recherche Sélective de Motifs (Conservation des Jetons) : Vérifier la table de routage dans references/component-design-patterns.md et charger UNIQUEMENT le fichier de composant correspondant sous references/patterns/ (par exemple hero.md). En cas de correspondance, interroger l'utilisateur lors de l'entretien adaptatif pour savoir s'il souhaite implémenter ce motif.

---

Aperçu du Workflow

flowchart TD
    Start["Invoquer /component-design<br/>(Page + Nom du Composant)"] --> Step1["Étape 1 : Contexte Dynamique & Porte des Jetons<br/>(Analyser docs/**, CONTEXT.md, jetons et motif ciblé)"]
    Step1 --> CheckTokens{"Les jetons de conception<br/>sont-ils complets dans docs/project.json ?"}
    CheckTokens -- "Jetons Manquants" --> GrillTokens["Interroger les jetons manquants<br/>(3 choix contextuels)"]
    GrillTokens --> SaveTokens["Persister dans docs/project.json"]
    SaveTokens --> Step2
    CheckTokens -- "Vérifiés" --> Step2["Étape 2 : Entretien Adaptatif Multi-Tours<br/>(Tours 1–3 + Interrogation sur le Motif Ciblé)"]
    Step2 --> Step3["Étape 3 : Formulation de Prompts d'Actifs Visuels<br/>(Fournir des prompts d'image prêts à l'emploi)"]
    Step3 --> Step4["Étape 4 : Échafaudage et Rédaction de design-spec.md<br/>(docs/design/components/[page]/[composant]/)"]
    Step4 --> Step5["Étape 5 : Audit par Sous-Agent et Auto-Réparation<br/>(invoke_subagent vérifie les garde-fous et les jetons)"]
    Step5 --> Finish["Spécification Prête pour le Transfert en Aval<br/>(Prototypage Visuel / Implémentation)"]

---

Manuel d'Exécution

Étape 1 : Découverte Dynamique du Contexte et Porte de Vérification des Jetons de Conception

1. Analyser le Contexte du Projet : Inspecter dynamiquement tous les fichiers dans docs/ et CONTEXT.md à la racine pour extraire les personas cibles, les objectifs métier et les repères de conception existants.
2. Analyser les Langues Prises en Charge : Lire project_context_and_metadata.supported_languages dans docs/project.json.
3. Vérifier les Jetons de Conception : Auditer docs/project.json sous "design_system" par rapport à token-verification-matrix.md.
4. Interroger les Jetons Manquants : Si des jetons sont absents, formuler 3 options adaptées au projet (en marquer une (Recommandée)), interroger l'utilisateur et les persister sous "design_system".
5. Recherche de Motif de Conception Ciblée : Analyser la table de routage dans references/component-design-patterns.md et visualiser UNIQUEMENT le fichier de motif de composant spécifique sous references/patterns/ s'il correspond au composant en cours de conception.

Étape 2 : Entretien Progressif Multi-Tours sur le Composant

Exécuter un entretien adaptatif en 3 tours en utilisant ask_question (ou chat interactif), en faisant une pause entre les tours pour assimiler les réponses de l'utilisateur. Consulter adaptive-grilling-rounds.md pour les formulations complètes des questions :

• Si un motif correspondant a été localisé dans references/patterns/, intégrer son questionnaire dans le Tour 1 ou le Tour 2 pour interroger explicitement l'utilisateur sur son souhait de l'implémenter.
• Tour 1 (Intention et Récit) : Clarifier le but du composant, les tâches utilisateur à accomplir et le ton émotionnel.
• Tour 2 (Hiérarchie Spatiale et Grille) : Adapter la mise en page multi-colonnes, les échelles de densité et le flux visuel focal en fonction des réponses du Tour 1.
• Tour 3 (Interactions et Accents) : Établir la dynamique des états de survol/focus, les éléments médiatiques et les nuances BiDi/RTL en fonction des Tours 1 et 2.

Étape 3 : Formulation Proactive de Prompts d'Actifs Visuels

Si le composant nécessite des graphiques sur mesure, des arrière-plans ou des icônes, formuler des prompts de génération structurés pour l'utilisateur au lieu d'appeler generate_image. Voir le format du bloc de prompt dans adaptive-grilling-rounds.md.

Étape 4 : Échafauder le Dossier du Composant et design-spec.md

1. Créer le répertoire : docs/design/components/[nom de la page]/[nom du composant]/
2. Échafauder design-spec.md en utilisant la disposition canonique en 9 sections de design-spec.template.md :
   • §1 Résumé Exécutif et Récit
   • §2 Hiérarchie Visuelle et Flux Spatial
   • §3 Grille de Mise en Page et Points de Rupture Responsive (Mobile, Tablette, Desktop)
   • §4 Jetons de Conception et Mappage des Couleurs (Clair et Sombre)
   • §5 Échelle Typographique (Par Langue Prise en Charge)
   • §6 Matrice des États d'Interaction (Par défaut, Survol, Actif, Focus, Désactivé, Squelette)
   • §7 Adaptations Bidirectionnelles (RTL)
   • §8 Accessibilité et Ergonomie (WCAG AA/AAA, cibles tactiles $\ge 44\text{px}$)
   • §9 Actifs Visuels Recommandés et Prompts

Étape 5 : Audit Qualité Indépendant par Sous-Agent (invoke_subagent)

Pour garantir une qualité impartiale, invoquer un sous-agent réviseur indépendant avant de présenter les résultats à l'utilisateur :

1. Lancer le sous-agent auditeur (TypeName: "self", Role: "Auditeur UX & Design Indépendant", Model: "inherit").
2. Utiliser le prompt d'audit structuré dans subagent-audit-protocol.md.
3. Si ISSUES_FOUND, résoudre immédiatement tous les problèmes signalés dans design-spec.md avant de conclure.

---

Transfert en Aval

Une fois que design-spec.md est approuvé et vérifié :

1. Prototypage Visuel : Déclencher stitch-design pour générer des écrans UI et des variantes de mise en page dans Google Stitch.
2. Implémentation du Code : Fournir design-spec.md aux skills d'implémentation de composants (par exemple nextjs-component-dev / nextjs-create-component).

---

Liste de Vérification d'Exécution

Avant de terminer l'exécution, confirmer :

• Aucune commande de code ou d'installation de bibliothèque (pas de CLI React, Next.js, shadcn) dans les livrables.
• Les jetons de conception canoniques dans docs/project.json sont vérifiés et complets.
• Le répertoire de sortie est structuré à docs/design/components/[page]/[composant]/.
• Les options d'interrogation ont été synthétisées dynamiquement sans hypothèses de référentiel codées en dur.
• L'interrogation du composant a suivi des tours adaptatifs progressifs.
• generate_image n'a PAS été appelé directement ; des prompts d'actifs ont été fournis à l'utilisateur.
• design-spec.md inclut les 9 sections requises.
• L'audit indépendant par sous-agent a été invoqué via invoke_subagent et tous les problèmes ont été résolus.