skills.rest
Rdinda
RdindaCOMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

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

1|Updated Dec 20, 2025
Search Tags:#design system#color palette#design documentation#typography scale#ui tokens#css theme#spacing grid
One-click install
npx skills add https://github.com/Rdinda/FMA_Pontos --skill reversa-design-system-rdinda
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/Rdinda/FMA_Pontos/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/Rdinda/FMA_Pontos --skill reversa-design-system-rdinda

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of figuring out the real design system used by a legacy UI when tokens (colors, typography, spacing, components) are scattered across CSS and configuration files.

Core Features & Use Cases

  • Design token extraction: Pulls and documents palette, typography scale, spacing/grid/breakpoints, and other UI tokens directly from available style/theme sources.
  • Design system consolidation: Produces a set of clear markdown deliverables (palette, typography, spacing, tokens, and a consolidated document) suitable for maintaining or migrating the UI.
  • Optional component inventory: Summarizes components and variants when a component/theme system is detectable from the available inputs.

Quick Start

Use the reversa-design-system skill to extract tokens and generate documentation using the legacy project's CSS/theme artifacts and screenshots where available.

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

You can extract design tokens from legacy CSS by parsing existing stylesheets and theme configuration files to generate categorized markdown documentation covering color palettes, typography scales, spacing grids, and semantic UI tokens for modernization efforts.

What is a design system documentation generator and when do I need one?▼

A design system documentation generator consolidates scattered UI tokens into centralized reference files. You need one during UI modernization, design-system creation, or migration efforts when colors, typography, spacing, and component details are not centralized in your codebase.

How do I consolidate scattered color palette and typography scale definitions into a single document?▼

You consolidate scattered UI definitions by reading legacy CSS and theme config files, pulling extracted color values and typography scales, and producing categorized markdown deliverables that centralize palette, typography, spacing, and semantic token documentation.

Can I generate a component inventory from existing CSS theme configurations?▼

Yes, you can generate an optional component inventory from existing CSS theme configurations. When a component or theme system is detectable from the available inputs, the skill summarizes components and variants alongside the standard design token reports.

Does this design token extraction approach work without external dependencies?▼

Yes, design token extraction works without external dependencies. The skill operates independently by reading your legacy project's CSS, theme artifacts, and screenshots where available, requiring no additional components or libraries to produce the markdown outputs.

What is the best way to document UI spacing grids and breakpoints for a migration?▼

The best way to document UI spacing grids and breakpoints for a migration is to extract them directly from legacy style sources into structured markdown. This ensures your spacing and grid scales are centralized before transitioning to a new design system.

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
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
sameerthedevelopersameerthedeveloper

cinematic-editorial-noir

Generate cinematic editorial UI patterns with Tailwind-compatible components and typography scales.

Community
Advanced