Extract reusable UI components and design tokens into a TypeScript design system.
npx skills add https://github.com/riabtsev/viscore_main --skill extract-riabtsev
Please help me install this Agent Skill. Skill: extract Source: https://github.com/riabtsev/viscore_main/tree/main/.github/skills/extract Command: npx skills add https://github.com/riabtsev/viscore_main --skill extract-riabtsev
It reduces UI inconsistency and duplicated implementation work by turning repeated frontend patterns, hard-coded values, and one-off components into a structured design system you can reuse.
Ask the AI: "Analyze the UI code in my selected folder and extract reusable components, design tokens, and patterns into our design system with a clear migration plan."
High-intent search queries and answers about installing and using this skill.
To extract UI components and design tokens, the system identifies repeated implementations and hard-coded styling values, then consolidates them into shared primitives and semantic tokens. It requires analyzing your codebase to locate high-value reusable parts and establishing a structured design system.
Systematizing hard-coded styling values involves identifying repeated patterns and converting them into semantic design tokens. The extraction process creates a token hierarchy with clear semantics, replacing inconsistent variants with documented, reusable primitives across your codebase.
Creating a migration plan involves defining which components and tokens to extract, establishing naming conventions, and outlining a step-by-step path to replace old implementations. This ensures a systematic transition from duplicated UI code to a unified design system.
Yes, you can generate accessible TypeScript component APIs during the extraction process. The system enriches extracted UI patterns by producing well-typed components with accessibility built-in, alongside pattern documentation with usage guidelines and examples.
Yes, UI refactoring requires identifying an existing design system structure first. The extraction process targets only high-value reusable parts from your current codebase, ensuring the extracted components and tokens integrate cohesively rather than creating a disjointed system.
A limitation of extracting design tokens is that it only targets high-value reusable parts, meaning highly fragmented or one-off UI implementations may not be prioritized. The system focuses on repeated patterns and requires existing structural identification to succeed.
SwimmingLiuExtract reusable UI components and design tokens from codebases.
AkaraChenExtract reusable components and design tokens into a design system.
JhabbigDesign scalable design system foundations with tokens, theming, and component architecture.
jpoutrinDetect hard-coded values and generate design system component structures.
