skills.rest
waynesutton
waynesuttonCOMMUNITY
Explore all skills by this author →
Website𝕏@waynesuttonGitHub

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
One-click install
npx skills add https://github.com/waynesutton/teleprompter --skill extract-waynesutton
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yahsan2yahsan2

refactor-html

Refactor HTML and TSX files to use existing UI components and semantic DaisyUI colors.

Community
Intermediate
pbakauspbakaus
57.3k

extract

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

Community
Intermediate
CertChain-IUHCertChain-IUH

extract

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

Official
Advanced
vanman2024vanman2024
10

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

Community
Advanced