skills.rest
luyangliuable
luyangliuableCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

extract

Identify reusable UI patterns and design tokens for design system consolidation.

Updated Mar 23, 2026
Search Tags:#refactoring#front-end#design system#design tokens#pattern extraction#ui components
One-click install
npx skills add https://github.com/luyangliuable/claude-setup --skill extract-luyangliuable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/luyangliuable/claude-setup/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/luyangliuable/claude-setup --skill extract-luyangliuable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you identify repeated UI patterns, hard-coded values, and inconsistent implementations so you can consolidate them into a cleaner, more maintainable design system.

Core Features & Use Cases

  • Pattern Discovery: Finds repeated components, layout patterns, and visual decisions that are good candidates for reuse.
  • Design Token Extraction: Converts hard-coded colors, spacing, typography, and other values into semantic tokens.
  • Systematic Migration: Guides refactoring of existing code to use shared components and tokens, improving consistency across the product.
  • Use Case: If a product has three different button styles and duplicated card layouts, this Skill helps extract the shared structure and standardize future usage.

Quick Start

Ask the skill to analyze a target area of your design or codebase and recommend which reusable components, tokens, and patterns should be extracted first.

Frequently Asked Questions about extract

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

FAQPage Schema
How do I extract design tokens from hard-coded front-end values?▼

To extract design tokens from hard-coded front-end values, identify repeated colors, spacing, and typography across your codebase and convert them into semantic tokens. This consolidates inconsistent implementations into a maintainable design system for future standardization.

What is UI pattern extraction for a design system?▼

UI pattern extraction for a design system is the process of finding repeated components, layout structures, and visual decisions across a codebase to consolidate them into shared, reusable elements. It targets duplicated UI components and inconsistent variants for systematic standardization.

How do I refactor existing code to use shared UI components and design tokens?▼

To refactor existing code to use shared UI components and design tokens, apply a systematic migration workflow that replaces hard-coded values and duplicated layouts with standardized alternatives. This includes migration planning, accessibility considerations, and documentation updates.

Does pattern extraction work for both design files and front-end codebases?▼

Yes, pattern extraction works for both design files and front-end codebases where repeated elements, hard-coded values, and inconsistent variants need systematic standardization. It identifies reusable UI patterns and design tokens across both environments for consolidation into a design system.

What's the best way to consolidate inconsistent button styles and card layouts?▼

The best way to consolidate inconsistent button styles and card layouts is to analyze the target area of your codebase to identify shared structures, extract them into reusable components and design tokens, and standardize future usage through systematic migration planning.

Related Skills

Explore More Design & Creative Skills→
OlatisunkanmiOlatisunkanmi
8

i-extract

Extract reusable UI components and design tokens from front-end code and design artifacts.

Community
Advanced
mxyhimxyhi
467

extract

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

Community
Advanced
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
oliverjone01-devoliverjone01-dev
1

extract

Extract reusable components, design tokens, and patterns from a codebase.

Community
Intermediate