skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-tokens

Documents three-layer design token architecture for CSS variable systems with Tailwind integration.

Updated Mar 28, 2026
Search Tags:#theming#frontend#design system#design tokens#tailwind css#dark mode#css variables
One-click install
npx skills add https://github.com/po4yka/blog --skill design-tokens-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/design-tokens
Command: npx skills add https://github.com/po4yka/blog --skill design-tokens-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design systems often grow into inconsistent, hard-to-theme CSS where colors and spacing are scattered across components. This Skill provides reference documentation for a three-layer token architecture (primitive, semantic, component) that keeps design values organized, themeable, and consistent. ## Core Features & Use Cases - Token Architecture Reference: Explains the primitive, semantic, and component token layers with naming conventions and file organization patterns. - Concrete Token Definitions: Provides ready-to-adapt CSS variable sets for colors, spacing, typography, radius, shadows, motion, and z-index, plus component tokens for buttons, inputs, cards, and dialogs. - States & Accessibility Guidance: Documents hover, focus, disabled, loading, and error state patterns with contrast and ARIA requirements. - Use Case: When adding a new button variant to a Tailwind CSS 4 project, consult the component tokens and states references to define --button-* variables that reference semantic tokens instead of hardcoding primitive values. ## Quick Start Ask the AI to explain how to add a new component token to the design system following the three-layer token architecture in src/styles/theme.css.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I structure design tokens in a three-layer architecture?▼

Define primitive tokens as raw values like --color-blue-600, alias them through semantic tokens like --color-primary, then reference semantics in component tokens like --button-bg. This separation enables theme switching by overriding only the semantic layer.

How to add dark mode with CSS design tokens?▼

Override semantic tokens inside a .dark class selector, remapping values like --color-background and --color-foreground to darker primitives. Toggling the class on the document root switches the entire theme without touching component styles.

Does this token system work with Tailwind CSS 4?▼

Yes, the references cover Tailwind integration using HSL-format CSS variables mapped in the theme configuration, supporting opacity modifiers like bg-primary/50. The structure also aligns with shadcn/ui conventions for component installation.

What naming convention should design tokens follow?▼

Use the pattern --{category}-{item}-{variant}-{state}, such as --color-primary-hover or --button-bg-hover. Categories include color, space, font-size, radius, shadow, and duration, keeping tokens predictable and searchable.

When should I use component tokens instead of semantic tokens directly?▼

Use component tokens when a component needs per-instance customization, such as button padding or card radius, while still referencing semantic values. Apply semantic tokens directly for general layout and typography where no component-specific override is needed.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate