extract

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/labohemez/kangnam-church-reservation --skill extract-labohemez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/labohemez/kangnam-church-reservation/tree/main/.claude/skills/extract
Command: npx skills add https://github.com/labohemez/kangnam-church-reservation --skill extract-labohemez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.

Core Features & Use Cases

  • Discover: Analyze the target areas to locate your design system, understand its structure, naming conventions, token structure, and documentation patterns.
  • Plan Extraction: Create a systematic extraction plan detailing components to extract, tokens to create, variants to support, naming conventions, and a migration path.
  • Extract & Enrich: Build reusable components with clear props, accessible API, tokens with semantic naming, and documented usage patterns.
  • Migrate: Find all instances, replace with shared versions, test thoroughly, and delete dead code.
  • Document: Update design system documentation with new components, tokens, and usage guidelines.

Quick Start

Identify reusable patterns, components, and design tokens, then outline a plan to extract and consolidate them into the design system.

Frequently Asked Questions about extract

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

FAQPage Schema
What's the best way to extract reusable UI patterns into a design system?▼

The best way to extract reusable UI patterns is to analyze your codebase structure and naming conventions, then create a systematic extraction plan detailing components, tokens, variants, and migration paths to consolidate them into a design system.

How do I identify and consolidate design tokens during a component refactor?▼

To consolidate design tokens during a component refactor, analyze your target areas to locate existing token structures, then extract and enrich them with semantic naming to ensure systematic reuse across your design system.

Can I use this for UI codebase migration to replace duplicate components?▼

Yes, you can use this for UI codebase migration by finding all instances of duplicate components, replacing them with shared versions, testing thoroughly, and deleting dead code to ensure a clean migration path.

What documentation is needed when adding new components to a design system?▼

Documentation for new design system components should include clear props, accessible APIs, semantic token naming, documented usage patterns, and updated guidelines to support systematic reuse and future refactors.

When do I need to plan an extraction for my component library?▼

You need to plan an extraction for your component library when you discover reusable UI patterns that require consolidation, requiring a systematic plan for components, tokens, variants, naming conventions, and migration paths.

Does this approach handle accessibility when building extracted components?▼

Yes, this approach handles accessibility during the extraction process by ensuring built reusable components have a clear accessible API, clear props, and documented usage patterns integrated into the design system.