extract

Extract reusable components, design tokens, and patterns into a design system.

5|1|Updated May 31, 2026

Search Tags:#documentation #migration #design-system #design-tokens #extract #ui-patterns #component-library

Ready to run

npx skills add https://github.com/waynesutton/teleprompter --skill extract-waynesutton

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/waynesutton/teleprompter/tree/main/.cursor/skills/extract
Command: npx skills add https://github.com/waynesutton/teleprompter --skill extract-waynesutton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

Core Features & Use Cases

Analyze the target area to identify extraction opportunities across design systems, component libraries, and token ecosystems.
Create a structured extraction plan covering components, tokens, variants, migrations, and documentation.
Migrate and document extracted patterns to ensure consistency and maintainability within the design system.

Quick Start

Analyze your current UI library to locate repeated patterns and start extracting them into a shared design system.

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 patterns into a design system?▼

Extracting design tokens involves identifying repeatable UI variables across your component library and consolidating them into a structured design system to ensure consistency and scalability.

What is the best way to refactor repeated UI components into a shared component library?▼

Refactoring repeated UI components requires a structured extraction plan covering token migration, variant enrichment, and documentation to support safe integration into a shared component library.

Can I use this to plan a design system migration for an existing UI library?▼

Yes, you can plan a design system migration by analyzing your existing UI library to locate extraction opportunities, then following a structured plan for migration and documentation.

When do I need to extract design tokens from my current UI?▼

You need to extract design tokens when your UI contains repeated visual patterns that require systematic consolidation to maintain consistency and support scalable component integration.

Does this approach provide documentation for extracted UI patterns?▼

Yes, the approach provides structured documentation steps for extracted UI patterns, ensuring that migrated components and design tokens remain maintainable within the design system.