extract

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

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/davidbasilefilho/skills --skill extract-davidbasilefilho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/davidbasilefilho/skills/tree/main/skills/extract
Command: npx skills add https://github.com/davidbasilefilho/skills --skill extract-davidbasilefilho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and consolidate reusable components, design tokens, and patterns into your design system to reduce duplication and improve consistency across products.

Core Features & Use Cases

  • Identify repeated UI patterns, hard-coded values, and inconsistent variations across a codebase or design repository.
  • Extract these patterns into reusable components and tokens, with clear naming, variants, and documentation.
  • Migrate existing implementations to the shared versions and update design-system documentation to reflect the changes.

Quick Start

Identify opportunities to extract reusable UI patterns and tokens, then implement them as shared design-system assets.

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 from an existing codebase?

To extract reusable UI patterns, you identify repeated components, hard-coded values, and inconsistent variations across a codebase, then consolidate them into a unified design system with clear naming, variants, and documentation.

What's the best way to consolidate design tokens and components across multiple products?

Consolidating design tokens and components requires identifying duplicated patterns, extracting them into shared assets with standardized naming, and providing migration guidance to update existing implementations and documentation across products.

Can I use this approach to migrate hard-coded values into a component library?

Yes, you can migrate hard-coded values by identifying inconsistent variations across your codebase, extracting them into reusable design tokens, and replacing existing implementations with the shared component library versions.

What is a design token extraction plan and how does it work?

A design token extraction plan identifies hard-coded values and repeated patterns in a UI codebase, defines a strategy to unify them into named tokens, and provides documentation and migration guidance for integrating the shared tokens into existing implementations.

Does extracting a design system require a specific framework or component structure?

No specific framework is required, but the extraction process expects explicit frontmatter with a name and description, a clear extraction plan for components and tokens, and migration guidance for integration and documentation.