Agent skill · design visual · aiskillstore
extract
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
Why this skill is useful
Provides a systematic approach to identifying and extracting reusable components and design tokens, which the AI may not generate reliably on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/extract