refactor-ui

Name: refactor-ui
Rating: 92
Author: JasianE

Refactor a given UI to visually match a provided reference (HTML + screenshot) without changing functionality.

Core Rules

•
No functionality changes
- •Do not change data flow, API calls, routing, state, or behavior.
- •Visual/layout/styling changes only.
•
Render data-backed UI only
- •If the reference design includes elements that have no data in the app, do not render them.
- •Do not create placeholders, mock values, or fake metrics.
•
Reference-driven styling
- •Match layout, spacing, typography, colors, and component structure to the reference as closely as possible.
- •Prioritize refactoring existing components over creating new ones.

The user will provide:

Use this skill when reskinning or visually refactoring any UI to match a reference design while keeping all existing behavior intact.

•
Identify scope
- •Determine which pages/components are in scope.
- •Identify available data and existing components.
•
Map reference → app
- •Map each reference UI element to an existing data-backed element.
- •Explicitly omit any reference elements without data.
•
Create a plan
- •List files to change.
- •List which reference elements will be implemented vs omitted.
- •Describe layout/styling changes at a high level.
•
Wait for approval
- •Do not modify code until the plan is approved.
•
Implement
- •Apply visual refactor only.
- •Preserve all component APIs and logic.
•
Verify
- •Confirm behavior is unchanged.
- •Summarize changes and omitted elements.