Communitygithub.com

plugin87/design-tokens

Générer, étendre ou auditer des jetons de conception au format DTCG avec l'architecture à 3 niveaux (primitif → sémantique → composant). Utilisez cette compétence lorsque l'utilisateur souhaite une palette de couleurs, une échelle typographique, des jetons d'espacement/ombre/rayon/mouvement, un thème multi-marque, ou valider des fichiers de jetons. Couvre les couleurs, la typographie, l'espacement, les ombres, les bordures, les points de rupture, le mouvement, les dégradés, l'opacité, le flou, les dimensions, les états, le thème.

Qu'est-ce que design-tokens ?

Cette compétence pour agent IA permet de générer, étendre ou auditer des jetons de conception (design tokens) dans le format DTCG (Design Tokens Community Group), en respectant une architecture à trois niveaux : jetons primitifs (valeurs brutes jamais utilisées directement), sémantiques (alias de finalité) et de composant (limités au composant). Elle prend en charge la création de palettes de couleurs OKLCH avec 11 nuances, la génération d'échelles typographiques basées sur une échelle majeure tierce, ainsi que des jetons pour espacement, ombres, bordures, points de rupture, mouvement, dégradés, opacité, flou, dimensions, états et thème multi-marque. La compétence lit les règles du projet (`tokens-and-color.md` et `typography-and-spacing.md`) et les fichiers existants dans le dossier `tokens/` pour garantir la cohérence. Elle inclut une étape de validation obligatoire via un script Python (`validate_tokens.py`) pour vérifier la validité JSON et la résolution des alias, et peut utiliser un script de vérification d'accessibilité (`contrast.py`). Le résultat est un fichier JSON DTCG avec une description (`$description`) pour chaque jeton, favorisant la référence aux alias plutôt que les valeurs codées en dur.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens
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 : Jetons de conception (Design Tokens)

Produire et maintenir des jetons DTCG ($type/$value) en suivant le système à 3 niveaux du projet.

Étapes

  1. Lire .claude/rules/tokens-and-color.md → "Système de jetons" + "Règles de couleur" et .claude/rules/typography-and-spacing.md pour les règles (base 4px, échelle majeure tierce, génération de palette OKLCH, mode sombre au niveau sémantique).
  2. Lire les fichiers existants pertinents dans tokens/ pour correspondre à la structure : colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json.
  3. Générer/étendre les jetons :
    • Primitifs = valeurs brutes (jamais utilisées directement). Sémantiques = alias de finalité. Composant = limités au composant.
    • Nouvelles palettes : générer 11 nuances OKLCH ; vérifier que 500 ≥ 4,5:1 sur fond blanc (texte), 600 ≥ 3:1 (UI) à l'aide de la compétence a11y-audit / scripts/contrast.py.
    • Multi-marque/densité → theming.json.
  4. Valider : exécuter python3 scripts/validate_tokens.py (validité JSON + résolution des alias).

Résultat attendu

JSON DTCG. Conserver $description sur chaque jeton. Référencer, jamais coder en dur.

Individual skills in this repo

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

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/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

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/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community