Refactoring UI

To refactor UI code consistently, this Skill identifies repeated UI patterns, maps them to existing design system components, extracts new shared components if needed, and applies design tokens to replace hardcoded values.

Identifying repeated UI patterns is done by scanning the codebase to find standardizable design elements, matching them to existing components for reuse, and extracting new shared components for unmatched patterns.

The best way to replace hardcoded values with design tokens is to apply the refactoring process, which automatically maps identified UI patterns to components and substitutes hardcoded values with standardized design tokens for consistency.

Yes, you need prior knowledge of design systems and UI patterns to use this UI refactoring process, as it is designed for real-time code reviews, tech debt sprints, and mapping patterns to design system components.

Yes, you can validate accessibility and responsiveness when refactoring UI components, as the process includes a validation step to ensure no visual regressions and that accessibility standards are maintained.

You should avoid using design system pattern identification for UI refactoring if your application has no repeated UI patterns to standardize or if your codebase lacks a design system to map extracted components to.