Design Tokens

Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

15 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add ilikescience/design-tokens-skill --skill design-tokens

Manual install

git clone --depth 1 https://github.com/ilikescience/design-tokens-skill.git /tmp/design-tokens-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-tokens-skill/. ~/.claude/skills/design-tokens

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design Tokens Expert

Expert guidance for working with design tokens following the Design Tokens Community Group (DTCG) specification.

## Quick Reference

| Topic | Reference |
|-------|-----------|
| Token types, structure, validation | [reference/format.md](reference/format.md) |
| Color spaces, components, alpha, **common mistakes** | [reference/color.md](reference/color.md) |
| Sets, modifiers, resolution order | [reference/resolver.md](reference/resolver.md) |
| jq, JSONata, **Figma export**, **Terrazzo config** | [reference/tools.md](reference/tools.md) |
| Common patterns and examples | [examples/use-cases.md](examples/use-cases.md) |

**Getting Started:** See [Getting Started Guides](#getting-started-guides) for step-by-step workflows.

## Specification Sources

Based on the latest DTCG Draft Community Group Reports:
- [Format Module](https://www.designtokens.org/tr/drafts/format/)
- [Color Module](https://www.designtokens.org/tr/drafts/color/)
- [Resolver Module](https://www.designtokens.org/tr/drafts/resolver/)

## Core Concepts

### Token Structure

A token is a JSON object with `$value`. Special properties use `$` prefix:

```json
{
  "brand-blue": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0.15, 0.39, 0.92],
      "hex": "#2563eb"
    },
    "$description": "Primary brand color"
  }
}
```

### Token Types

**Atomic:** color, dimension, fontFamily, fontWeight, duration, cubicBezier, number

Read the full skill on GitHub

Details

Skill name: design-tokens
Repository: ilikescience/design-tokens-skill
License: MIT
Repo updated: 17 June 2026

FAQ

What does the Design Tokens skill do?

How do I install the Design Tokens skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add ilikescience/design-tokens-skill --skill design-tokens. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Tokens popular?

It lives in ilikescience/design-tokens-skill, which has 15 GitHub stars and 0 forks.

Related skills

Filemaker Layout Xml

andykear/FileMaker-XMLsnippet-Layout-Claude-Skill

Use this skill whenever the user wants to work with FileMaker layout XML. This includes generating paste-ready layout object XML (fmxmlsnippet type LayoutObjectList) from descriptions, reviewing layout XML for silent paste-handler failures, or analysing Save as XML layout exports. Trigger any time the user mentions FileMaker layouts, layout objects, fields, portals, tab controls, popovers, button bars, web viewers, anchoring or autosizing, or LayoutObjectList. Always perform the theme pre-flight before generating, and set object anchoring deliberately whenever an object must resize with the wi

Frontend & Design

Design Feel Like Your Own Product

Tiannanzhao/design-feel-like-your-own-product

Learn and replicate a designer's style from Figma files to create new components that feel authentic to their design system. Use this skill whenever a user shares a Figma file and wants to create new components, plugins, or UI elements that match an existing design style — even if they don't explicitly say "learn my style". Trigger when users mention Figma files, design systems, "make it look like my design", "match the style", or ask to extend an existing UI.

Frontend & Design

Experiment Report Skill

lyzbcy/experiment-report-skill

Create a complete experiment report workflow with frontend visualization and structured markdown report. Supports any experiment type — implementation, interactive frontend, screenshots, and md/docx delivery. Use for 实验报告、experiment report and experiment-related 前端展示 or 可视化报告, with visual confirmation before the final report.

Frontend & Design

Arabic UI

JKc66/arabic-ui

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical syntactic flow, eliminates translationese (العرنجية), applies Al-Jahiz's density principle, and handles Arabic pluralization and bidirectional layout.

Frontend & Design

Readydesign Skill

ZethRise/ReadyDesign-Skill

Force UI work onto six ready-to-use libraries only: shadcn/ui, Ant Design, Kokonut UI, Motion (motion.dev), Bklit (bklit.com), and sashimi UI. Web-fetch each official site one-by-one and install the real components from those pages — never invent APIs, class names, colors, or components from memory. Use when building or restyling a UI, scaffolding a frontend, adding components, picking a design system, or when the user says ReadyDesign, ready-to-use components, shadcn, antd, kokonut, motion.dev, framer motion, bklit, sashimi, or runs /readydesign-skill or $readydesign-skill.

Frontend & Design

Audhd UI Guide

Greyland-Fireworks/audhd-ui-guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.