Dans les termes du Skill
Génère des architectures de tokens de design à trois couches (primitif → sémantique → composant), des spécifications de composants et des diapositives de présentation conformes à la marque. Les tokens primitifs définissent des valeurs brutes comme --color-blue-600. Les tokens sémantiques les alias par usage (--color-primary). Les tokens de composant précisent l'usage par composant (--button-bg).
Le skill fournit des scripts de génération et de validation pour les variables CSS, l'intégration au thème Tailwind, et un système de diapositives contextuel qui utilise une recherche BM25 sur 15 structures de deck, 25 layouts, et des arcs émotionnels sparkline de Duarte. Toutes les diapositives doivent importer design-tokens.css et n'utiliser que des variables CSS. Chart.js est requis pour la visualisation de données. Prise en charge de la récupération d'images Pexels et Unsplash.
Ce qu'il produit
- Rapport de validation des tokens identifiant les valeurs codées en dur dans le code source qui devraient référencer des tokens
Fonctionnement
- 01Charger la référence d'architecture de tokens
Le skill charge references/token-architecture.md pour établir la structure de tokens à trois couches avant de générer ou de valider les tokens.
- 02Générer le CSS à partir d'une configuration JSON
Exécutez generate-tokens.cjs avec un fichier de configuration JSON pour produire un fichier CSS avec la structure de tokens à trois couches sous forme de variables CSS.
- 03Rechercher des stratégies de diapositives par objectif
Utilisez la recherche BM25 via search-slides.py pour trouver des structures de deck, des arcs émotionnels et des rythmes sparkline correspondants à partir de slide-strategies.csv, avec un filtrage optionnel par domaine (copy ou chart) et par position contextuelle.
- 04Appliquer le flux de décision contextuel
Analysez l'objectif, interrogez slide-layout-logic.csv pour le layout et l'indicateur break_pattern, slide-typography.csv pour l'échelle typographique, slide-color-logic.csv pour le traitement des couleurs, et slide-backgrounds.csv pour la catégorie d'image.
- 05Générer du HTML avec des tokens de design
Créez un HTML de diapositive qui importe assets/design-tokens.css, utilise var() pour tout le style, inclut Chart.js pour les graphiques, et ajoute des classes de navigation et d'animation issues de slide-animations.css.
- 06Valider la conformité aux tokens
Exécutez slide-token-validator.py pour vérifier que le HTML de diapositive généré utilise exclusivement des variables CSS et ne contient aucune valeur codée en dur pour les couleurs, polices ou espacements.