extract

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:

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.

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

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. Weekly Installs17.4KRepositorypbakaus/impeccableGitHub Stars10.2KFirst Seen14 days agoSecurity AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex17.2Kopencode17.1Kgithub-copilot17.1Kgemini-cli17.0Kcursor17.0Kamp17.0K