extract

What problem does it solve? Codebases accumulate duplicated UI patterns, hard-coded style values, and inconsistent component variations that increase maintenance cost and visual inconsistency. This Skill identifies those repeated patterns and consolidates them into a shared design system. ## Core Features & Use Cases - Pattern Discovery: Scans a target area to find repeated components, hard-coded colors, spacing, and typography values, and inconsistent implementations of the same concept. - Component & Token Extraction: Builds reusable components with typed props, variants, and accessibility support, plus semantically named design tokens. - Migration & Documentation: Replaces existing usages with shared versions, removes dead code, and updates component library documentation. - Use Case: A team notices three different button styles across their Next.js app. Use this Skill to consolidate them into one typed Button component with variants, migrate all call sites, and document it in the component library. ## Quick Start Ask the AI to extract reusable components and design tokens from a specific feature or directory in your project.