skills.rest
vobase
vobaseOFFICIAL
Explore all skills by this author →
GitHub

extract

Extract reusable UI components, design tokens, and patterns from frontend codebases.

59|14|Updated Mar 1, 2026
Search Tags:#typescript#ui#accessibility#components#refactor#design-system#design-tokens
One-click install
npx skills add https://github.com/vobase/vobase --skill extract-vobase
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/vobase/vobase/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/vobase/vobase --skill extract-vobase

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts repeated UI patterns, hard-coded styles, and divergent component implementations to reduce duplication, improve consistency, and enable systematic reuse across a codebase. It helps teams consolidate scattered implementations into a single design system so that future development is faster, more consistent, and easier to maintain.

Core Features & Use Cases

  • Discovery: Locate the design system or shared UI surface, identify repeated components, hard-coded values, and inconsistent variations.
  • Planning: Propose which components, tokens, and patterns to extract, define naming conventions, variants, and a migration path.
  • Extraction & Enrichment: Create reusable, accessible TypeScript components, establish design tokens, and document usage and examples.
  • Migration & Cleanup: Systematically replace implementations, test for parity, and remove dead code.
  • Use Case: Consolidate three different button implementations into a single accessible Button component with semantic tokens for color and spacing and a migration plan to update all usages.

Quick Start

Use the extract skill to analyze your frontend components folder, identify repeated patterns and hard-coded values, propose reusable components and tokens, and provide a step-by-step migration plan.

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 a frontend codebase?▼

You can consolidate repeated UI patterns by running the extract skill on your feature folders; it identifies divergent component implementations and outputs standardized, TypeScript-friendly components with semantic design tokens and a migration path.

What is the best way to consolidate inconsistent component variations in a design system?▼

The best way to consolidate inconsistent component variations is to systematize them into a single design system, establishing naming conventions, accessible APIs, and documented design tokens to ensure visual and functional parity across the codebase.

How do I migrate hard-coded styles to semantic design tokens without breaking visual parity?▼

You can migrate hard-coded styles by extracting them into documented design tokens; the skill generates a migration plan to systematically replace implementations and test for visual and functional parity.

Can I use this to refactor a shared component library for accessibility and TypeScript?▼

Yes, you can apply this to shared component libraries to refactor for accessibility and TypeScript; it produces accessible APIs, TypeScript-friendly component implementations, and documented usage examples to standardize the library.

When should I extract design tokens and reusable patterns from my feature folders?▼

You should extract design tokens and reusable patterns when repeated UI patterns, hard-coded styles, or inconsistent component variations hinder maintainability and slow down future development across your frontend codebase.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

extract

Extract reusable UI components, design tokens, and layout patterns from frontend codebases.

Official
Advanced
VrooliVrooli
54

Code Cleanup

Remove deprecated implementations and dead exports after verified usage searches and test runs.

Official
Advanced
YuDefineYuDefine
45

normalize

Normalize frontend styling to align with design-system tokens and components.

Official
Advanced
aymenhamoudiiaymenhamoudii

extract

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

Community
Intermediate