Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when the user asks for design tokens, DTCG tokens, theme systems, color/typography/spacing/radius/elevation/motion tokens, translating tokens, exporting tokens, making a Compose color scheme from a palette, auditing tokens, or sharing a single token source across web and native. Generates, audits, and translates W3C DTCG tokens to Tailwind v4 @theme, CSS variables, Compose Material3 ColorScheme/Typography, SwiftUI Color/Font extensions, and WinUI ResourceDictionary while preserving semantic
.claude/skills/hashgraph-online-design-tokens/SKILL.md| Model | Eval pass | Runs |
|---|---|---|
| gemini-3.6-flash | 86% | 30 |
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 103% | 0% |
| case-02 | ✗→✓ | ▲ Improved | -26% | 0% |
| case-16 | ✗→✓ | ▲ Improved | -7% | 0% |
| case-17 | ✗→✓ | ▲ Improved | -54% | 0% |
| case-18 | ✗→✓ | ▲ Improved | -27% | 0% |
Goal: one DTCG-format JSON, four platform outputs. No drift.
../../scripts/token_export.py.Every token bundle this skill produces or consumes is in W3C Design Tokens Community Group format. Keys:
$value — the literal value$type — color | dimension | fontFamily | fontWeight | duration | shadow | typography$description — human-readable rationale (kept in the token; not a comment)Example:
json{ "color": { "brand": { "primary": { "$value": "#3b1c0f", "$type": "color", "$description": "Hero accent — used like a weapon" }, "primary-hover": { "$value": "{color.brand.primary}", "$type": "color" } } }, "spacing": { "xs": { "$value": "4px", "$type": "dimension" }, "sm": { "$value": "8px", "$type": "dimension" } }, "type": { "display": { "$value": { "fontFamily": "PP Editorial New", "fontSize": "72px", "fontWeight": 400, "lineHeight": 1.05 }, "$type": "typography" } } }
| Platform | Output target | |---|---| | Web (Tailwind v4) | @theme { --color-brand-primary: ...; } block | | Web (CSS) | :root { --color-brand-primary: ...; } | | Apple (SwiftUI) | extension Color { static let brandPrimary = ... } + Color asset catalog JSON | | Android (Compose) | ColorScheme(primary = Color(0xFF...), ...) + Typography | | Windows (WinUI 3) | <ResourceDictionary> with <Color>, <SolidColorBrush>, <x:Double> |
Use ../../scripts/token_export.py for the translation — never hand-translate. Tokens drift fast.
Three cases where token work is wrong:
State this explicitly if the user asks to "tokenize everything." Push back once.
When asked to audit a token set:
box-shadow for native, where elevation is tonal).#3b82f6 exposed as a token name)$type (some tools won't validate without it)Shipped in ../../assets/tokens/:
fluent-2.json — Microsoft Fluent 2 referencematerial3-expressive.json — M3E reference (M3E adds wave/morph tokens vs M3)apple-system.json — iOS/macOS semantic system colorsawwwards-editorial.json — bespoke "editorial Swiss" exampleawwwards-brutalist.json — bespoke "tactile brutalist" example| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 10,964 | 23,469 | +114% | 1 | 1 | 0% | 1,781 | 3,619 | +103% | 0 | 0 | — |
case-02 | fail→pass | 50,790 | 36,919 | -27% | 1 | 1 | 0% | 8,274 | 6,163 | -26% | 0 | 0 | — |
case-03 | pass→pass | 22,878 | 19,669 | -14% | 1 | 1 | 0% | 3,878 | 3,364 | -13% | 0 | 0 | — |
case-04 | pass→pass | 27,981 | 28,651 | +2% | 1 | 1 | 0% | 3,659 | 5,096 | +39% | 0 | 0 | — |
case-05 | pass→pass | 11,321 | 18,397 | +63% | 1 | 1 | 0% | 2,074 | 3,029 | +46% | 0 | 0 | — |
case-06 | pass→pass | 12,666 | 16,161 | +28% | 1 | 1 | 0% | 1,902 | 3,594 | +89% | 0 | 0 | — |
case-07 | pass→pass | 17,575 | 14,256 | -19% | 1 | 1 | 0% | 2,607 | 2,667 | +2% | 0 | 0 | — |
case-08 | pass→pass | 25,491 | 13,087 | -49% | 1 | 1 | 0% | 2,634 | 2,914 | +11% | 0 | 0 | — |
case-09 | pass→pass | 15,183 | 16,692 | +10% | 1 | 1 | 0% | 1,830 | 2,787 | +52% | 0 | 0 | — |
case-10 | pass→pass | 12,222 | 15,465 | +27% | 1 | 1 | 0% | 2,008 | 2,575 | +28% | 0 | 0 | — |
case-11 | pass→pass | 15,812 | 14,862 | -6% | 1 | 1 | 0% | 2,268 | 2,734 | +21% | 0 | 0 | — |
case-12 | pass→pass | 13,649 | 15,891 | +16% | 1 | 1 | 0% | 2,423 | 3,093 | +28% | 0 | 0 | — |
case-13 | pass→pass | 14,981 | 21,735 | +45% | 1 | 1 | 0% | 2,714 | 4,142 | +53% | 0 | 0 | — |
case-14 | pass→pass | 24,115 | 21,796 | -10% | 1 | 1 | 0% | 3,052 | 4,143 | +36% | 0 | 0 | — |
case-15 | pass→pass | 16,048 | 16,336 | +2% | 1 | 1 | 0% | 2,583 | 3,137 | +21% | 0 | 0 | — |
case-16 | fail→pass | 14,782 | 6,774 | -54% | 1 | 1 | 0% | 1,545 | 1,441 | -7% | 0 | 0 | — |
case-17 | fail→pass | 18,907 | 2,125 | -89% | 1 | 1 | 0% | 3,294 | 1,521 | -54% | 0 | 0 | — |
case-18 | fail→pass | 12,713 | 2,203 | -83% | 1 | 1 | 0% | 2,066 | 1,500 | -27% | 0 | 0 | — |
case-19 | fail→pass | 11,741 | 2,135 | -82% | 1 | 1 | 0% | 1,822 | 1,440 | -21% | 0 | 0 | — |
case-20 | pass→pass | 13,724 | 3,278 | -76% | 1 | 1 | 0% | 1,267 | 1,689 | +33% | 0 | 0 | — |
case-21 | pass→pass | 20,750 | 20,964 | +1% | 1 | 1 | 0% | 2,954 | 4,172 | +41% | 0 | 0 | — |
case-22 | pass→pass | 19,736 | 21,535 | +9% | 1 | 1 | 0% | 2,946 | 3,619 | +23% | 0 | 0 | — |
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 +27 percentage points is the difference between those two pass rates over the 22 comparable cases.
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.
Other measured skills in the registry, with their headline benchmark lift.