skills.rest
dineshrevunuru
dineshrevunuruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-token-system

Builds a three-tier design-token system with Figma variables and CSS outputs synced from one source.

1|Updated Jul 13, 2026
Search Tags:#theming#design system#design tokens#dark mode#css custom properties#token architecture#figma variables
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill build-token-system-dineshrevunuru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-token-system
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/build-token-system
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill build-token-system-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Hardcoded hex codes, pixel values, and font sizes scattered across components make theming, dark mode, and cross-tool consistency nearly impossible. This Skill establishes a primitive → semantic → component token architecture with a single source of truth so every later design decision is a reference, not a re-decision. ## Core Features & Use Cases - Three-tier token architecture: Defines primitive, semantic, and component tiers with one-way reference rules, a naming grammar, and lint rules that catch tier violations. - Figma ↔ code sync: Maps token JSON to Figma variable collections and modes, with a code-first or Figma-first source-of-truth decision and generated CSS custom properties. - Theming and dark mode: Structures themes as semantic-tier remaps only, with dark-mode rules for elevation, contrast, and accent values. - Use Case: Starting a new product, you run this Skill before styling the first component to produce tokens.json, generated tokens.css with light and dark themes, matching Figma variable collections, and a TOKENS-README documenting the naming grammar and add-a-token decision tree. ## Quick Start Set up a design token system with light and dark themes for my new web app, generating the tokens.json source file and synced CSS custom properties.

Frequently Asked Questions about build-token-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up design tokens for a new product?▼

Pick one source of truth (code-first tokens.json or Figma-first variables), seed primitives from brand values or a UI audit, force every category onto a fixed scale, then name the semantic tier from real product roles. Generate CSS and Figma outputs from that single source before styling any component.

How do I structure design tokens for dark mode?▼

Structure dark mode as a semantic-tier remap, never a component edit. Each semantic token gets a deliberate dark value: raised surfaces go lighter instead of using shadows, primary text becomes near-white, and the accent keeps its role with a contrast-passing variant.

How do I sync Figma variables with CSS code?▼

Map token tiers to Figma collections one-to-one: primitives in one collection, semantic tokens in another with themes as modes. Choose one editable source, generate the other side with a transform tool like Style Dictionary, and keep names identical modulo casing.

What is the difference between primitive and semantic design tokens?▼

Primitive tokens are raw values like blue-600 or space-4 with no meaning attached. Semantic tokens name the job, such as color-action or text-secondary, and alias primitives. Components reference only semantic tokens so themes can remap values without touching component code.

When should I not create a component-level token?▼

Skip component tokens unless a component genuinely deviates from the semantic value or is published independently. Creating tokens for every component produces a phone book instead of a system, making selection impossible and defeating the tier architecture.

Why does my theming break when components use primitive tokens?▼

Components referencing primitives directly bypass the semantic layer, so theme remaps never reach them. Fix the tier violation by inserting the semantic token the component skipped rather than patching the theme.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
1

shadcn-theming

Defines and audits shadcn/ui design tokens using OKLCH colors and dark mode CSS variables.

Community
Intermediate
joi-fairsharejoi-fairshare
1

design-implement-ios

Generate SwiftUI Theme.swift and view components from approved iOS mockups using design tokens.

Community
Advanced
KyaniteLabsKyaniteLabs
3

spacing-system

Standardize interface layout gaps using a tokenized 4px-base scale.

Official
Intermediate
Ikki-GroupIkki-Group

tailwind-design-system

Create Tailwind CSS v4 design systems with semantic tokens and CVA components.

Official
Advanced