design-extractor

Audit frontend codebases for design token and component extraction opportunities.

2|Updated Nov 24, 2024

Search Tags:#react #design system #design tokens #code audit #tailwind #component extraction #frontend refactoring

Ready to run

npx skills add https://github.com/DanSnow/dotfiles --skill design-extractor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-extractor
Source: https://github.com/DanSnow/dotfiles/tree/main/private_dot_claude/skills/design-extractor
Command: npx skills add https://github.com/DanSnow/dotfiles --skill design-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about design-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit my frontend codebase for design token extraction opportunities?▼

Frontend design token auditing scans your codebase for hardcoded values, CSS variables, and repeated UI patterns to generate a structured proposal for semantic tokens and reusable components before implementation.

How do I extract reusable UI components from repeated patterns in a React and Tailwind project?▼

React and Tailwind component extraction detects repeated UI patterns like buttons and modals with similar inline styles, proposing a structured refactoring plan with variant components and updated CSS variables.

Can I audit Vue and Svelte codebases for design system refactoring opportunities?▼

Yes, design token and component extraction supports Vue, Svelte, React, and plain HTML/CSS, identifying hardcoded values and repeated patterns across multiple frontend stacks to establish a consistent design system.

What is the best way to identify hardcoded values and propose semantic CSS variables?▼

Design token auditing identifies hardcoded values across your codebase and proposes semantic CSS variables through a plan-first workflow, generating a detailed extraction proposal before any code is written.

Does design token extraction work with CSS Modules and vanilla CSS, or only Tailwind?▼

Design token extraction works with Tailwind, CSS Modules, and vanilla CSS, auditing all three styling approaches for hardcoded values and repeated UI patterns to create semantic tokens and reusable components.

Why does this approach generate a proposal before writing refactoring code?▼

The plan-first workflow generates a detailed extraction proposal before implementation to ensure alignment on design tokens and component refactoring, reducing duplication and establishing a consistent design system.