Skills
.Work. You
Rest

token-workflow

Official

Align SGDS design tokens across 3 layers.

Design & Creative#css#storybook#tailwind#design-system#playground#design-token#token-workflow
AuthorGovTechSG
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Maintains SGDS design token architecture across three layers (primitive tokens in root.css, semantic mappings in day.css/night.css, and Tailwind utilities in utility.css). Use when adding/modifying design tokens, creating new utilities, updating Storybook documentation, or ensuring token consistency across theme files. IMPORTANT - whenever new tokens are requested, ALWAYS complete all three deliverables - (1) utility.css mapping, (2) playground HTML demo in playground/utility/, (3) Storybook story in stories/utilities/. Never do just one without the others.

Core Features & Use Cases

  • Enforces a three-layer token architecture: primitives, semantics, and utilities.
  • Guarantees delivery of all three artifacts for token requests: utility.css mapping, playground demo, and Storybook story.
  • Guides cross-team token work and documentation consistency across themes.

Quick Start

Follow the token workflow to add or modify tokens by updating all three layers and creating corresponding playground and Storybook entries.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: token-workflow
Download link: https://github.com/GovTechSG/sgds-web-component/archive/main.zip#token-workflow

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.