skills.rest
Oussemasahbeni
OussemasahbeniCOMMUNITY
Explore all skills by this author →
Website𝕏@Spike_2002GitHub

extract

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

51|7|Updated Dec 25, 2025
Search Tags:#design system#design tokens#migration planning#component extraction#pattern library#ui refactor
One-click install
npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill extract-oussemasahbeni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/Oussemasahbeni/spartan-admin-dashboard/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill extract-oussemasahbeni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces UI inconsistency and maintenance cost by helping you identify repeated components, hard-coded design values, and recurring interaction patterns, then consolidate them into a coherent design system.

Core Features & Use Cases

  • Opportunity discovery: Analyzes a target area to find repeated UI patterns, variants, and candidate design tokens.
  • Extraction planning: Produces a structured plan covering which components to extract, which tokens to create, variant support, naming conventions, and a safe migration path.
  • Systematized consolidation: Guides refactoring so existing implementations are replaced with shared components, tokens, and documented patterns.
  • Use Case: When a dashboard page shows multiple button styles and mismatched spacing/typography rules, use this Skill to extract a unified button component and a tokenized spacing/typography set, then migrate the pages to the shared system.

Quick Start

Use the extract skill to analyze the target feature or UI area named "dashboard" and produce a prioritized plan for what to extract into reusable components, design tokens, and documented patterns.

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 from duplicated front-end code?▼

To extract reusable UI components from duplicated front-end code, you analyze target features to identify repeated UI patterns, hard-coded values, and variants, then consolidate them into a structured design system with typed component APIs.

What is the best way to start a design system migration for inconsistent UI patterns?▼

The best way to start a design system migration is by producing an extraction plan that covers which components to extract, naming conventions, variant requirements, and a safe migration path to replace existing implementations.

Can I use this to consolidate hard-coded styling values into design tokens?▼

Yes, you can consolidate hard-coded styling values into design tokens by identifying candidate tokens during opportunity discovery and defining token semantics to replace mismatched spacing and typography rules across features.

Does the extraction process support TypeScript-typed component APIs?▼

Yes, the extraction process supports TypeScript-typed component APIs by ensuring the extraction plan satisfies variant requirements, naming conventions, and documented usage guidance for the consolidated UI components.

When should I avoid extracting a UI pattern into a shared component?▼

You should avoid extracting a UI pattern when it is a one-off context-specific implementation, because the extraction process targets recurring UI patterns and duplicated implementations to ensure systematized consolidation and maintenance reduction.

How do I refactor multiple button styles into a unified component?▼

You refactor multiple button styles into a unified component by analyzing the target UI area to find repeated patterns and variants, then generating a prioritized extraction plan to migrate pages to the shared system.

Related Skills

Explore More Design & Creative Skills→
TheCardGoatTheCardGoat
14

extract

Extract reusable UI patterns and consolidate duplicated components into a design system.

Official
Intermediate
PavkaBrikaPavkaBrika
1

extract

Plans extraction of UI components and design tokens into a centralized system.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

design-system-patterns

Provide design tokens, theming infrastructure, and component architecture patterns.

Official
Intermediate
jpoutrinjpoutrin
14

design-system

Detect hard-coded values and generate design system component structures.

Community
Basic