extract

Solid

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

Data & Documents 13 stars 1 forks Updated 5 days ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
38
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
wzyxdwll
Repository
wzyxdwll/ccgx-workflow
Created
3 weeks ago
Last Updated
5 days ago
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents 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.

396 Updated yesterday
mxyhi
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 4 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,403 Updated 2 days ago
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.

241 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 3 days ago
AkaraChen