Skills
.Work. You
Rest

extract-css-tokens

Community

Automate CSS design-token extraction for theming.

Design & Creative#theming#css#tokens#design-system#design-tokens#css-in-js
Authortherealityreport
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the extraction of design tokens from CSS stylesheets, inline style blocks, and CSS-in-JS output, producing a normalized CSSTokenMap used by downstream skills for theming and layout.

Core Features & Use Cases

  • Extract tokens for colors, typography, spacing, borders, and layout from multiple CSS sources (files, inline blocks, and CSS-in-JS).
  • Resolve CSS variable references and merge sources while preserving source order, with explicit handling of overrides and media query contexts.
  • Output a CSSTokenMap that supports downstream skills such as generate-brand-section and generate-article-page, enabling consistent theming across components and pages.

Quick Start

Provide the CSS sources or URLs (files, blocks, or links) to extract tokens and generate a CSSTokenMap.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: extract-css-tokens
Download link: https://github.com/therealityreport/trr-app/archive/main.zip#extract-css-tokens

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.