System Documentation

What problem does it solve?

This Skill helps in identifying and consolidating reusable components, design tokens, and patterns from existing codebases into a centralized design system, thereby improving consistency and efficiency.

Core Features & Use Cases

  • Pattern Identification: Detects repeated UI elements, hard-coded values, and inconsistent variations.
  • Systematic Extraction: Plans and executes the extraction of components and design tokens.
  • Enrichment: Builds improved, reusable versions with proper APIs, variants, and accessibility.
  • Use Case: Refactoring a project to extract a common button component and its associated color tokens into a shared design system library.

Quick Start

Analyze the current project to identify reusable UI patterns and extract them into the design system.

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: extract
Download link: https://github.com/Akenzz/Breaking-Bug/archive/main.zip#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.