skills.rest
hi-yuki-922
hi-yuki-922COMMUNITY
Explore all skills by this author →
WebsiteGitHub

i-extract

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

1|Updated Jan 15, 2026
Search Tags:#code reuse#design system#design tokens#pattern recognition#component extraction#ui systematization
One-click install
npx skills add https://github.com/hi-yuki-922/accounting-assistant --skill i-extract-hi-yuki-922
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-extract
Source: https://github.com/hi-yuki-922/accounting-assistant/tree/main/.claude/skills/i-extract
Command: npx skills add https://github.com/hi-yuki-922/accounting-assistant --skill i-extract-hi-yuki-922

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of inconsistent and duplicated UI elements within a project by identifying and consolidating reusable components, design tokens, and patterns into a centralized design system.

Core Features & Use Cases

  • Pattern Identification: Analyzes code to find repeated UI elements, hard-coded values, and inconsistent variations.
  • Design System Enrichment: Extracts identified patterns into well-defined, reusable components and design tokens.
  • Use Case: A developer can use this skill to scan a new feature's codebase, identify buttons and color usages that are already defined in the company's design system, and refactor the new feature to use those existing, standardized elements.

Quick Start

Use the i-extract skill to identify and plan the extraction of reusable button components from the 'src/components/common' directory.

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 and design tokens from existing code?▼

Design system enrichment extracts identified UI patterns into well-defined, reusable components and design tokens to ensure consistency and maintainability. It consolidates duplicated elements into a centralized library, replacing hard-coded values with standardized tokens.

How do I identify repeated UI elements and hard-coded values for systematization?▼

Pattern identification analyzes code to find repeated UI elements, hard-coded values, and inconsistent variations. It scans your codebase to locate duplicated structures and extract them into a centralized design system for consistent reuse.

Can I scan a specific directory like src/components/common to refactor new features?▼

You can scan specific directories like src/components/common to identify and plan the extraction of reusable button components. This enables you to refactor new features to use existing, standardized elements already defined in the design system.

What is the best way to consolidate inconsistent UI elements into a component library?▼

Systematically extract and consolidate inconsistent UI elements into a component library through structured planning, extraction, migration, and documentation. This ensures consistency and maintainability by replacing duplicated variations with standardized assets.

Do I need to plan migration and documentation when extracting design tokens?▼

Yes, extracting design tokens requires systematic planning, extraction, migration, and documentation. Documenting extracted assets ensures maintainability and consistency when refactoring code to use the newly consolidated design system.

Related Skills

Explore More Design & Creative Skills→
ZendevveZendevve
31

extract

Extract reusable UI components and design tokens into a design system.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
angelcreativeangelcreative

extract

Extract reusable UI components and design tokens from codebases.

Community
Intermediate