css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

7|Updated Dec 26, 2025

Search Tags:#typography #dark mode #spacing #css-variables #design-tokens #css-tokens

Ready to run

npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill css-tokens-schalkneethling

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: css-tokens
Source: https://github.com/schalkneethling/webdev-agent-skills/tree/main/css-tokens
Command: npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill css-tokens-schalkneethling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a foundational CSS design tokens system that establishes a consistent styling baseline across projects, enabling scalable theming and easier maintenance.

Core Features & Use Cases

Complete tokens.css with typography, spacing, colors, borders, z-index, and transitions.
Supports dark mode via prefers-color-scheme and a modular, scalable design system.
Use to bootstrap a design system or rapidly apply a consistent design language across components.
Example: Initialize a new project with tokens.css to ensure consistent var(--color-primary), var(--size-16), etc.

Quick Start

To begin, locate or create a references/tokens.css file in your project and import it where CSS variables are needed. Use the tokens by referencing CSS variables like var(--color-primary) or var(--size-16) in your main styles.

Frequently Asked Questions about css-tokens

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

FAQPage Schema

How do I set up CSS design tokens for a consistent UI?▼

To set up CSS design tokens, create a references/tokens.css file containing custom properties for typography, spacing, colors, borders, z-index, and transitions, then import it into your project to establish a consistent styling baseline.

What are CSS custom properties and how do they support dark mode?▼

CSS custom properties are reusable variables that enable scalable theming. This tokens system supports dark mode by leveraging the prefers-color-scheme media query to automatically swap color values for consistent UI theming.

How do I use CSS variables for spacing and typography in my styles?▼

You use CSS variables for spacing and typography by referencing tokens like var(--color-primary) or var(--size-16) directly in your main styles, ensuring consistent design language across all components.

Can I use this design tokens system to bootstrap a new web project?▼

Yes, you can use this design tokens system to bootstrap a new web project or design system. It provides a complete tokens.css file that enables scalable theming and consistent styling across components from the start.

Do I need a specific framework to apply CSS design tokens?▼

No, you do not need a specific framework to apply CSS design tokens. The system exposes tokens as standard CSS custom properties, requiring only a tokens.css file imported where CSS variables are needed in your web project.

What is the best way to maintain consistent styling across web components?▼

The best way to maintain consistent styling is to define a foundational design tokens system using CSS custom properties. This establishes a scalable design baseline, ensuring easier maintenance and consistent styling across all components.