skills.rest
ev3rlit
ev3rlitCOMMUNITY
Explore all skills by this author →
GitHub

extract

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

Updated Apr 2, 2026
Search Tags:#refactor#design-system#component-library#ui-architecture#pattern-reuse#token-extraction
One-click install
npx skills add https://github.com/ev3rlit/magam-canonical-archive --skill extract-ev3rlit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/ev3rlit/magam-canonical-archive/tree/main/.claude/skills/extract
Command: npx skills add https://github.com/ev3rlit/magam-canonical-archive --skill extract-ev3rlit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and consolidate reusable components, design tokens, and patterns into a design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

Core Features & Use Cases

  • Identify repeated components and patterns across UI/codebases to consolidate into shared assets.
  • Normalize hard-coded values into design tokens and create a scalable component library.
  • Use cases include refactoring, building a design system, and enriching UI consistency across products.

Quick Start

Identify repeated UI patterns in your codebase and extract them into a shared design-system library.

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 UI values?▼

To extract design tokens from hard-coded UI values, this Skill analyzes your target UI codebase to locate repeated patterns, normalizes hard-coded values into centralized tokens, and documents naming conventions to guide scalable design-system evolution.

How do I identify reusable UI components for a design system?▼

Identifying reusable UI components for a design system involves scanning your codebase for repeated patterns and attributing them to a shared component library. This Skill locates systematic reuse opportunities and documents an extraction plan for consolidation.

What is UI architecture pattern reuse and when do I need it?▼

UI architecture pattern reuse is the practice of consolidating repeated interface elements into shared assets. You need it when refactoring repeated UI patterns, building a design system, or enriching UI consistency across multiple products.

Can I use this to refactor an existing component library?▼

Yes, you can use this Skill to refactor an existing component library. It analyzes your target UI codebases to find systematic reuse opportunities and documents migration steps to enrich your current component library.

What's the best way to document a design system migration plan?▼

The best way to document a design system migration plan is to outline token naming conventions and extraction steps. This Skill generates documentation detailing extraction plans and migration steps to guide scalable design-system evolution.

Related Skills

Explore More Design & Creative Skills→
JiaxuanZou0714JiaxuanZou0714
5

extract

Extract reusable components and design tokens into a structured design system.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
HuijiroHuijiro

impeccable-extract

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

Community
Advanced
ky-zoky-zo

extract

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

Community
Advanced