extract

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

The goal is not to capture every value in the codebase. The goal is to create constrained systems that reduce future design decisions and keep the interface coherent.

Consult the design-system alignment reference for tokens vs components vs patterns, drift, and how to avoid turning inconsistency into token sprawl.

MANDATORY PREPARATION

Users start this workflow with /extract. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

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