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.

主な機能

4 GitHub stars
Systematic four-phase refactoring methodology for UI components
Performance optimization through memoization and efficient styling patterns
Seamless migration from hardcoded values to standardized design tokens
Application of modern design presets including Minimalist, Glass, and Brutalist
Comprehensive accessibility upgrades to WCAG 2.2 AA standards

ユースケース

Modernizing outdated React Native components in brownfield applications
Converting inline styles and hardcoded colors to a token-based design system
Improving UI accessibility and touch target compliance for mobile apps

概要

主な機能

4 GitHub stars
Systematic four-phase refactoring methodology for UI components
Performance optimization through memoization and efficient styling patterns
Seamless migration from hardcoded values to standardized design tokens
Application of modern design presets including Minimalist, Glass, and Brutalist
Comprehensive accessibility upgrades to WCAG 2.2 AA standards

ユースケース

Modernizing outdated React Native components in brownfield applications
Converting inline styles and hardcoded colors to a token-based design system
Improving UI accessibility and touch target compliance for mobile apps