Skip to main content
design-tokens Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions.
USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files
DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Tyler-R-Kendrick/agent-skills --skill design-tokensيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
المزيد من هذا المستودع Use when producing agent/LLM evals, synthetic simulation data, or self-improvement pipelines for prompts, code, skills, agents, harnesses, and workflows. Covers AgentEvals/AgentV, Agent Skills evals, ASSERT, GEPA, Trace, VISTA, Agent Lightning, SkillOpt, Simula-style data design, progressive disclosure, deterministic workspaces, and release evidence.
USE FOR: eval creation, EVAL.yaml, AgentEvals, AgentV, evals.json, ASSERT, judge-traces, behavior taxonomy, judges, graders, rubrics, synthetic data, simulation data, Simula, QDC, source-grounded generation, prompt optimization, agent improvement, skill improvement, harness hardening, progressive disclosure, deterministic workflows, GEPA, Trace, VISTA, Agent Lightning, SkillOpt
DO NOT USE FOR: ordinary unit/integration tests without AI quality criteria (use testing), refactoring without eval or trace feedback (use refactor), generic Agent Skills packaging without eval or improvement work (use agent-skills)
Use when working with AI agent protocols, standards, interoperability specifications, evaluation contracts, synthetic simulation data, improvement pipelines, and agent steering workflows. Covers MCP, A2A, ACP, Agent Skills, AGENTS.md, ADL, Improve, x402, AP2, MCP Apps, cagent, and learn.
USE FOR: agent protocol selection, comparing MCP vs A2A vs ACP, understanding agent standards ecosystem, choosing payment protocols, choosing eval standards, choosing improvement techniques, choosing synthetic data simulation techniques, steering from user feedback
DO NOT USE FOR: specific protocol, eval, or improvement implementation details (use the sub-skills: mcp, a2a, acp, improve, learn, x402, etc.)
Use when a user corrects, rejects, edits, or redirects an LLM/agent response and the correction should become a reusable reasoning strategy. Converts feedback into generalized learnings for ~/.agents/STEERING.md with linked RDF/Turtle evidence.
USE FOR: user corrections, preference feedback, rejected agent behavior, reasoning strategy updates, steering file maintenance
DO NOT USE FOR: storing task facts (use memory), ordinary skill authoring (use agent-skills), project instruction files unrelated to feedback (use agents-md)
name design-tokens description Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions.
USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files
DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
license MIT metadata {"displayName":"Design Tokens (W3C DTCG)","author":"Tyler-R-Kendrick"} compatibility claude, copilot, cursor references [{"title":"W3C Design Tokens Community Group","url":"https://www.w3.org/community/design-tokens/"},{"title":"Design Tokens Specification","url":"https://www.designtokens.org/"},{"title":"Design Tokens Community Group — GitHub","url":"https://github.com/design-tokens/community-group"}]
Design Tokens — W3C DTCG Format
Overview
The W3C Design Tokens Community Group (DTCG) specification defines a vendor-neutral JSON format for exchanging design tokens across tools and platforms. The first stable version (2025.10) provides a production-ready standard adopted by Style Dictionary, Tokens Studio, Figma, and others.
File Conventions
MIME type: application/design-tokens+json (or application/json)Extensions: .tokens or .tokens.jsonEncoding: UTF-8 JSON
Token Structure Every token is a JSON object with a $value property. The key becomes the token name:
{
"color-primary" : {
"$value" : "#3b82f6" ,
"$type" : "color" ,
"$description" : "Primary brand color"
}
}
Token Properties Property Required Description $valueYes The token's value $typeNo Token type (inherited from parent group if omitted) $descriptionNo Human-readable purpose $deprecatedNo true or a string explaining why$extensionsNo Vendor metadata (reverse domain notation)
Token Types
Primitive Types {
"brand-blue" : {
"$value" : "#3b82f6" ,
"$type" : "color"
} ,
"space-md" : {
"$value" : { "value" : 16 , "unit" : "px" } ,
"$type" : "dimension"
} ,
"font-sans" : {
"$value" : [ "Inter" , "system-ui" , "sans-serif" ] ,
"$type" : "fontFamily"
} ,
"weight-bold" : {
"$value" : 700 ,
"$type" : "fontWeight"
} ,
"duration-fast" : {
"$value" : { "value" : 150 , "unit" : "ms" } ,
"$type" : "duration"
} ,
"ease-out" : {
"$value" : [ 0 , 0 , 0.2 , 1 ] ,
"$type" : "cubicBezier"
} ,
"line-height-normal" : {
"$value" : 1.5 ,
"$type" : "number"
}
}
Composite Types {
"shadow-md" : {
"$value" : {
"color" : "#00000026" ,
"offsetX" : { "value" : 0 , "unit" : "px" } ,
"offsetY" : { "value" : 4 , "unit" : "px" } ,
"blur" : { "value" : 8 , "unit" : "px" } ,
"spread" : { "value" : 0 , "unit" : "px" }
} ,
"$type" : "shadow"
} ,
"border-default" : {
"$value" : {
"color" : "#d1d5db" ,
"width" : { "value" : 1 , "unit" : "px" } ,
"style" : "solid"
} ,
"$type" : "border"
} ,
"heading-lg" : {
"$value" : {
"fontFamily" : "{font-sans}" ,
"fontSize" : { "value" : 24 , "unit" : "px" } ,
"fontWeight" : 700 ,
"lineHeight" : 1.25
} ,
"$type" : "typography"
} ,
"transition-default" : {
"$value" : {
"duration" : { "value" : 200 , "unit" : "ms" } ,
"delay" : { "value" : 0 , "unit" : "ms" } ,
"timingFunction" : [ 0.4 , 0 , 0.2 , 1 ]
} ,
"$type" : "transition"
} ,
"gradient-brand" : {
"$value" : [
{ "color" : "#3b82f6" , "position" : 0 } ,
{ "color" : "#8b5cf6" , "position" : 1 }
] ,
"$type" : "gradient"
}
}
Groups Groups organize tokens hierarchically. A group is any object without a $value. Groups can set $type for all children:
{
"color" : {
"$type" : "color" ,
"$description" : "All color tokens" ,
"brand" : {
"primary" : { "$value" : "#3b82f6" } ,
"secondary" : { "$value" : "#8b5cf6" }
} ,
"neutral" : {
"100" : { "$value" : "#f3f4f6" } ,
"900" : { "$value" : "#111827" }
}
}
}
Children inherit $type from their nearest ancestor group, so individual tokens in the color group above don't need to redeclare "$type": "color".
Aliases / References Tokens can reference other tokens using curly brace syntax — the core mechanism for semantic tokens:
{
"blue-500" : {
"$value" : "#3b82f6" ,
"$type" : "color"
} ,
"color-primary" : {
"$value" : "{blue-500}" ,
"$type" : "color"
} ,
"button-bg" : {
"$value" : "{color-primary}" ,
"$type" : "color"
}
}
References chain: button-bg → color-primary → blue-500 → #3b82f6. Circular references are invalid.
JSON Pointer References For accessing nested properties within composite tokens:
{
"heading-lg-size" : {
"$value" : { "$ref" : "#/heading-lg/$value/fontSize" } ,
"$type" : "dimension"
}
}
Group Inheritance with $extends Groups can inherit from other groups:
{
"theme-light" : {
"surface" : { "$value" : "#ffffff" , "$type" : "color" } ,
"on-surface" : { "$value" : "#111827" , "$type" : "color" }
} ,
"theme-dark" : {
"$extends" : "#/theme-light" ,
"surface" : { "$value" : "#111827" } ,
"on-surface" : { "$value" : "#f9fafb" }
}
}
Three-Tier Architecture
{
"blue" : {
"$type" : "color" ,
"500" : { "$value" : "#3b82f6" } ,
"600" : { "$value" : "#2563eb" }
}
}
{
"color" : {
"$type" : "color" ,
"primary" : { "$value" : "{blue.500}" } ,
"primary-hover" : { "$value" : "{blue.600}" }
}
}
{
"button" : {
"bg" : { "$value" : "{color.primary}" , "$type" : "color" } ,
"bg-hover" : { "$value" : "{color.primary-hover}" , "$type" : "color" }
}
}
Naming Rules
Names are case-sensitive
Cannot start with $
Cannot contain {, }, or .
The . character is used as a path separator in references
Best Practices
Use the W3C DTCG format (.tokens.json with $value / $type) for vendor neutrality across tools.
Organize tokens into global → semantic → component tiers so themes only override the semantic layer.
Use aliases extensively — raw values should only appear in the global tier.
Set $type on groups rather than individual tokens to reduce repetition.
Add $description to non-obvious tokens so designers and developers share the same understanding.
Use $deprecated with a migration message before removing tokens to give consumers time to update.
Validate token files against the DTCG spec before committing — Style Dictionary v4 supports DTCG natively.
