skills.rest
aroido
aroidoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-tokens

Create and manage design token systems for consistent UI development.

Updated Apr 22, 2026
Search Tags:#typescript#theming#design tokens#tailwind css#css variables#ui system
One-click install
npx skills add https://github.com/aroido/vibesmith --skill design-tokens-aroido
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/aroido/vibesmith/tree/main/.cursor/skills/design-tokens
Command: npx skills add https://github.com/aroido/vibesmith --skill design-tokens-aroido

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and practical examples for establishing and managing a design token system, ensuring consistency across design and development.

Core Features & Use Cases

  • Token Definition: Learn to define primitive and semantic design tokens for colors, spacing, typography, shadows, and radii.
  • Cross-Platform Integration: Examples for integrating tokens with TypeScript and Tailwind CSS.
  • Dark Mode Support: Implement dark mode theming using CSS custom properties.
  • Use Case: Standardize UI elements like buttons and cards across a web application by defining and applying design tokens for consistent theming and branding.

Quick Start

Use the design-tokens skill to generate CSS variables from a JSON token definition.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I create a design token system for consistent UI development?▼

A design token system standardizes UI elements by defining primitive and semantic tokens for colors, spacing, typography, shadows, and radii. This ensures consistent theming and branding across web applications.

How do I generate CSS variables from JSON design tokens?▼

You can generate CSS variables from a JSON token definition using the provided scripts. This process translates your defined primitive and semantic token structures into CSS custom properties for application styling.

How do I implement dark mode theming using CSS custom properties?▼

Implement dark mode theming by mapping semantic design tokens to different CSS custom property values. This approach allows the UI to dynamically switch themes by overriding CSS variables based on the user's preference.

Does this design token approach work with TypeScript and Tailwind CSS?▼

Yes, the design token system integrates directly with TypeScript and Tailwind CSS. It provides examples for cross-platform integration, allowing you to strongly type your tokens and apply them within your utility-first CSS configuration.

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

Primitive design tokens store raw, global values like specific hex color codes or pixel sizes. Semantic design tokens reference these primitives to define context-specific meanings, such as button-background, ensuring scalable UI theming.

What are the best practices for naming and scaling design tokens?▼

Best practices for naming and scaling design tokens involve establishing a clear hierarchy from primitive to semantic tokens. This structured naming convention ensures maintainability and consistent application across complex UI systems.

Related Skills

Explore More Design & Creative Skills→
TimeKastTimeKast

kb-design-tokens

Converts hardcoded UI styles to reusable tokens via Tailwind's @apply.

Official
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate