extract-css-tokens

Name: extract-css-tokens
Availability: InStock
Author: therealityreport

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

Ready to run

npx skills add https://github.com/therealityreport/trr-app --skill extract-css-tokens

💬 Prompt for ChatGPT / Claude Chat▼

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.