extract

Solid

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

Data & Documents 389 stars 36 forks Updated today Apache-2.0

Install

View on GitHub

Quality Score: 92/100

Stars 20%
86
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

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...

Details

Author
mxyhi
Repository
mxyhi/ok-skills
Created
3 months ago
Last Updated
today
Language
C#
License
Apache-2.0

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Listed

extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

22 Updated 2 days ago
AkaraChen
AI & Automation Solid

extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

5,395 Updated today
fengshao1227
AI & Automation Solid

extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

240 Updated today
joewinke
AI & Automation Solid

extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

226 Updated yesterday
AkaraChen
Data & Documents Listed

extract

extract 抽取:识别 reusable components/design tokens/patterns,整合进设计系统。

12 Updated 3 days ago
wzyxdwll