skills.rest
luanzeba
luanzebaCOMMUNITY
Explore all skills by this author →
GitHub

extract

Identify reusable UI patterns and propose design tokens for design-system repositories.

Updated Aug 8, 2021
Search Tags:#ui#documentation#components#patterns#refactor#tokens#design-system
One-click install
npx skills add https://github.com/luanzeba/dotfiles --skill extract-luanzeba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract
Source: https://github.com/luanzeba/dotfiles/tree/main/skills/extract
Command: npx skills add https://github.com/luanzeba/dotfiles --skill extract-luanzeba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates scattered UI patterns, tokens, and component implementations into a unified design system, reducing duplication and accelerating cross-project consistency.

Core Features & Use Cases

  • Pattern discovery: identifies repeated components, layouts, and interaction patterns across projects.
  • Token planning: proposes design tokens for colors, typography, spacing, and elevation.
  • Migration guidance: provides steps to replace duplicate implementations with shared versions, with emphasis on accessibility and maintainability.
  • Documentation focus: updates design-system docs with usage guidelines and examples.

Quick Start

Identify a target area in your design system and start extracting reusable patterns and tokens today.

Frequently Asked Questions about extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I consolidate scattered UI patterns into a unified design system?▼

To consolidate scattered UI patterns into a unified design system, identify repeated components and layouts across projects, tokenize values for colors and typography, and define a migration plan to replace duplicates with shared versions.

What are design tokens and when do I need them for component libraries?▼

Design tokens are centralized variables for colors, typography, spacing, and elevation. You need them for component libraries to harmonize visual variations across projects and ensure maintainable, consistent UI implementations.

How do I plan a migration to replace duplicate UI implementations?▼

Plan a migration to replace duplicate UI implementations by defining governance steps that guide pattern extraction, token creation, and documentation, ensuring accessibility and maintainability throughout the transition.

Can I use this workflow to extract reusable patterns from existing repositories?▼

Yes, you can apply this workflow to design-system repositories and component libraries to capture repeated interaction patterns, tokenize values, and harmonize variations across existing codebases.

What is the best way to document design system components and tokens?▼

The best way to document design system components and tokens is to update design-system docs with clear usage guidelines, examples, and an ongoing maintenance plan to guide governance.

Why does UI consistency fail across multiple projects?▼

UI consistency fails across projects due to duplicated component implementations and scattered design patterns. Consolidating these into a unified design system with shared tokens reduces duplication and accelerates cross-project consistency.

Related Skills

Explore More Design & Creative Skills→
heyparth1heyparth1

extract

Extracts reusable UI components and design tokens from source code into a unified system.

Community
Advanced
pedronauckpedronauck
567

storybook-stories

Generate and refactor Storybook stories following project patterns and design tokens.

Community
Intermediate
Likas07Likas07

ui-designer

Generate UI design systems with design tokens and WCAG AA accessibility.

Community
Advanced
OussemasahbeniOussemasahbeni
51

normalize

Normalize front-end feature UI implementations to match a design system.

Community
Advanced