Made by@brandkitBrand tokens export
@brandkit/brand-tokens-export
Turn the tokens in your brand.md into code: CSS variables, a Tailwind theme (v3 and v4), and a design-tokens.json for Figma token plugins. One source of truth, regenerated in a second whenever the brand changes.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1{
- 2 "name": "brand-tokens-export",
- 3 "owner": "brandkit",
- 4 "version": "1.0.0",
- 5 "type": "skill",
- 6 "description": "Turn the tokens in your brand.md into code: CSS variables, a Tailwind theme (v3 and v4), and a design-tokens.json for Figma token plugins. One source of truth, regenerated in a second whenever the brand changes.",
- 7 "category": "content",
- 8 "license": "MIT",
- 9 "compat": ["claude-code"],
- 10 "permissions": {
- 11 "shell": ["node scripts/export-tokens.mjs"],
- 12 "files": {
- 13 "read": ["./brand.md", "./docs/brand.md"],
- 14 "write": ["./brand-tokens/**"]
- 15 }
- 16 },
- 17 "tests": {
- 18 "cases": [
- 19 {
- 20 "name": "exports a YAML tokens block to CSS, Tailwind, and DTCG JSON",
- 21 "inputs": {
- 22 "brand.md": "# Test brand\n\n```yaml tokens\nname: Testco\ncolor:\n primary: \"#1F7A5C\"\n accent: \"#F2A541\"\nfont:\n heading: [Fraunces, Georgia, serif]\n mono: [JetBrains Mono, monospace]\ntext:\n base: 16px\nspace:\n \"2\": 8px\nradius:\n md: 10px\n```\n"
- 23 },
- 24 "checks": [
- 25 {
- 26 "type": "command_exits_zero",
- 27 "command": "node scripts/export-tokens.mjs brand.md brand-tokens"
- 28 },
- 29 { "type": "file_contains", "path": "brand-tokens/tokens.css", "text": "--color-primary: #1F7A5C;" },
- 30 {
- 31 "type": "file_contains",
- 32 "path": "brand-tokens/tokens.css",
- 33 "text": "--font-mono: \"JetBrains Mono\", monospace;"
- 34 },
- 35 { "type": "file_contains", "path": "brand-tokens/theme.css", "text": "@theme {" },
- 36 { "type": "file_contains", "path": "brand-tokens/tailwind.theme.cjs", "text": "\"fontFamily\"" },
- 37 {
- 38 "type": "output_matches_schema",
- 39 "path": "brand-tokens/design-tokens.json",
- 40 "schema": {
- 41 "type": "object",
- 42 "required": ["color", "font", "text", "space", "radius"],
- 43 "properties": {
- 44 "color": {
- 45 "type": "object",
- 46 "required": ["primary", "accent"],
- 47 "properties": {
- 48 "primary": {
- 49 "type": "object",
- 50 "properties": { "$value": { "const": "#1F7A5C" }, "$type": { "const": "color" } }
- 51 }
- 52 }
- 53 },
- 54 "font": {
- 55 "type": "object",
- 56 "properties": {
- 57 "heading": {
- 58 "type": "object",
- 59 "properties": { "$value": { "const": ["Fraunces", "Georgia", "serif"] } }
- 60 }
- 61 }
- 62 }
- 63 }
- 64 }
- 65 }
- 66 ]
- 67 },
- 68 {
- 69 "name": "reads a JSON tokens block and the bundled example",
- 70 "inputs": {
- 71 "docs/brand.md": "# Brand\n\n```json\n{ \"colors\": { \"ink\": \"#111111\" }, \"spacing\": { \"sm\": \"4px\" } }\n```\n"
- 72 },
- 73 "checks": [
- 74 {
- 75 "type": "command_exits_zero",
- 76 "command": "node scripts/export-tokens.mjs docs/brand.md brand-tokens"
- 77 },
- 78 { "type": "file_contains", "path": "brand-tokens/tokens.css", "text": "--color-ink: #111111;" },
- 79 { "type": "file_contains", "path": "brand-tokens/tokens.css", "text": "--spacing-sm: 4px;" },
- 80 {
- 81 "type": "command_exits_zero",
- 82 "command": "node scripts/export-tokens.mjs examples/brand.md brand-tokens/example"
- 83 },
- 84 { "type": "file_contains", "path": "brand-tokens/example/theme.css", "text": "--shadow-card: 0 1px 3px rgba(27, 31, 35, 0.12);" }
- 85 ]
- 86 }
- 87 ]
- 88 }
- 89}