skills.rest
Olatisunkanmi
OlatisunkanmiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

i-extract

Extract reusable UI components and design tokens from front-end code and design artifacts.

8|1|Updated Mar 14, 2026
Search Tags:#ui#accessibility#frontend#refactor#design-system#design-tokens#component-extraction
One-click install
npx skills add https://github.com/Olatisunkanmi/claudefiles --skill i-extract-olatisunkanmi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-extract
Source: https://github.com/Olatisunkanmi/claudefiles/tree/main/skills/i-extract
Command: npx skills add https://github.com/Olatisunkanmi/claudefiles --skill i-extract-olatisunkanmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces duplication and inconsistency in UI code by identifying repeated patterns, hard-coded style values, and multiple implementations of the same concept, then extracting them into reusable components and design tokens to improve consistency and maintainability.

Core Features & Use Cases

  • Pattern discovery: Locate repeated components, layout patterns, and hard-coded styles across a codebase or design files.
  • Extraction & enrichment: Create accessible, well-typed component implementations with clear props and variants, and author a token schema for colors, spacing, and typography.
  • Migration & verification: Propose a migration plan, perform systematic replacements, run verification checks, and document changes for the design system.
  • Use case: Consolidate multiple button implementations into a single accessible Button component and a tokenized color palette, then update usages across the repository.

Quick Start

Extract reusable components and design tokens from the project's UI and propose a migration plan.

Frequently Asked Questions about i-extract

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

FAQPage Schema
How do I extract reusable UI components from existing front-end code?▼

To extract reusable UI components, apply this process to front-end repositories to locate repeated patterns and hard-coded styles, then consolidate them into accessible, well-typed component implementations with clear props and variants.

What is the best way to consolidate multiple button implementations into a single design system component?▼

The best way to consolidate multiple button implementations is to locate repeated variants across the codebase, create a single accessible Button component, author a tokenized color palette, and update usages across the repository.

How do I generate design tokens for colors, spacing, and typography from an existing UI?▼

Generate design tokens for colors, spacing, and typography by scanning design artifacts and front-end code for hard-coded style values, then authoring a structured token schema suitable for integration with existing design systems.

Can I use design token extraction to refactor UI code without breaking existing functionality?▼

Yes, design token extraction supports incremental integration by proposing a migration plan, performing systematic replacements, running verification checks, and documenting changes to refactor UI code without breaking existing functionality.

Does component extraction include accessibility requirements for the newly created UI components?▼

Yes, component extraction includes accessibility requirements by producing accessible, well-typed component implementations with clear props and variants, ensuring the extracted UI components meet accessibility standards during the migration process.

What are the limitations of using i-extract for UI pattern discovery and migration?▼

A limitation of i-extract for UI pattern discovery is that it relies on existing code and design artifacts to locate repeated components, meaning its effectiveness depends on the clarity and structure of the input front-end repositories.

Related Skills

Explore More Design & Creative Skills→
luyangliuableluyangliuable

extract

Identify reusable UI patterns and design tokens for design system consolidation.

Community
Advanced
YuDefineYuDefine
45

extract

Identify reusable components and design tokens for consolidation into a design system.

Official
Intermediate
sandeshbagmaresandeshbagmare

design-system-patterns

Generate design tokens and implement theme switchers for web and mobile UIs.

Community
Advanced
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic