skills.rest
Davie521
Davie521COMMUNITY
Explore all skills by this author →
GitHub

extract

Extract reusable UI components, tokens, and patterns into a design system.

7|Updated Mar 4, 2026
Search Tags:#consistency#refactor#design-system#design-tokens#ui-patterns#component-extraction
One-click install
npx skills add https://github.com/Davie521/claude-skills --skill extract-davie521
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/Davie521/claude-skills/tree/main/plugins/design/skills/extract
Command: npx skills add https://github.com/Davie521/claude-skills --skill extract-davie521

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and consolidate reusable components, design tokens, and patterns into your design system to enable systematic reuse and enrich your component library.

Core Features & Use Cases

  • Identify reusable patterns, components, and design tokens from your design library
  • Plan extraction and migration to create a cohesive set of shared components and tokens
  • Use cases include creating components, refactoring repeated UI patterns, building a design system, or extracting tokens

Quick Start

Analyze the target design library and extract reusable components, tokens, and patterns into the design system.

Frequently Asked Questions about extract

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

FAQPage Schema
How do I extract reusable UI components from an existing design library?▼

Identify repeated UI patterns within your design library, plan the extraction and migration process, and consolidate them into a shared design system to improve consistency and reuse across products.

What is the best way to consolidate design tokens and UI patterns into a design system?▼

Consolidating design tokens and UI patterns requires discovering repeated visual elements, extracting them from your design library, and enriching the component repository to enable systematic reuse across products.

Can I use this to refactor repeated UI patterns into shared components?▼

Yes, you can refactor repeated UI patterns by identifying extraction opportunities, planning the migration, and consolidating the repeated elements into shared components within your design system.

Does the component extraction process include documentation and migration planning?▼

Yes, the component extraction process covers discovery, extraction planning, enrichment of components and tokens, migration, and documentation to ensure a cohesive design system implementation.

When should I extract design tokens from my current design library?▼

You should extract design tokens when you need to improve consistency across products, enabling systematic reuse by consolidating scattered UI patterns and variables into a cohesive design system.

Related Skills

Explore More Design & Creative Skills→
han-so1omonhan-so1omon
1

extract

Identify reusable UI patterns, components, and design tokens for consolidation into a design system.

Community
Advanced
HAR5HA-7663HAR5HA-7663

extract

Identify reusable UI patterns and generate a design system extraction plan.

Community
Intermediate
SL-A-SHSL-A-SH

normalize

Normalize UI features to match a project's design system using tokens and components.

Community
Advanced
Kael-DeanKael-Dean

extract

Identify and consolidate reusable UI patterns, components, and design tokens into a design system.

Community
Intermediate