design-tokens

Name: design-tokens
Author: f0d010c

19stars0forks

How to install design-tokens?

f0d010c/stark/design-tokens

$npx -y skills add f0d010c/stark --skill design-tokens

Installs into the current project.

Summary

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 nati

Files · 1

View on GitHub

SKILL.md

1	# design-tokens — single source, every platform
2
3	Goal: one DTCG-format JSON, four platform outputs. No drift.
4
5	## What This Skill Can Do
6
7	- Generate and audit W3C DTCG token bundles for color, typography, spacing, radius, motion, shadow/elevation, and semantic state roles.
8	- Translate one source token JSON to Tailwind, CSS variables, Compose, SwiftUI, and WinUI using `../../scripts/token_export.py`.
9	- Catch token drift, raw/semantic naming mistakes, unsupported platform values, circular references, and single-platform-only token systems.
10	- Advise when tokens are wrong for the job, such as bespoke campaign pages that need art direction more than a reusable system.
11
12	## Step 1 — Source format: W3C DTCG
13
14	Every token bundle this skill produces or consumes is in W3C Design Tokens Community Group format. Keys:
15	- `$value` — the literal value
16	- `$type` — `color \| dimension \| fontFamily \| fontWeight \| duration \| shadow \| typography`
17	- `$description` — human-readable rationale (kept in the token; not a comment)
18
19	Example:
20
21	```json
22	{
23	"color": {
24	"brand": {
25	"primary": { "$value": "#3b1c0f", "$type": "color", "$description": "Hero accent — used like a weapon" },
26	"primary-hover": { "$value": "{color.brand.primary}", "$type": "color" }
27	}
28	},
29	"spacing": {
30	"xs": { "$value": "4px", "$type": "dimension" },
31	"sm": { "$value": "8px", "$type": "dimension" }
32	},
33	"type": {
34	"display": {
35	"$value": { "fontFamily": "PP Editorial New", "fontSize": "72px", "fontWeight": 400, "lineHeight": 1.05 },
36	"$type": "typography"
37	}
38	}
39	}
40	```
41
42	## Step 2 — Platform translation matrix
43
44	\| Platform \| Output target \|
45	\|---\|---\|
46	\| Web (Tailwind v4) \| `@theme { --color-brand-primary: ...; }` block \|
47	\| Web (CSS) \| `:root { --color-brand-primary: ...; }` \|
48	\| Apple (SwiftUI) \| `extension Color { static let brandPrimary = ... }` + `Color` asset catalog JSON \|
49	\| Android (Compose) \| `ColorScheme(primary = Color(0xFF...), ...)` + `Typography` \|
50	\| Windows (WinUI 3) \| `<ResourceDictionary>` with `<Color>`, `<SolidColorBrush>`, `<x:Double>` \|
51
52	Use `../../scripts/token_export.py` for the translation — never hand-translate. Tokens drift fast.
53
54	## Step 3 — When you should NOT generate tokens
55
56	Three cases where token work is wrong:
57	1. The user wants ONE platform — let that platform skill use its native idiom directly. Tokens are for reuse.
58	2. The brief is "Awwwards-tier landing page" — tokens flatten the bespoke choices that make it distinctive.
59	3. The team has no system to maintain. Tokens without governance become stale faster than they help.
60
61	State this explicitly if the user asks to "tokenize everything." Push back once.
62
63	## Step 4 — Auditing existing tokens
64
65	When asked to audit a token set:
66
67	1. Coverage check — does it cover the 5 layers? color (semantic + raw), spacing, typography, motion, elevation/material.
68	2. Semantic vs raw discipline — are there "primary-button-bg" tokens (semantic) AND "blue-500" tokens (raw)? Both layers, no shortcuts.
69	3. Reference resolution — semantic tokens must reference raw, never the inverse.
70	4. Dark mode parity — every semantic color has a dark variant.
71	5. Platform-specific bans — flag any token that won't survive translation (e.g. CSS `box-shadow` for native, where elevation is tonal).
72
73	## Step 5 — Anti-slop ban list (token-specific)
74
75	- Hex colors with no semantic name (`#3b82f6` exposed as a token name)
76	- 100+ raw colors with no semantic layer
77	- Spacing scales that aren't 4-based on Windows/Android, 8-based on Apple, fluid on web
78	- One token bundle declared "the source of truth" but only generated for web (the most common failure)
79	- Tailwind classes baked into tokens (defeats translation)
80	- Skipping `$type` (some tools won't validate without it)
81
82	## Step 6 — Reference token bundles
83
84	Shipped in `../../assets/tokens/`:
85	- `fluent-2.json` — Microsoft Fluent 2 reference
86	- `material3-expressive.json` — M3E reference (M3E adds wave/morph tokens vs M3)
87	- `apple-system.json` — iOS/macOS semantic system colors
88	- `awwwards-editorial.json` — bespoke "editorial Swiss" example
89	- `awwwards-brutalist.json` — bespoke "tactile brutalist" example

People who liked this also viewed

6 picks

Type

design-tokens

19stars0forks

View on GitHub

How to install design-tokens?

f0d010c/stark/design-tokens

$npx -y skills add f0d010c/stark --skill design-tokens

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# design-tokens — single source, every platform
2
3	Goal: one DTCG-format JSON, four platform outputs. No drift.
4
5	## What This Skill Can Do
6
7	- Generate and audit W3C DTCG token bundles for color, typography, spacing, radius, motion, shadow/elevation, and semantic state roles.
8	- Translate one source token JSON to Tailwind, CSS variables, Compose, SwiftUI, and WinUI using `../../scripts/token_export.py`.
9	- Catch token drift, raw/semantic naming mistakes, unsupported platform values, circular references, and single-platform-only token systems.
10	- Advise when tokens are wrong for the job, such as bespoke campaign pages that need art direction more than a reusable system.
11
12	## Step 1 — Source format: W3C DTCG
13
14	Every token bundle this skill produces or consumes is in W3C Design Tokens Community Group format. Keys:
15	- `$value` — the literal value
16	- `$type` — `color \| dimension \| fontFamily \| fontWeight \| duration \| shadow \| typography`
17	- `$description` — human-readable rationale (kept in the token; not a comment)
18
19	Example:
20
21	```json
22	{
23	"color": {
24	"brand": {
25	"primary": { "$value": "#3b1c0f", "$type": "color", "$description": "Hero accent — used like a weapon" },
26	"primary-hover": { "$value": "{color.brand.primary}", "$type": "color" }
27	}
28	},
29	"spacing": {
30	"xs": { "$value": "4px", "$type": "dimension" },
31	"sm": { "$value": "8px", "$type": "dimension" }
32	},
33	"type": {
34	"display": {
35	"$value": { "fontFamily": "PP Editorial New", "fontSize": "72px", "fontWeight": 400, "lineHeight": 1.05 },
36	"$type": "typography"
37	}
38	}
39	}
40	```
41
42	## Step 2 — Platform translation matrix
43
44	\| Platform \| Output target \|
45	\|---\|---\|
46	\| Web (Tailwind v4) \| `@theme { --color-brand-primary: ...; }` block \|
47	\| Web (CSS) \| `:root { --color-brand-primary: ...; }` \|
48	\| Apple (SwiftUI) \| `extension Color { static let brandPrimary = ... }` + `Color` asset catalog JSON \|
49	\| Android (Compose) \| `ColorScheme(primary = Color(0xFF...), ...)` + `Typography` \|
50	\| Windows (WinUI 3) \| `<ResourceDictionary>` with `<Color>`, `<SolidColorBrush>`, `<x:Double>` \|
51
52	Use `../../scripts/token_export.py` for the translation — never hand-translate. Tokens drift fast.
53
54	## Step 3 — When you should NOT generate tokens
55
56	Three cases where token work is wrong:
57	1. The user wants ONE platform — let that platform skill use its native idiom directly. Tokens are for reuse.
58	2. The brief is "Awwwards-tier landing page" — tokens flatten the bespoke choices that make it distinctive.
59	3. The team has no system to maintain. Tokens without governance become stale faster than they help.
60
61	State this explicitly if the user asks to "tokenize everything." Push back once.
62
63	## Step 4 — Auditing existing tokens
64
65	When asked to audit a token set:
66
67	1. Coverage check — does it cover the 5 layers? color (semantic + raw), spacing, typography, motion, elevation/material.
68	2. Semantic vs raw discipline — are there "primary-button-bg" tokens (semantic) AND "blue-500" tokens (raw)? Both layers, no shortcuts.
69	3. Reference resolution — semantic tokens must reference raw, never the inverse.
70	4. Dark mode parity — every semantic color has a dark variant.
71	5. Platform-specific bans — flag any token that won't survive translation (e.g. CSS `box-shadow` for native, where elevation is tonal).
72
73	## Step 5 — Anti-slop ban list (token-specific)
74
75	- Hex colors with no semantic name (`#3b82f6` exposed as a token name)
76	- 100+ raw colors with no semantic layer
77	- Spacing scales that aren't 4-based on Windows/Android, 8-based on Apple, fluid on web
78	- One token bundle declared "the source of truth" but only generated for web (the most common failure)
79	- Tailwind classes baked into tokens (defeats translation)
80	- Skipping `$type` (some tools won't validate without it)
81
82	## Step 6 — Reference token bundles
83
84	Shipped in `../../assets/tokens/`:
85	- `fluent-2.json` — Microsoft Fluent 2 reference
86	- `material3-expressive.json` — M3E reference (M3E adds wave/morph tokens vs M3)
87	- `apple-system.json` — iOS/macOS semantic system colors
88	- `awwwards-editorial.json` — bespoke "editorial Swiss" example
89	- `awwwards-brutalist.json` — bespoke "tactile brutalist" example

People who liked this also viewed

6 picks

Type