skills.rest
AlexandrePontesjr
AlexandrePontesjrCOMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

Extract design tokens and markdown documentation from legacy styling sources.

Updated May 5, 2026
Search Tags:#typography#design system#design tokens#css variables#component documentation#spacing#ui theming
One-click install
npx skills add https://github.com/AlexandrePontesjr/calculadora-Juridica --skill reversa-design-system-alexandrepontesjr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/AlexandrePontesjr/calculadora-Juridica/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/AlexandrePontesjr/calculadora-Juridica --skill reversa-design-system-alexandrepontesjr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns an undocumented or legacy UI into a clear, searchable set of design tokens so teams can standardize styling and speed up redesigns without manually reverse-engineering CSS.

Core Features & Use Cases

  • Color token extraction: Extracts the full color palette (semantic and neutral colors) from CSS/theme definitions and confirms via screenshots when available.
  • Typography extraction: Identifies font families, size scale, weights, and text rendering defaults to rebuild consistent UI typography.
  • Layout and spacing tokenization: Recovers spacing scales, grid constraints, and breakpoints for consistent page structure.
  • Token consolidation and documentation: Produces consolidated markdown artifacts (palette, typography, spacing, tables, and a unified design-system document) for downstream use.

Quick Start

Use the reversa-design-system skill to generate design-system documentation from the available legacy style sources in the repository, writing the results into the output folder defined by .reversa/state.json (output_folder).

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 variables?▼

To extract design tokens from legacy CSS variables, this Skill reads declared styling sources and produces consolidated markdown artifacts for color, typography, and spacing. It identifies deterministic token inputs from theme configurations to standardize UI definitions.

What is the best way to document an undocumented design system?▼

Documenting an undocumented design system involves extracting color palettes, typography scales, and spacing constraints into structured tokens. This Skill generates consolidated markdown artifacts and a unified design-system document from legacy CSS and theme files for downstream use.

Can I audit UI typography and spacing scales from existing theme files?▼

Yes, you can audit UI typography and spacing scales from existing theme files. This Skill identifies font families, size scales, weights, spacing scales, grid constraints, and breakpoints by analyzing available styling sources to rebuild consistent page structures.

Does this design token extraction work without external dependencies?▼

Yes, design token extraction works without external dependencies. This Skill operates independently to read available styling sources like CSS variables and token files, requiring only an output folder configured in the state file to write the consolidated markdown artifacts.

How do I standardize color palettes for a UI modernization project?▼

To standardize color palettes for a UI modernization project, this Skill extracts semantic and neutral colors from CSS and theme definitions. It confirms extracted values via optional screenshots and outputs structured color tokens into a configured output folder.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
ArogyaReddyArogyaReddy

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and theming.

Community
Advanced
gzyxdsgzyxds

design-system

Create and manage design tokens with a three-layer token architecture.

Community
Advanced
antony-jipantony-jip

ckm:design-system

Generate CSS variables from JSON design tokens and create brand-compliant slides.

Community
Advanced