extract
Identifies and extracts reusable UI components and design tokens into a central design system.
Install
mkdir -p .claude/skills/extract-puripong1st && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13880" && unzip -o skill.zip -d .claude/skills/extract-puripong1st && rm skill.zipInstalls to .claude/skills/extract-puripong1st
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.Key capabilities
- →Identify repeated UI components
- →Detect hard-coded values for design tokens
- →Assess reuse value of patterns
- →Create well-designed components with clear APIs
- →Document token usage and guidelines
- →Replace existing uses with new shared versions
How it works
The skill analyzes a target area to find reusable patterns, components, and design tokens, then plans and executes their extraction into a design system.
Inputs & outputs
When to use extract
- →Consolidate reusable UI components
- →Define design tokens
- →Refactor inconsistent UI patterns
About extract
Analyzes the codebase to find patterns, duplicated components, and hardcoded values. Helps systematize UI logic into a reusable design library.
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
When not to use it
- →Extract one-off, context-specific implementations without generalization
- →Create components so generic they're useless
- →Extract without considering existing design system conventions
Limitations
- →The skill does not create a design system if one does not exist without explicit instruction
- →The skill does not create tokens for every single value
- →The skill does not skip proper TypeScript types or prop documentation
How it compares
This skill provides a structured, systematic approach to design system extraction, contrasting with ad-hoc or manual refactoring efforts.
Compared to similar skills
extract side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| extract (this skill) | 0 | 6mo | No flags | Intermediate |
| redesign-existing-projects | 0 | 4mo | No flags | Intermediate |
| Dark Mode Migrator | 0 | 8mo | Review | Beginner |
| ui-ux-pro-max | 1,909 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
redesign-existing-projects
TJSNDHU
Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.
Dark Mode Migrator
tyrantpiper
Batch migration tool for adding dark mode support to React components
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.