skills.rest
HAR5HA-7663
HAR5HA-7663COMMUNITY
Explore all skills by this author →
GitHub

extract

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

Updated Mar 23, 2026
Search Tags:#component#refactor#tokens#design-system#extract#ui-patterns
One-click install
npx skills add https://github.com/HAR5HA-7663/Claude-Skills --skill extract-har5ha-7663
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/HAR5HA-7663/Claude-Skills/tree/main/extract
Command: npx skills add https://github.com/HAR5HA-7663/Claude-Skills --skill extract-har5ha-7663

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify reusable UI patterns, components, and design tokens and consolidates them into a shared design system to reduce duplication and improve consistency.

Core Features & Use Cases

  • Identify repeated UI patterns across projects and surface them as candidates for a system-wide component or token.
  • Plan extraction by defining which components, tokens, and patterns to generalize, along with migration steps and naming conventions.
  • Extract and enrich by creating reusable components, tokens, and documented patterns with guidance and examples.

Quick Start

Identify reusable patterns in my UI codebase and generate a plan to extract them into a shared 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 patterns from an existing product into a design system?▼

Yes, you can use it to consolidate design tokens by identifying repeated token usage across your UI codebase and outputting a structured migration plan with generalized tokens, naming conventions, and documentation guidance.

What do I need to start identifying repeated UI components for a system-wide refactor?▼

The Skill automates the extraction of UI patterns by identifying repeated components and design tokens across projects, then generating an extraction plan that includes variants, naming conventions, and migration steps to reduce duplication.

When should I use an automated tool to extract design tokens instead of manually auditing my UI codebase?▼

An automated extraction plan provides structured migration paths, naming conventions, and variant documentation, ensuring system-wide consistency during UI library refactors that manual auditing cannot efficiently scale to.

What's the best way to plan a UI library refactor to reduce component duplication?▼

The best way to plan a UI library refactor is to automate the identification of reusable components and design tokens, generating a structured extraction plan with naming conventions, variants, and a migration path to reduce duplication.

Related Skills

Explore More Design & Creative Skills→
zerx-labzerx-lab
62

gpui-patterns

Consolidate reusable GPUI UI patterns with runnable code samples.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

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

Community
Advanced
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced