skills.rest
ky-zo
ky-zoCOMMUNITY
Explore all skills by this author →
GitHub

extract

Identify reusable UI patterns, components, and design tokens for consolidation.

Updated Aug 12, 2023
Search Tags:#components#migration#patterns#tokens#design-system#extract
One-click install
npx skills add https://github.com/ky-zo/kyzo --skill extract-ky-zo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/ky-zo/kyzo/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/ky-zo/kyzo --skill extract-ky-zo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify opportunities to consolidate reusable UI patterns, components, and design tokens into a centralized design system.

Core Features & Use Cases

  • Pattern extraction: Locate repeated UI patterns, tokens, and components to standardize across products.
  • Token creation & consolidation: Turn hard-coded values into semantic design tokens for reuse and maintainability.
  • Migration planning: Outline steps to replace scattered implementations with shared, versioned assets.
  • Documentation & governance: Update design-system docs and guidelines to reflect the new shared resources.

Quick Start

Identify and consolidate reusable patterns and tokens from the target area into the design 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 centralized design system?▼

To consolidate reusable UI patterns into a design system, locate repeated component implementations and hard-coded values, then standardize them into shared, versioned assets and semantic design tokens for ongoing maintenance.

How do I turn hard-coded styling values into semantic design tokens?▼

Turning hard-coded styling values into semantic design tokens involves identifying scattered styling implementations across products and converting them into centralized, reusable tokens to ensure maintainability and consistency.

What is the best way to plan a design-system migration across multiple products?▼

The best way to plan a design-system migration is to outline structured steps to replace fragmented UI implementations and inconsistent styling with shared, versioned assets, ensuring consistent updates to documentation and governance.

Can I use this to extract components from projects with fragmented UI implementations?▼

Yes, you can extract components from projects with fragmented UI implementations. The process identifies repeated UI patterns to standardize across products and supports structured component extraction to centralize shared resources.

When do I need to update design-system documentation and governance guidelines?▼

You need to update design-system documentation and governance guidelines after extracting new shared resources and tokens, ensuring the living system accurately reflects the newly standardized components and migration steps.

Related Skills

Explore More Design & Creative Skills→
jpoutrinjpoutrin
14

design-system

Detect hard-coded values and generate design system component structures.

Community
Basic
Tea-4-LifeTea-4-Life

extract

Extract reusable UI patterns, components, and design tokens into a centralized design system.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
tanaka-mambingetanaka-mambinge

extract

Extract reusable design tokens and components from UI patterns.

Community
Intermediate