Does it support custom design systems?

Yes, while the skill includes built-in presets, the workflow is designed to help you migrate any hardcoded UI code into a structured, token-based system of your choice.

Does this skill change my app's functionality?

No, the workflow is specifically designed to preserve existing functionality and component APIs while only improving the visual implementation, code structure, and maintainability.

How does it handle accessibility?

The workflow includes a dedicated validation phase to ensure components meet WCAG 2.2 AA standards, including sufficient contrast ratios and minimum touch targets of 44x44pt.

Can I use this for new projects?

While this workflow is focused on refactoring existing code, it can be used for new projects; however, the 'design-system-foundation' skill is recommended for greenfield development.

Which frameworks are supported?

The skill is optimized for React Native and Next.js projects using TypeScript, focusing on modern styling patterns and component composition.

UI Refactoring Workflow

Name: UI Refactoring Workflow
Author: apexscaleai

byapexscaleai

•

디자인 도구

Refactors existing React Native and Next.js interfaces using modern design presets and accessibility standards while preserving core functionality.

This skill provides a systematic framework for transforming legacy or brownfield UI code into modern, aesthetically superior implementations. It guides Claude through a four-phase process: analyzing current component structures, selecting from curated design presets like glass-aesthetic or minimalist-modern, executing the refactor using standardized design tokens and TypeScript, and validating the results against WCAG accessibility standards and performance metrics. It is ideal for teams looking to modernize their tech stack without breaking existing application logic.

주요 기능

014 GitHub stars

02Systematic four-phase refactoring methodology for UI components

03Performance optimization through memoization and efficient styling patterns

04Seamless migration from hardcoded values to standardized design tokens

05Application of modern design presets including Minimalist, Glass, and Brutalist

06Comprehensive accessibility upgrades to WCAG 2.2 AA standards

사용 사례

01Modernizing outdated React Native components in brownfield applications

02Converting inline styles and hardcoded colors to a token-based design system

03Improving UI accessibility and touch target compliance for mobile apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add apexscaleai/claude-ui-design-system ui-refactoring-workflow

For use in Claude.ai and ChatGPT

Download Skill