skills.rest
nsuberi
nsuberiCOMMUNITY
Explore all skills by this author →
GitHub

extract

Identify and consolidate reusable UI components, tokens, and patterns into a centralized design system.

Updated Jul 5, 2025
Search Tags:#refactor#design-system#design-tokens#ui-patterns#component-library#component-extraction#token-migration
One-click install
npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill extract-nsuberi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/nsuberi/proto-portal-showcase-hub/tree/main/apps/ai-builders-portal/.claude/skills/extract
Command: npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill extract-nsuberi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates scattered UI components, design tokens, and patterns into a single, interoperable design system, reducing duplication and inconsistency across products.

Core Features & Use Cases

  • Identify reusable patterns, components, and tokens across projects.
  • Consolidate findings into a design-system-ready library with migration guidance.
  • Provide naming conventions and variant strategies to standardize UI across teams.

Quick Start

Provide a target design-system directory or repository and initiate the extraction workflow.

Frequently Asked Questions about 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 multiple projects?▼

To extract reusable UI components and design tokens, this workflow analyzes repository structures to inventory existing patterns and consolidate them into a centralized, design-system-ready library, reducing duplication and inconsistency across products.

What is the best way to consolidate scattered design tokens into a shared component library?▼

The best way to consolidate scattered design tokens into a shared component library is by analyzing repository structures to inventory existing tokens and components, which proposes migration steps and naming conventions to standardize UI across teams.

How do I standardize UI patterns and naming conventions across different teams?▼

You can standardize UI patterns and naming conventions across teams by identifying reusable components and tokens from your projects, then applying proposed naming conventions and variant strategies to ensure consistency across your shared design system.

Can I use this to plan a design token migration for an existing multi-project repository?▼

Yes, you can use this to plan a design token migration for an existing multi-project repository. The workflow analyzes repository structures to inventory current tokens and components, then proposes specific migration steps to guide your refactoring efforts.

Do I need a dedicated design system directory to start the component extraction workflow?▼

You need to provide a target design-system directory or repository to initiate the component extraction workflow. This serves as the centralized location where your identified UI patterns, tokens, and components will be consolidated during the refactoring process.

Related Skills

Explore More Design & Creative Skills→
petrSimonidesXartpetrSimonidesXart

codebase-scan

Generate a codebase tree and key files list from a repository.

Community
Intermediate
effiemincereffiemincer

extract

Identify reusable UI patterns, components, and design tokens for consolidation into centralized systems.

Community
Intermediate
buchananwillbuchananwill
2

mandate-ui-design

Evaluate UI designs for semantic tokens, composability, and theming.

Community
Intermediate
Lin-0096Lin-0096

extract

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

Community
Intermediate