How does the spacing scale work?

It utilizes a standard 4px-base scale (e.g., --space-1 = 4px, --space-4 = 16px) to maintain mathematical rhythm and layout consistency throughout your UI.

What are CSS design tokens?

Design tokens are the visual atoms of a design system—specifically colors, spacing, and typography—stored as variables (CSS Custom Properties) to ensure visual consistency across an entire application.

Can I use these tokens with React components?

Absolutely. The skill includes implementation examples for React CSS-in-JS patterns and a ThemeProvider component for stateful theme management.

Does this skill support automatic dark mode?

Yes, it provides a semantic naming convention and a data-attribute pattern ([data-theme='dark']) specifically designed for easy implementation of light and dark modes.

CSS Design Tokens System

Name: CSS Design Tokens System
Author: iButters

byiButters

•

Design Tools

Implements a standardized design token system using CSS Custom Properties for scalable and maintainable UI styling.

The CSS Design Tokens skill empowers developers to build consistent, themeable user interfaces by establishing a robust architecture of CSS Custom Properties. It provides a comprehensive framework for managing color palettes, semantic themes including light and dark modes, 4px-base spacing scales, and modular typography systems. By automating the creation of these tokens and their mapping to UI components like buttons and cards, it ensures visual harmony across a project while simplifying global style updates and cross-team collaboration through a standardized naming convention.

Key Features

01Standardized tokens for border radii, shadows, and transitions

021 GitHub stars

03React-ready Theme Provider patterns for dynamic mode switching

04Modular typography scales and font-family management

05Semantic color system with built-in dark mode support

06Scalable spacing system based on a consistent 4px grid

Use Cases

01Standardizing UI consistency across a large-scale component library

02Establishing a professional design system for a new web application

03Adding comprehensive dark mode support to an existing CSS architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ibutters/claudecodeplugins css-tokens

For use in Claude.ai and ChatGPT

Download Skill