skills.rest
therealityreport
therealityreportCOMMUNITY
Explore all skills by this author →
GitHub

extract-css-tokens

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

Updated Aug 23, 2025
Search Tags:#theming#css#tokens#design-system#design-tokens#css-in-js
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill extract-css-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-css-tokens
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/extract-css-tokens
Command: npx skills add https://github.com/therealityreport/trr-app --skill extract-css-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about extract-css-tokens

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

FAQPage Schema
How do I extract design tokens from CSS stylesheets for theming?▼

You can extract design tokens from CSS-in-JS output by processing the JavaScript styles alongside regular stylesheets and inline blocks, resolving variable references to produce a unified CSSTokenMap that captures colors, spacing, and typography.

Can I merge design tokens from multiple CSS sources while preserving order?▼

Merging design tokens from multiple CSS sources preserves document order while handling variable resolution and overrides across files, inline blocks, and media query contexts, returning a complete CSSTokenMap with all raw variables and resolved values.

What is a CSSTokenMap and when do I need it for design systems?▼

A CSSTokenMap is a normalized JSON object containing rawVariables, fonts, colors, spacing, radius, and layoutWidths extracted from CSS. You need it when automating design-system theming or feeding consistent style data into downstream page generation tasks.

Does CSS variable resolution work across inline style blocks and media queries?▼

CSS variable resolution works across inline style blocks, stylesheets, and CSS-in-JS output, handling overrides and media query contexts explicitly. The extraction resolves these references and merges them into the final CSSTokenMap output.

What's the best way to automate CSS design-token extraction for multiple files?▼

Automate CSS design-token extraction by providing multiple CSS sources or URLs to the processor, which resolves variables, merges overrides while preserving source order, and outputs a complete CSSTokenMap suitable for downstream design tasks.

Related Skills

Explore More Design & Creative Skills→
carlos-algmscarlos-algms
2

css

Enforces strict authoring rules for CSS across files, modules, and JS-in-CSS.

Community
Intermediate
digisurfsomedigisurfsome

Meta Tag Optimizer

Generate optimized meta titles and descriptions for multiple pages.

Community
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate