extract

Identify reusable UI components and design tokens for extraction.

Updated Oct 30, 2025

Search Tags:#components #patterns #refactor #tokens #ux #design-system #extract

Ready to run

npx skills add https://github.com/juanelojga/juanelojga-webpage --skill extract-juanelojga

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/juanelojga/juanelojga-webpage/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/juanelojga/juanelojga-webpage --skill extract-juanelojga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify opportunities to extract reusable UI patterns, components, and design tokens from your current project to build a cohesive design system. This helps reduce duplication, ensure visual consistency, and accelerate product development.

Core Features & Use Cases

Component extraction: Identify reusable UI components that appear across screens and modules.
Token creation: Draft design tokens for colors, typography, spacing, and elevation to enforce consistency.
Migration planning: Provide a clear path to refactor existing implementations into shared, reusable versions.

Quick Start

Propose a plan to extract reusable components and tokens from the target area and document migration steps.

Frequently Asked Questions about extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I identify reusable UI components and design tokens from overlapping elements?▼

To identify reusable UI components and design tokens, you analyze a target design area to find duplicate UI patterns and draft standardized tokens for colors, typography, and spacing. This process highlights extraction opportunities to consolidate visual consistency across your project.

What is the best way to plan a design system migration for existing UI variations?▼

The best way to plan a design system migration is to generate an extraction plan that specifies components to extract, tokens to create, variants to support, and naming conventions. This provides a clear migration path to refactor existing implementations into shared versions.

When do I need to extract design tokens and systematize UI patterns?▼

You need to extract design tokens and systematize UI patterns when your project has overlapping UI elements, multiple style variations, or an evolving design system. This extraction reduces duplication and ensures visual consistency across evolving product modules.

How do I document naming conventions and variants for a new design system?▼

To document naming conventions and variants for a new design system, you create an extraction plan that explicitly specifies the variants to support and the naming standards to apply. This ensures consolidated components remain standardized during migration.

Can I use this approach to refactor multiple style variations into shared components?▼

Yes, you can use this approach to refactor multiple style variations into shared components by proposing a plan to extract reusable components and tokens from the target area. The documented migration steps ensure existing implementations transition smoothly into the shared versions.