skills.rest
lacsousa
lacsousaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-design-system

Extracts and documents design tokens from CSS, theme files, and screenshots.

Updated Jun 12, 2026
Search Tags:#typography#design system#css#color palette#design tokens#tailwind#reverse engineering
One-click install
npx skills add https://github.com/lacsousa/mediclaw-system --skill reversa-design-system-lacsousa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/lacsousa/mediclaw-system/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/lacsousa/mediclaw-system --skill reversa-design-system-lacsousa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy projects often lack documented design systems, forcing developers to manually dig through stylesheets and theme files to recover color palettes, typography scales, and spacing tokens. This Skill automates that reverse-engineering process and produces structured design documentation. ## Core Features & Use Cases - Token Extraction: Parses CSS/SCSS variables, Tailwind configs, MUI/Chakra/Mantine themes, styled-components, and token files to recover colors, typography, spacing, shadows, and breakpoints. - Structured Documentation: Generates color-palette.md, typography.md, spacing.md, tokens.md, and a consolidated design-system.md in the output folder. - Confidence Labeling: Marks each token as extracted from config, inferred from usage/screenshots, or referenced but undefined. - Use Case: When modernizing a legacy frontend, run this Skill against the existing stylesheets and screenshots to produce a complete design token reference before rebuilding components. ## Quick Start Analyze the CSS files, theme configuration, and screenshots in this project and document the full design system with color palette, typography, and spacing tokens.

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 a legacy CSS project?▼

Point the Skill at your CSS/SCSS files, theme configs, or screenshots and it parses variables like --color-primary and $color-primary into documented tokens. Output is written as categorized Markdown files covering palette, typography, and spacing.

What tools document a design system from existing code?▼

This Skill analyzes Tailwind configs, MUI createTheme, Chakra extendTheme, styled-components themes, and Style Dictionary token files to reverse-engineer a design system. It consolidates findings into a single design-system.md document.

Can design tokens be extracted from screenshots?▼

Yes, screenshots are supported as a complementary visual source to confirm tokens, provided the model supports image input. Tokens inferred from screenshots are marked with a medium confidence level rather than treated as definitive.

Does it work with Tailwind CSS and Chakra UI themes?▼

Yes, it reads tailwind.config.js custom themes and Chakra UI extendTheme definitions, along with MUI, Mantine, Ant Design, and Emotion theme objects. Extracted values include color scales, breakpoints, and spacing scales.

What happens when a token is referenced but not defined?▼

The Skill labels it with a red confidence marker indicating the token is referenced but undefined. Green marks tokens extracted from config files and yellow marks tokens inferred from usage or screenshots.

Related Skills

Explore More Design & Creative Skills→
silaslopes100silaslopes100

reversa-design-system

Extract design tokens from CSS, Tailwind, and UI library configurations.

Community
Intermediate
Stacked-LabsStacked-Labs

chakra-design-system

Enforce token-driven Chakra UI styling and design patterns for new components.

Official
Intermediate
bfree-trainerbfree-trainer
60

extract

Extract reusable UI components, design tokens, and layout patterns from frontend codebases.

Official
Advanced
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced