Skills
.Work. You
Rest

i-extract

Community

Systematize UI reuse.

Design & Creative#code reuse#design system#design tokens#pattern recognition#component extraction#ui systematization
Authorhi-yuki-922
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: i-extract
Download link: https://github.com/hi-yuki-922/accounting-assistant/archive/main.zip#i-extract

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.