skills.rest
JenilRevaliya
JenilRevaliyaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

extract-design-system

Extracts CSS variables and design tokens from legacy HTML/CSS into unified design systems.

Updated Apr 13, 2026
Search Tags:#refactoring#design system#design tokens#tailwind#dark mode#css variables#cva
One-click install
npx skills add https://github.com/JenilRevaliya/ARGUS --skill extract-design-system-jenilrevaliya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-design-system
Source: https://github.com/JenilRevaliya/ARGUS/tree/main/.agent/skills/extract-design-system
Command: npx skills add https://github.com/JenilRevaliya/ARGUS --skill extract-design-system-jenilrevaliya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy UIs accumulate hardcoded colors, spacing, and typography scattered across inline styles and ad-hoc CSS, making theming, dark mode, and consistent component updates nearly impossible. ## Core Features & Use Cases - Token Extraction Protocol: Identifies repeated hardcoded values (colors, spacing, radii) and converts them into semantic CSS custom properties like --brand-primary and --space-3 on an 8px grid scale. - Tailwind v4 CSS-First Delivery: Maps extracted tokens into @theme blocks for direct use in modern utility-first workflows. - Component Standardization: Groups extracted styles into CVA (class-variance-authority) compound variants with intent and size props for React/Next.js components. - Accessibility Auditing: Enforces 4.5:1 contrast ratios and standardized focus rings at the token level. - Use Case: Given a legacy file full of <div style="background: #e23e2a; border-radius: 6px"> patterns, refactor it into a tokenized global system with dark-mode inverses and reusable button variants. ## Quick Start Analyze the CSS and inline styles in my components directory and extract a semantic design token system with Tailwind v4 theme configuration.

Frequently Asked Questions about extract-design-system

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

FAQPage Schema
How do I extract design tokens from legacy CSS?▼

Identify hardcoded values that appear three or more times across components, then convert them into semantic CSS custom properties like --brand-primary or --space-3. Name tokens by purpose rather than appearance so they survive theme changes.

How to convert hardcoded colors into CSS variables?▼

Replace literal hex values with HSL-based custom properties defined in :root, such as --brand-primary: 360, 76%, 53%. HSL is preferred because it supports programmatic manipulation for hover states and dark mode inverses.

Does this approach work with Tailwind CSS v4?▼

Yes, extracted tokens map directly into Tailwind v4's CSS-first @theme block, for example --color-primary: hsl(var(--brand-primary)). This makes tokens available as utility classes without a JavaScript config file.

When should I not extract a design system?▼

Avoid extracting tokens before the UI is stable and patterns are proven by real usage. Tokenizing values that appear only once or twice creates unnecessary abstraction and naming overhead without consolidation benefits.

How do I handle dark mode when extracting color tokens?▼

Every extracted color must have an inverse defined under a [data-theme='dark'] selector. Semantic naming like --surface-default instead of --white makes these theme swaps straightforward.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
avoidthekitchenavoidthekitchen
1

tailwind-design-system

Build Tailwind v4 design systems with CSS-first @theme configurations and semantic tokens.

Community
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
samixismesamixisme

ui-design-system

Audit UI design systems and enforce token, contrast, and responsive patterns.

Community
Advanced