skills.rest
celanthe
celantheCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

extract

Analyze UI components and design tokens to plan extraction into a design system.

7|2|Updated Mar 5, 2026
Search Tags:#patterns#tokens#design-system#reuse#extract#design-guidelines#component-library
One-click install
npx skills add https://github.com/celanthe/clarion --skill extract-celanthe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/celanthe/clarion/tree/main/.agents/skills/extract
Command: npx skills add https://github.com/celanthe/clarion --skill extract-celanthe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and consolidate reusable patterns, components, and design tokens into your design system to reduce duplication and accelerate product development.

Core Features & Use Cases

  • Identify and consolidate repeated UI patterns (buttons, cards, typography scales) into centralized components and tokens.
  • Enrich your library with design tokens for colors, spacing, typography, and surfaces, enabling consistent design across products.
  • Use Case: When teams build multiple features with similar UI, extract shared assets to maintain a single source of truth.

Quick Start

Extract and consolidate reusable components, design tokens, and patterns into the 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 design tokens from existing UI components?▼

To extract reusable design tokens, this Skill analyzes existing components, identifies repeated UI patterns like colors and spacing, and proposes a structured plan to consolidate them into a centralized design system. It then documents the migration steps to a single source of truth.

What is the best way to consolidate repeated UI patterns across multiple projects?▼

Consolidating repeated UI patterns involves identifying duplicated elements like buttons and cards, then extracting them into a centralized component library. This ensures cross-product consistency and reduces duplication by establishing a single source of truth for all teams.

Can I use this to migrate a multi-project UI library into a single design system?▼

Yes, you can apply this to multi-project UI libraries and token workflows. It analyzes your existing assets, proposes an extraction plan, and documents the migration steps needed to consolidate everything into a single structured design system.

When do I need to extract design tokens for my component library?▼

You need to extract design tokens when teams build multiple features with similar UI and duplication occurs. Extracting shared assets like typography scales and surfaces maintains consistency across products and accelerates development by centralizing the library.

How does this design system extraction process actually work?▼

The extraction process works by analyzing your current components and tokens, identifying reusable design guidelines, proposing a plan for extraction, and documenting the migration steps to a single source of truth to reduce duplication across teams.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

extract

Identify and consolidate reusable UI patterns and design tokens into a unified design system.

Community
Intermediate
CaneproCanepro

design-system-maintenance

Align design tokens, primitives, and component APIs across products.

Community
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-ui-widgets

Provide a structured library of Flutter UI widgets for consistent layouts.

Community
Intermediate
PavkaBrikaPavkaBrika
1

extract

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

Community
Intermediate