skills.rest
AirMile
AirMileCOMMUNITY
Explore all skills by this author →
GitHub

frontend-tokens

Centralize and govern design tokens across projects with a JSON-based theme schema.

Updated Jan 1, 2026
Search Tags:#css#tailwind#design-system#dark-mode#design-tokens#token-management
One-click install
npx skills add https://github.com/AirMile/claude-config --skill frontend-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-tokens
Source: https://github.com/AirMile/claude-config/tree/main/skills/frontend-tokens
Command: npx skills add https://github.com/AirMile/claude-config --skill frontend-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tokens manage project design system tokens (colors, typography, spacing, motion, and interactions) and automate their creation, updates, and alignment with code sources like Tailwind or CSS.

Core Features & Use Cases

  • Central token management for theme colors, typography, spacing, breakpoints, motion, and interactions.
  • Generate, view, update, and export tokens, enable dark/light mode, and derive tokens from existing Tailwind/CSS configs.
  • Use cases include setting up a new design system, migrating existing tokens, or syncing tokens with project.json themes.

Quick Start

Describe your design system context and request token generation to initialize or update your theme.

Frequently Asked Questions about frontend-tokens

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

FAQPage Schema
How do I manage design tokens for a CSS or Tailwind project?▼

You can extract design tokens from existing Tailwind or CSS configurations. The skill parses your current sources to derive and sync a centralized JSON-based theme schema, enabling consistent token management.

How do I set up dark mode and light mode design tokens?▼

Set up dark mode and light mode by generating and updating theme tokens within a centralized JSON schema. This governs color, typography, and spacing variations across your project to ensure visual consistency.

What is the best way to extract design tokens from an existing Tailwind config?▼

Extract design tokens from existing Tailwind or CSS configurations. The skill parses your current sources to derive and sync a centralized JSON-based theme schema, enabling consistent token management.

Do I need a JSON schema to sync my design system tokens?▼

Yes, a JSON-based theme schema is required to sync design system tokens. The skill enforces this structure to govern naming and alignment with your repository's theme templates for colors, typography, and motion.

Can I export design tokens for colors, typography, and spacing from a centralized system?▼

Yes, you can export design tokens for colors, typography, spacing, and motion from a centralized system. This allows you to update and align your tokens with project code sources like Tailwind or CSS.

Related Skills

Explore More Design & Creative Skills→
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced
therealityreporttherealityreport

extract-css-tokens

Extract design tokens from CSS sources into a normalized CSSTokenMap JSON.

Community
Intermediate
futureteafuturetea

TailwindCSS Styling

Configure Tailwind CSS with PostCSS and autoprefixer for React and Vite projects.

Community
Intermediate
stribusstribus
1

reversa-design-system

Extract and normalize design tokens from CSS and theme files into structured documentation.

Community
Intermediate