skills.rest
DanSnow
DanSnowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/DanSnow/dotfiles --skill design-extractor
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
nicolas-deyrosnicolas-deyros

tailwind-css-patterns

Generate Tailwind CSS patterns for responsive layouts, typography, and dark mode.

Community
Advanced
riabtsevriabtsev

extract

Extract reusable UI components and design tokens into a TypeScript design system.

Community
Intermediate
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic
luanzebaluanzeba

extract

Identify reusable UI patterns and propose design tokens for design-system repositories.

Community
Intermediate