How does the extract skill find reusable patterns?

It uses LSP workspace symbols and pattern matching to identify repeated UI structures, inconsistent implementations, and hard-coded values across your codebase.

How does it handle migration of old code?

It uses LSP 'findReferences' and 'rename' functionality to safely replace legacy implementations with new, standardized components across the entire project.

Can this skill create a design system from scratch?

It is designed to enrich existing systems, but it can help establish a new one after prompting for a preferred location and structure.

Does it support accessibility?

Yes, when extracting components, the skill focuses on adding proper ARIA attributes, keyboard navigation, and focus management.

Design System Extractor

Name: Design System Extractor
Author: cinjoff

bycinjoff

•

Herramientas de Diseño

Identifies and consolidates reusable UI components, design tokens, and patterns into systematic design libraries.

This skill streamlines the evolution of frontend architectures by identifying redundant UI implementations and refactoring them into a unified design system. It analyzes workspaces for repeated patterns, hard-coded values, and inconsistent styles, then generates standardized, accessible components and semantic design tokens. By automating the migration of legacy code to these new shared resources using LSP-aware refactoring, it ensures codebase consistency while reducing technical debt in React, Vue, or other component-based projects.

Características Principales

01Automatic documentation generation for design system assets

02Automated pattern discovery via LSP and grep analysis

03Creation of accessible, production-ready UI components with TypeScript support

04Intelligent migration of existing instances to new shared components

05Extraction of hard-coded values into semantic design tokens

061 GitHub stars

Casos de Uso

01Transitioning hard-coded CSS values into a centralized, semantic token system

02Building a formal component library from an existing project's ad-hoc UI patterns

03Refactoring a codebase with multiple inconsistent button or input implementations

Características Principales

01Automatic documentation generation for design system assets

02Automated pattern discovery via LSP and grep analysis

03Creation of accessible, production-ready UI components with TypeScript support

04Intelligent migration of existing instances to new shared components

05Extraction of hard-coded values into semantic design tokens

061 GitHub stars

Casos de Uso

01Transitioning hard-coded CSS values into a centralized, semantic token system

02Building a formal component library from an existing project's ad-hoc UI patterns

03Refactoring a codebase with multiple inconsistent button or input implementations