extract

Identify reusable UI patterns and plan their consolidation into a design system.

3|1|Updated Mar 5, 2024

Search Tags:#refactor #design-system #tokenization #design-tokens #ui-patterns #component-library

Ready to run

npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill extract-chuan-khuna

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/chuan-khuna/digital-garden-2024/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill extract-chuan-khuna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams often struggle with scattered patterns, tokens, and components across design libraries, leading to inconsistency and maintenance overhead. This Skill helps identify opportunities for consolidation and systematic reuse, enriching the component library and design tokens.

Core Features & Use Cases

Identify repeated UI patterns and hard-coded values that should be tokenized.
Plan and consolidate components, patterns, and tokens into a centralized design system.
Provide a migration roadmap to replace scattered implementations with shared, reusable assets.

Quick Start

Identify reusable patterns in your UI, then consolidate them into a system.

Frequently Asked Questions about extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I consolidate reusable UI patterns into a single design system?▼

Hard-coded values should be tokenized when they represent repeated UI patterns like colors or spacing. Tokenization consolidates these scattered values into a centralized design system, reducing inconsistency and maintenance overhead across component libraries.

What is the process for extracting design tokens from existing component libraries?▼

Extracting design tokens involves discovering repeated hard-coded values across your component library, documenting these tokenization opportunities, and planning a migration roadmap to replace scattered implementations with shared assets.

How do I plan a migration roadmap to refactor scattered UI components into a shared library?▼

Refactoring scattered UI components requires documenting discovered patterns and planning an extraction strategy. This migration roadmap guides teams to replace duplicated implementations with shared, reusable assets in the centralized design system.

Can this design-system extraction process guide documentation without executing code refactoring?▼

Yes, this design-system extraction process guides discovery, documentation, and extraction planning without executing code itself. It helps teams identify consolidation opportunities and plan systematic reuse rather than performing automated refactoring.

When do I need to identify opportunities for design token consolidation across my design resources?▼

You need to identify opportunities for design token consolidation when UI teams struggle with scattered patterns and hard-coded values across design libraries, causing inconsistency and high maintenance overhead in your component library.