skills.rest
silaslopes100
silaslopes100COMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-design-system

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

Updated May 19, 2026
Search Tags:#documentation#css#tailwind#tokens#ui-ux#design-system
One-click install
npx skills add https://github.com/silaslopes100/lojacarmenedaniel --skill reversa-design-system-silaslopes100
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/silaslopes100/lojacarmenedaniel/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/silaslopes100/lojacarmenedaniel --skill reversa-design-system-silaslopes100

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of documenting fragmented design systems in legacy projects by automatically extracting tokens from code and visual assets.

Core Features & Use Cases

  • Automated Extraction: Parses CSS, Tailwind configs, and UI library themes to identify design tokens.
  • Visual Verification: Uses screenshots to confirm and validate inferred design tokens.
  • Use Case: When inheriting a project without documentation, use this skill to generate a comprehensive design system guide including color palettes, typography, and spacing scales.

Quick Start

Run the reversa-design-system skill to scan the current project and generate the design 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 existing CSS and Tailwind configs?▼

Extract design tokens by parsing CSS and Tailwind configs to identify colors, typography, and spacing scales. The skill scans project source files and optional screenshots to generate comprehensive style documentation for legacy refactoring.

What is the best way to document a legacy design system with no existing style guide?▼

Document legacy design systems by automatically extracting tokens from CSS, Tailwind, and UI library themes. The skill validates inferred tokens using visual screenshots to ensure accurate mapping and comprehensive style guide generation.

Can I use visual screenshots to verify design tokens extracted from a UI library?▼

Yes, visual screenshots verify design tokens extracted from UI libraries. The skill uses screenshots to confirm and validate inferred tokens, ensuring accurate token mapping during design system auditing and style guide generation.

Do I need access to project source files to generate design documentation?▼

Yes, access to project source files is required to generate design documentation. The skill parses CSS, Tailwind configs, and UI library themes to ensure accurate token mapping during extraction and style guide generation.

What types of design tokens can be extracted from a project configuration?▼

Extractable design tokens include colors, typography, and spacing scales. The skill parses CSS, Tailwind configs, and UI library themes to identify these tokens during design system auditing and legacy project refactoring.

Related Skills

Explore More Design & Creative Skills→
TwuanMinnTwuanMinn

tailwind-patterns

Provides a CSS-first Tailwind v4 pattern library with container queries and design tokens.

Community
Advanced
sandecosandeco
1.5k

reversa-design-system

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

Community
Intermediate
afsjrafsjr

reversa-design-system

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

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced