---
name: Extract
slug: extract
category: Frontend
description: Extract identifies reusable UI patterns, components, and design tokens, then consolidates them into a design system. Use it when refactoring repeated UI, creating shared components, or adding tokens for consistency.
github: "https://github.com/AkaraChen/aghub/tree/main/.agents/skills/extract"
language: TypeScript
stars: 264
forks: 17
install: "npx degit https://github.com/AkaraChen/aghub/tree/main/.agents/skills/extract ~/.claude/skills/extract"
installs_to: ~/.claude/skills/extract
source_path: .agents/skills/extract/SKILL.md
collection_size: 25
category_size: 600
collection_url: "https://dirskills.com/collections/AkaraChen/aghub"
added: 2026-09-02T05:20:01.743Z
last_synced: 2026-09-02T05:20:01.743Z
canonical_url: "https://dirskills.com/skills/extract"
---

# Extract

Extract identifies reusable UI patterns, components, and design tokens, then consolidates them into a design system. Use it when refactoring repeated UI, creating shared components, or adding tokens for consistency.

**Install:**

```bash
npx degit https://github.com/AkaraChen/aghub/tree/main/.agents/skills/extract ~/.claude/skills/extract
```

## README

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

## Discover

Analyze the target area to identify extraction opportunities:

1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
    - Component organization and naming conventions
    - Design token structure (if any)
    - Documentation patterns
    - Import/export conventions

    **CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.

2. **Identify patterns**: Look for:
    - **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
    - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
    - **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
    - **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing

3. **Assess value**: Not everything should be extracted. Consider:
    - Is this used 3+ times, or likely to be reused?
    - Would systematizing this improve consistency?
    - Is this a general pattern or context-specific?
    - What's the maintenance cost vs benefit?

## Plan Extraction

Create a systematic extraction plan:

- **Components to extract**: Which UI elements become reusable components?
- **Tokens to create**: Which hard-coded values become design tokens?
- **Variants to support**: What variations does each component need?
- **Naming conventions**: Component names, token names, prop names that match existing patterns
- **Migration path**: How to refactor existing uses to consume the new shared versions

**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.

## Extract & Enrich

Build improved, reusable versions:

- **Components**: Create well-designed components with:
    - Clear props API with sensible defaults
    - Proper variants for different use cases
    - Accessibility built in (ARIA, keyboard navigation, focus management)
    - Documentation and usage examples

- **Design tokens**: Create tokens with:
    - Clear naming (primitive vs semantic)
    - Proper hierarchy and organization
    - Documentation of when to use each token

- **Patterns**: Document patterns with:
    - When to use this pattern
    - Code examples
    - Variations and combinations

**NEVER**:

- Extract one-off, context-specific implementations without generalization
- Create components so generic they're useless
- Extract without considering existing design system conventions
- Skip proper TypeScript types or prop documentation
- Create tokens for every single value (tokens should have semantic meaning)

## Migrate

Replace existing uses with the new shared versions:

- **Find all instances**: Search for the patterns you've extracted
- **Replace systematically**: Update each use to consume the shared version
- **Test thoroughly**: Ensure visual and functional parity
- **Delete dead code**: Remove the old implementations

## Document

Update design system documentation:

- Add new components to the component library
- Document token usage and values
- Add examples and guidelines
- Update any Storybook or component catalog

Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.