Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Skill: Token Build · plugin87 | DecimalAI

plugin87/token-build

NewSkillScoreMaintained

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.

Frontendby plugin87

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/plugin87-token-build/SKILL.md

decimalai skills pull plugin87-token-build --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/plugin87-token-build/SKILL.md https://app.decimal.ai/s/plugin87-token-build/SKILL.md

Raw file: /s/plugin87-token-build/SKILL.md ↗ · machine-readable summary at /s/plugin87-token-build.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 9h ago

Yes — +32% lift-15% tokens0% turns82% of whole cases pass with skill (18/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-06	✗→✓	▲ Improved	-17%	0%
case-02	✗→✓	▲ Improved	22%	0%
case-03	✗→✓	▲ Improved	-28%	0%
case-13	✗→✓	▲ Improved	-39%	0%
case-15	✗→✓	▲ Improved	-71%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

plugin87 / ux-ui-agent-skills

.claude/skills/token-build/SKILL.md

View on GitHub ↗

Imported 8/3/2026Version v1

Skill contents

SKILL.md

Skill: Token Build

Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.

Steps

Read workflows/token-build.md (architecture, tool options, resolution rules, output targets, CI).
Pick the tool: Style Dictionary (multi-platform, the default), Tokens Studio (Figma-owned tokens — pairs with figma-integration), W3C DTCG export, or a small custom script (model on scripts/validate_tokens.py).
Honor the resolution rules: resolve aliases to final values per platform; expose semantic + component tokens (primitives stay internal); emit base + dark/brand/density overrides (tokens/theming.json) as deltas only; format by $type.
Generate the requested target(s): CSS :root vars, Tailwind v4 @theme, typed JS/TS, iOS Asset Catalog + Color.DS/Spacing, Android colors.xml/Compose theme.
Wire CI: on tokens/*.json change, run scripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors with scripts/contrast.py.

Verification (definition of done)

python3 scripts/validate_tokens.py passes (no unresolved aliases).
Regenerating produces no diff vs. committed artifacts.
Dark/brand/density outputs contain only deltas, not full duplicates.

Want to see if plugin87/token-build would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/20/2026, 13:54 UTC · 22 cases

Lift

+32%

82% vs 50%

Agent turns

1.0 vs 1.0

Tokens

-15%

2,046.77 vs 2,398.86

fail → pass · 7pass → pass · 11fail → fail · 4

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-05 Our token taxonomy includes base color hex codes like `--blue-500` alongside functional roles like `color-action-primary`. Should our compiled CSS and iOS output files export both primitive and semantic tokens, or restrict what is exposed?	pass→pass	15,506	9,852	-36%	1	1	0%	2,204	1,877	-15%	0	0	—
case-06 When generating CSS custom properties for our dark theme variant, should we output a full duplicate set of all design tokens, or only the modified values? Also, where should these delta definitions be stored?	fail→pass	14,520	9,968	-31%	1	1	0%	2,419	1,998	-17%	0	0	—
case-01 We have design tokens defined in our repository following DTCG standards. Could you set up the build pipeline to compile these tokens into CSS variables, Tailwind theme rules, and TypeScript declarations for our web frontend, as well as native theme files for iOS and Android?	fail→fail	18,316	18,467	+1%	1	1	0%	3,414	4,162	+22%	0	0	—
case-02 I need to configure our token build process to handle dark mode and brand overrides cleanly. Please ensure alias references resolve correctly to their final values and that secondary theme outputs contain only the override values rather than repeating all base primitives.	fail→pass	17,372	18,213	+5%	1	1	0%	3,197	3,890	+22%	0	0	—
case-03 Can you help us wire up automated token validation and asset generation in our CI workflow? Whenever the source token definitions change, it should validate token references, check accessibility contrast, rebuild all target artifacts, and fail if the committed build outputs are out of date.	fail→pass	20,641	12,592	-39%	1	1	0%	3,703	2,648	-28%	0	0	—
case-04 We want to transform our multi-platform design tokens into build artifacts for web, iOS, and Android without Figma dependencies. We need an open-source build framework capable of handling cross-platform transformations out of the box. Which tool should we standardise on?	pass→pass	13,043	12,625	-3%	1	1	0%	2,021	2,564	+27%	0	0	—
case-07 Our design token parser needs to determine whether a token value represents a color, a dimension, or a font weight. How should the build system format and categorize tokens across platforms?	pass→pass	17,739	14,768	-17%	1	1	0%	3,099	3,039	-2%	0	0	—
case-08 We are updating our web styling stack to modern Tailwind. What specific CSS directive or target block should our token pipeline generate to provide design tokens to Tailwind v4?	pass→pass	11,091	8,681	-22%	1	1	0%	1,739	1,865	+7%	0	0	—
case-09 What specific file formats and structures should our design token build output generate for native iOS applications?	fail→fail	16,429	13,461	-18%	1	1	0%	2,897	2,903	+0%	0	0	—
case-10 What specific Android layout and framework files should be produced by our token compilation pipeline?	fail→fail	17,378	9,489	-45%	1	1	0%	2,777	1,887	-32%	0	0	—
case-11 We are configuring GitHub Actions for design token compilation. Which file path pattern should trigger the automated token validation and regeneration job?	pass→pass	18,334	4,084	-78%	1	1	0%	1,349	905	-33%	0	0	—
case-12 We need automated WCAG accessibility checks in our token compilation pipeline to block invalid color pairings before deployment. What script file should be executed for color contrast gating?	fail→fail	16,349	1,736	-89%	1	1	0%	2,872	527	-82%	0	0	—
case-13 How do developers verify locally that no broken or unresolved alias references exist across our token files before pushing code?	fail→pass	13,455	6,326	-53%	1	1	0%	2,213	1,346	-39%	0	0	—
case-14 What git verification step determines whether the generated token artifacts in a pull request are up to date with the token sources?	pass→pass	7,891	5,422	-31%	1	1	0%	1,100	1,093	-1%	0	0	—
case-15 If a developer needs to build a lightweight custom script for token inspection instead of using standard CLI tools, which existing python script in the repository should serve as the blueprint?	fail→pass	11,691	2,806	-76%	1	1	0%	1,884	546	-71%	0	0	—
case-16 Our design team manages design tokens directly in Figma using Tokens Studio. Which complementary integration skill should be paired with this workflow?	fail→pass	10,474	3,448	-67%	1	1	0%	1,620	794	-51%	0	0	—
case-17 How should web applications consume design tokens in type-safe React components generated by our token pipeline?	pass→pass	16,691	13,193	-21%	1	1	0%	2,882	2,552	-11%	0	0	—
case-18 When semantic tokens reference abstract aliases like `alias.color.brand.primary`, when and how should those aliases be converted into raw values during compilation?	pass→pass	16,575	13,853	-16%	1	1	0%	2,647	2,387	-10%	0	0	—
case-19 Where in the project repository are the architectural rules, tool options, output targets, and resolution rules documented?	fail→pass	8,366	1,433	-83%	1	1	0%	1,288	502	-61%	0	0	—
case-20 How do I programmatically create interactive component variants and auto-layout frames inside a Figma design library using the Figma REST API?	pass→pass	14,829	17,284	+17%	1	1	0%	2,872	3,658	+27%	0	0	—
case-21 How do I configure CSS container queries using `@container` and inline-size to make a card component adjust its layout based on wrapper element width?	pass→pass	11,277	11,169	-1%	1	1	0%	2,064	2,390	+16%	0	0	—
case-22 How do I write a custom Style Dictionary JavaScript transform function using `StyleDictionary.registerTransform` to convert pixel values to rem units?	pass→pass	13,794	7,030	-49%	1	1	0%	2,514	1,496	-40%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +32 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 50%
Pass rate with the skill: 81.8%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/20/2026, 13:54 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-06

Prompt

When generating CSS custom properties for our dark theme variant, should we output a full duplicate set of all design tokens, or only the modified values? Also, where should these delta definitions be stored?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested today

Other measured skills in the registry, with their headline benchmark lift.