skills.rest
sandeco
sandecoCOMMUNITY
Explore all skills by this author →
Website𝕏@sandecoGitHub

reversa-design-system

Extract design tokens from legacy CSS and theme files into markdown documentation.

1.5k|383|Updated Apr 26, 2026
Search Tags:#typography#color palette#design tokens#component documentation#legacy modernization#ui theming#css analysis
One-click install
npx skills add https://github.com/sandeco/reversa --skill reversa-design-system-sandeco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/sandeco/reversa/tree/main/agents/reversa-design-system
Command: npx skills add https://github.com/sandeco/reversa --skill reversa-design-system-sandeco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns scattered styling knowledge in a legacy project into a clear, reusable design-token specification so AI agents and teams can evolve the UI without breaking visual consistency.

Core Features & Use Cases

  • Color token extraction: derives palette values (including semantic feedback colors) from CSS/theme sources.
  • Typography and spacing mapping: reconstructs font scale, hierarchy, line-height, breakpoints, and spacing grids from available configuration and styles.
  • Design-system consolidation: outputs consolidated artifacts (palette, typography, spacing, tokens, and a unified document) ready for operational use by other coding agents.

Quick Start

Run the reversa-design-system agent when your legacy project contains CSS/theme files and, optionally, screenshots, to generate design-system token documentation under the output folder reported in .reversa/state.json.

Frequently Asked Questions about reversa-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 and theme files?▼

To extract design tokens from legacy CSS and theme files, parse existing style sources like theme configurations and Storybook stories to enumerate colors, typography, and spacing into categorized markdown deliverables.

Can I reconstruct a Tailwind color palette and typography scale from an existing UI configuration?▼

Yes, you can reconstruct a Tailwind color palette and typography scale by analyzing existing theme configuration files and CSS sources to derive semantic feedback colors, font hierarchy, line-height, and spacing grids.

What is the best way to document a legacy design system for AI agent execution?▼

Documenting a legacy design system for AI agent execution involves consolidating recovered color, typography, and spacing tokens into unified markdown artifacts stored in a dedicated design-system output folder.

Do I need Storybook stories and UI screenshots to generate design token documentation?▼

Storybook stories and UI screenshots are optional inputs that enhance token recovery, but you primarily need existing CSS, theme configuration, or token files to extract design tokens and assign confidence levels.

How does legacy modernization handle scattered styling knowledge without breaking visual consistency?▼

Legacy modernization handles scattered styling knowledge by transforming CSS and theme configurations into a clear, reusable design-token specification, ensuring teams and AI agents can evolve the UI without breaking visual consistency.

What limitations exist when extracting spacing grids and breakpoints from legacy UI styles?▼

Extraction relies entirely on available style sources, meaning limitations arise when CSS, theme files, or Storybook stories are missing or incomplete, preventing the accurate enumeration of spacing grids and breakpoints.

Related Skills

Explore More Design & Creative Skills→
afsjrafsjr

reversa-design-system

Extract design tokens from CSS and theme files into categorized markdown documentation.

Community
Intermediate
RdindaRdinda
1

reversa-design-system

Extract design tokens from legacy CSS and theme artifacts into markdown reports.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
HerxinsasaHerxinsasa
1

theme-factory

Generate custom color palettes and font pairings for presentations and documents.

Community
Intermediate