design-token-architect

Design or audit design token systems with primitive, semantic, and component layers.

2|1|Updated May 17, 2026

Search Tags:#accessibility #design system #design tokens #css variables #semantic naming #theme support

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill design-token-architect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-token-architect
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/design-token-architect
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill design-token-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create or audit a design token system so your UI uses consistent, theme-aware values instead of scattered hard-coded colors, spacing, and typography.

Core Features & Use Cases

Token Hierarchy Design: Defines primitive, semantic, and component token layers so design decisions stay organized and reusable.
Theme Support: Maps tokens across light, dark, and other themes while preserving accessibility and visual consistency.
System Audit and Migration: Reviews existing token sets for naming issues, missing states, and inconsistent usage, then proposes a cleaner structure.
Use Case: A product team launching dark mode can use this Skill to map existing colors into semantic tokens and update the system without rewriting every component by hand.

Quick Start

Ask the skill to design a complete token architecture for your product, including semantic mappings for light and dark themes and recommendations for file structure.

Frequently Asked Questions about design-token-architect

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

FAQPage Schema

How do I structure design tokens for light and dark theme support?▼

Mapping design tokens for dark mode involves creating semantic token layers that reference primitive colors, allowing light and dark theme definitions to swap values without rewriting individual component styles.

What is the best way to audit existing design tokens for naming issues?▼

Auditing design tokens requires reviewing existing sets for naming inconsistencies and missing states, then proposing a cleaner structure organized into primitive, semantic, and component-layer mappings.

How do I migrate hard-coded CSS variables to semantic design tokens?▼

Migrating hard-coded CSS variables to semantic design tokens requires establishing a three-tier hierarchy of primitive, semantic, and component layers, enabling theme-aware styling without manually rewriting every UI component.

Can I use a design token system to standardize cross-component styling?▼

Yes, a design token system standardizes cross-component styling by replacing scattered hard-coded colors, spacing, and typography values with a structured, theme-aware architecture that ensures UI consistency.

Do I need primitive, semantic, and component token layers for a design system?▼

You need primitive, semantic, and component token layers to separate raw values from contextual meaning and component-specific overrides, keeping design system decisions organized, reusable, and scalable across themes.