skills.rest
tjsasakifln
tjsasakiflnCOMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

Extracts design tokens from CSS, theme files, and screenshots into Markdown documentation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy projects rarely document their visual system, forcing developers to reverse-engineer colors, typography, and spacing from scattered stylesheets. This Skill automates that extraction and produces structured design token documentation. ## Core Features & Use Cases - Multi-source token extraction: Parses CSS/SCSS variables, Tailwind config, MUI/Chakra/Mantine themes, styled-components, Style Dictionary files, and Storybook stories. - Complete design system coverage: Documents color palettes, typography scales, spacing, grid, breakpoints, shadows, border-radius, z-index, transitions, and component variants. - Confidence labeling: Marks each token as extracted from config (green), inferred from usage or screenshots (yellow), or referenced but undefined (red). - Use Case: When modernizing a legacy frontend, run this Skill against the existing stylesheets and screenshots to generate color-palette.md, typography.md, spacing.md, tokens.md, and a consolidated design-system.md in the output folder. ## Quick Start Analyze the CSS files, theme configuration, and screenshots in this project and generate the full design system documentation in the 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 a legacy CSS project?▼

Point the Skill at your stylesheets and it parses CSS custom properties, Sass variables, and theme objects to recover colors, typography, and spacing. Results are written as categorized Markdown files with a confidence label per token.

What design token sources does this Skill support?▼

It reads CSS/SCSS/LESS variables, tailwind.config.js, MUI createTheme, Chakra extendTheme, Mantine, Ant Design, styled-components and Emotion theme objects, Style Dictionary token files, and Storybook stories, plus screenshots as visual confirmation.

Can I use screenshots to document a design system without source code?▼

Yes, screenshots are supported as a complementary source when the model supports image input. Tokens inferred from screenshots are marked with a yellow confidence level instead of green, since they are not extracted from configuration files.

What output files does the design system extraction generate?▼

It writes color-palette.md, typography.md, spacing.md, tokens.md, and a consolidated design-system.md into the design-system folder under the output directory defined in .reversa/state.json, defaulting to _reversa_sdd.

How are unreliable or missing design tokens handled?▼

Each token receives a confidence marker: green for values extracted from config files, yellow for values inferred from usage or screenshots, and red for tokens referenced in code but never defined, so gaps are visible in the final documentation.

Related Skills

Explore More Design & Creative Skills→
RLufRLuf

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Community
Intermediate
mjunaidcamjunaidca
10

frontend-design

Generate frontend interfaces with HTML/CSS/JS or React and Vue.

Community
Basic
l3ochol3ocho

drift-detection

Identify and flag drift between documentation references and the codebase.

Community
Advanced
ricardops34ricardops34

reversa-design-system

Extract design tokens from CSS, theme configs, and token files into markdown.

Community
Intermediate