🎨 Frontend Engineering · CSS & Design Systems

Set up design tokens for color, space, type (Tailwind setup)

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

intermediate~35 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Define scales: one neutral ramp plus accent ramps, 8px spacing ladder, modular type scale
2Name by role (bg-surface, text-muted), never by value (gray-3)
3Expose as CSS variables; map Tailwind colors to var() references
4Add dark mode by swapping variable values under a media or class hook
5Lint for raw hex values outside the token file
6Ship a living style page rendering every token with its name
7Reference variables in tailwind.config so utilities emit them
8Use opacity modifiers carefully; they require rgb/hsl channel variables

Common Pitfalls

▲Role names that encode light mode assumptions breaking dark theme
▲Token sprawl: 40 grays nobody can choose between

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-design-tokens-tailwind

Install globally

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-design-tokens-tailwind -g

Tags

#css#design-system#theming#frontend-engineering#css-design-systems

Install this skill

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-design-tokens-tailwind -a opencode

SKILL.md

# Set up design tokens for color, space, type (Tailwind setup)

> Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

## When to Use This Skill

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

## Steps

1. Define scales: one neutral ramp plus accent ramps, 8px spacing ladder, modular type scale
2. Name by role (bg-surface, text-muted), never by value (gray-3)
3. Expose as CSS variables; map Tailwind colors to var() references
4. Add dark mode by swapping variable values under a media or class hook
5. Lint for raw hex values outside the token file
6. Ship a living style page rendering every token with its name
7. Reference variables in tailwind.config so utilities emit them
8. Use opacity modifiers carefully; they require rgb/hsl channel variables

## Common Pitfalls

- Role names that encode light mode assumptions breaking dark theme
- Token sprawl: 40 grays nobody can choose between

View source on GitHub ↗

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

🎨 Frontend Engineering·~35m

Open →

Build layouts that survive real contentintermediate

Use fluid grids, container queries, and content-driven breakpoints instead of pixel-perfect mockups.

🎨 Frontend Engineering·~30m

Open →

Add motion that guides attentionintermediate

Animate with purpose: entrance choreography, micro-interactions, and reduced-motion respect.

🎨 Frontend Engineering·~30m

Open →