Communitygithub.com

plugin87/token-build

Configurer ou exécuter le pipeline de construction des tokens — transformer les tokens DTCG tokens/*.json (source de vérité) en artefacts pour chaque plateforme (variables CSS, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) avec Style Dictionary / Tokens Studio / export W3C DTCG. Utilisez-le lorsque l'utilisateur souhaite générer des fichiers de thème pour chaque plateforme à partir des tokens, mettre en place l'intégration continue des tokens, ou obtenir une sortie multi-plateforme des tokens.

Qu'est-ce que token-build ?

Cette compétence automatise la transformation des tokens de conception au format DTCG (JSON) en artefacts prêts pour chaque plateforme cible. Elle s'appuie sur Style Dictionary (par défaut), Tokens Studio ou un script d'export W3C DTCG, et garantit le respect des règles de résolution : résolution des aliases en valeurs finales, exposition uniquement des tokens sémantiques et de composants, et émission des surcharges dark/brand/density sous forme de décalques. Les générations incluent : variables CSS `:root`, thème Tailwind v4 `@theme`, modules JS/TS typés, catalogue d'actifs iOS avec `Color.DS`/`Spacing`, et thème Android (`colors.xml`/Compose). Un pipeline CI est également prévu, déclenché sur modification des fichiers `tokens/*.json`, incluant validation des tokens, régénération automatique, et vérification de fraîcheur des artefacts commités ; un contrôle de contraste des couleurs (`scripts/contrast.py`) peut être activé. Cette compétence est utile pour maintenir une source de vérité unique des tokens et synchroniser automatiquement les thèmes sur toutes les plateformes.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence : Token Build

Transformer la source de vérité des tokens DTCG en livrables prêts pour chaque plateforme. Les tokens sont rédigés une fois ; chaque sortie de plateforme est générée.

Étapes

  1. Lire workflows/token-build.md (architecture, options d'outils, règles de résolution, cibles de sortie, CI).
  2. Choisir l'outil : Style Dictionary (multi-plateforme, par défaut), Tokens Studio (tokens issus de Figma — s'utilise avec figma-integration), export W3C DTCG, ou un petit script personnalisé (modèle sur scripts/validate_tokens.py).
  3. Respecter les règles de résolution : résoudre les alias en valeurs finales par plateforme ; exposer les tokens sémantiques et de composants (les primitifs restent internes) ; émettre les surcharges dark/brand/density (tokens/theming.json) uniquement sous forme de décalques ; formater par $type.
  4. Générer les cible(s) demandée(s) : variables CSS :root, Tailwind v4 @theme, JS/TS typé, catalogue d'actifs iOS + Color.DS/Spacing, Android colors.xml/thème Compose.
  5. Mettre en place le CI : lors d'un changement sur tokens/*.json, exécuter scripts/validate_tokens.py, régénérer, échouer si les artefacts commités sont périmés ; contrôler les couleurs avec scripts/contrast.py.

Vérification (critère de complétion)

  • python3 scripts/validate_tokens.py réussit (aucun alias non résolu).
  • La régénération ne produit aucune différence par rapport aux artefacts commités.
  • Les sorties dark/brand/density contiennent uniquement des décalques, pas de doublons complets.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community