Skills
.Work. You
Rest

design-extractor

Community

Extract design tokens & components

Software Engineering#react#design system#design tokens#code audit#tailwind#component extraction#frontend refactoring
AuthorDanSnow
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you identify and extract reusable design tokens (like colors, spacing) and UI components from your frontend codebase, reducing duplication and establishing a consistent design system.

Core Features & Use Cases

  • Design Token Auditing: Scans for hardcoded values and proposes semantic CSS variables.
  • Component Identification: Detects repeated UI patterns (like buttons, modals, headers) for extraction.
  • Plan-First Workflow: Generates a detailed proposal before writing any code, ensuring alignment.
  • Use Case: You have a React + Tailwind project with many buttons and nav links that look similar but have slightly different inline styles. This Skill will propose a Button component with variants and a NavLink component, along with a plan to refactor your CSS variables.

Quick Start

Audit my React + Tailwind codebase for design token and component extraction opportunities.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-extractor
Download link: https://github.com/DanSnow/dotfiles/archive/main.zip#design-extractor

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.