spadeontop/Skills

Générateur de Contexte de Design & Moteur de Données OpenCode

Un skill système de nouvelle génération pour architecturer, tester visuellement et générer de manière interactive des systèmes de design frontend efficaces en tokens (DESIGN_CONTEXT.md) accompagnés d'un aperçu HTML en direct sans dépendance (design-preview.html).

Intègre directement le système de design de télémétrie technique monospace OpenCode Data (opencode.ai/data) extrait via l'analyse MCP des outils de développement du navigateur, avec la typographie IBM Plex Mono, un canevas obsidienne charbon (#161616), des bordures de précision 0,5 px, des tickers de statut en direct, des cartes de classement, et des tableaux de données à haute densité.

Applique strictement :

1. La règle des couleurs 60-30-10 + états de retour fonctionnels.
2. L'accessibilité mathématique WCAG 2.1 AA/AAA (minimum 4,5:1 pour le corps du texte, 3,0:1 pour les bordures/contrôles, 7,0:1 pour le texte amélioré).
3. L'architecture CDN navigateur Tailwind CSS v4 (@tailwindcss/browser@4) avec @theme et @custom-variant dark.
4. Des recettes utilitaires sémantiques efficaces en tokens (classes compactes sans gonflement CSS personnalisé).
5. Pas d'emojis (iconographie SVG nette avec trait de 1,5 px/2 px ou badges texte propres).

---

Quand l'utiliser

• Lors de l'initialisation, de la mise à niveau ou de la génération d'un DESIGN_CONTEXT.md pour toute application web ou tableau de bord.
• Lors de la création de tableaux de bord de télémétrie, de classements IA, d'outils de développement ou de plateformes denses en données inspirés d'OpenCode Data (opencode.ai/data).
• Lors de l'établissement de tokens de design, de directives d'interface utilisateur ou de normes de style pour Tailwind CSS v4 (CDN ou Vite/CLI) ou Tailwind v3.
• Lors de la fourniture d'agents IA de codage en aval avec des blueprints de composants concis et sans ambiguïté pour éviter les dérives arbitraires de codes hexadécimaux.

---

Directives et Contraintes Fondamentales

1. PAS DE VIDAGE EN UN SEUL COUP : Ne jamais générer un DESIGN_CONTEXT.md final au premier tour. Suivez le flux de travail interactif en 5 phases pour recueillir les préférences, harmoniser les tokens, vérifier mathématiquement le contraste, générer un aperçu visuel en direct, puis confirmer avec l'utilisateur.
2. RECETTES SÉMANTIQUES EFFICACES EN TOKENS : Les blueprints doivent être rédigés avec des classes utilitaires Tailwind sémantiques compactes (ex. px-4 py-2 rounded-input bg-primary text-primary-foreground) plutôt qu'avec des blocs CSS personnalisés ou des valeurs hexadécimales ponctuelles (bg-[#1a2b3c]).
3. PAS D'EMOJIS : Ne jamais utiliser d'emojis dans les contextes de design générés, les fichiers de code ou les communications avec l'utilisateur. Utilisez des spécifications SVG propres ou des badges textes concis.
4. CONFORMITÉ WCAG 2.1 AA/AAA : Toutes les combinaisons de couleurs doivent passer un test de contraste mathématique :
   • Texte du corps sur fond/surfaces : ≥ 4,5:1 (la norme AAA vise ≥ 7,0:1).
   • Icônes essentielles, bordures et contrôles de saisie : ≥ 3,0:1.
   • Texte du bouton d'appel à l'action principal : ≥ 4,5:1.
5. ARCHITECTURE CDN TAILWIND CSS V4 :
   • Pour un HTML/JS autonome sans build, utilisez <script src="https://unpkg.com/@tailwindcss/browser@4"></script>.
   • Configurez via <style type="text/tailwindcss"> en utilisant @theme et @custom-variant dark (&:where(.dark, .dark *));.
   • Le mode sombre dynamique est contrôlé via la classe .dark sur <html> avec un échange de variables CSS entre :root et .dark.

---

Références et Modulaires

Ce skill contient des références modulaires approfondies et des modèles de production :

• opencode-data-spec.md : Spécification complète du système de design OpenCode Data (IBM Plex Mono, canevas obsidienne, bordures fines, ticker de télémétrie, cartes de classement, tableaux de données, sparklines).
• archetypes.md : Préréglages organisés :
  1. OpenCode Data (Moteur technique monospace de opencode.ai/data)
  2. Linear / SaaS Dark (Noir profond, violet électrique/cyan, bordures translucides)
  3. Ultra-Minimaliste (Monochrome strict, espacement architectural, zéro dégradé)
  4. Moderne Clean Entreprise (Plus Jakarta Sans, bleus d'entreprise, grilles de cartes nettes)
  5. Terminal Financier (Nombres tabulaires, échelles de carnet d'ordres, accents profit/perte)
  6. Minimal Éditorial (Typographie d'affichage, tons papier chauds, élégance littéraire)
• semantic-tokens.md : Contrat universel de tokens 60-30-10, tokens fonctionnels et mappage de variables CSS.
• typography-scales.md : Paires de polices, échelles typographiques Tailwind et règles pour les données tabulaires.
• wcag-contrast-rules.md : Formules mathématiques de luminance relative et matrice de contraste vérifiée.
• preview.template.html : Aperçu HTML interactif en direct sans dépendance avec CDN Tailwind v4, sélecteur d'archétype et bascule de thème.
• DESIGN_CONTEXT.template.md : Modèle de blueprint en markdown complet pour les agents en aval.
• tailwind.config.template.js : Configuration exportable pour Tailwind v4 CDN, v4 CSS build et v3.
• validate-contrast.js : Script Node/navigateur pour calculer les rapports de contraste.

---

Flux de Travail Procédural (5 Phases)

Phase 1 : Recueil et Découverte

1. Vérifiez si l'utilisateur a spécifié :
   • L'archétype cible (Par défaut : OpenCode Data ou Linear / SaaS Dark).
   • La couleur de marque/d'accent souhaitée (ou proposez des accents de semence organisés : OpenCode Indigo #8190ff, Cobalt #3b5cf6, Violet Électrique #8b5cf6, Émeraude #10b981).
   • La préférence de thème cible (Double-mode par défaut, Sombre d'abord, ou Claire d'abord).
   • La pile cible (Par défaut : Tailwind CSS v4 CDN navigateur pour HTML/JS sans build, ou Vite/CLI).
2. Si non spécifié, utilisez ask_question pour clarifier les préférences de manière interactive.

Phase 2 : Harmonisation Sémantique et Mappage OpenCode Data

1. Mappez les couleurs sélectionnées à la distribution stricte 60-30-10 + états fonctionnels :
   • 60% Dominant : bg-background, bg-surface, text-foreground.
   • 30% Secondaire : bg-surface-elevated, bg-muted, text-muted-foreground, border-border, border-border-subtle.
   • 10% Accent : bg-primary, text-primary-foreground, hover:bg-primary-hover, ring-ring.
   • Fonctionnel : bg-success, bg-warning, bg-destructive, bg-info et leurs couleurs de premier plan respectives.
2. Déterminez la pile typographique appropriée :
   • Si OpenCode Data : Appliquez IBM Plex Mono globalement.
   • Si Linear / SaaS Dark : Appliquez Inter ou Geist Sans avec JetBrains Mono pour les métriques tabulaires.

Phase 3 : Validation Mathématique du Contraste WCAG

1. Calculez les rapports de contraste pour chaque paire premier plan/arrière-plan en utilisant la formule de luminance relative dans wcag-contrast-rules.md.
2. Assurez-vous :
   • Le texte du corps en mode sombre sur #161616 atteint > 15:1 (AAA).
   • Le texte secondaire atteint > 4,5:1 (AA).
   • Si l'accent est sombre, le texte de premier plan doit être #ffffff.
   • Si l'accent est un néon brillant, le texte de premier plan doit être #09090b ou #161616.
3. Présentez le tableau de la palette proposée à l'utilisateur avec les codes hexadécimaux exacts et les rapports de contraste.

Phase 4 : Aperçu Visuel en Direct Autonome (design-preview.html)

1. Générez design-preview.html à la racine du projet en remplissant preview.template.html avec les tokens résolus.
2. Informez l'utilisateur que design-preview.html est prêt à être ouvert dans son navigateur pour tester :
   • Cartes de classement OpenCode Data en direct, ticker de statut de télémétrie, et tableaux de données à haute densité.
   • Bascule de thème en direct (Sombre / Claire) avec persistance localStorage.
   • Sélecteur d'archétype dynamique (morphing entre OpenCode Data, Linear, Ultra-Minimaliste, etc. en temps réel).
   • États de boutons, champs de saisie, barre de recherche avec ⌘K, badges et modales interactifs.
3. Sollicitez les commentaires ou l'approbation de l'utilisateur.

Phase 5 : Production du DESIGN_CONTEXT.md et Export de la Configuration

Après approbation de l'utilisateur :

1. Écrivez le DESIGN_CONTEXT.md finalisé à la racine du projet en utilisant DESIGN_CONTEXT.template.md.
2. Fournissez un extrait de configuration exportable pour la pile de l'utilisateur (CDN Tailwind v4 <head> ou tailwind.config.js).
3. Conservez design-preview.html comme banc d'essai visuel vivant pour les itérations futures.