What does this skill do?

The UI Polishing Skill applies specific front-end design and engineering techniques to make your interfaces feel polished and professional. It checks nested corner radii, optical alignment, borders, shadows, text fit, numerical readability, motion, and touch areas, returning a concise table of before-and-after changes.

Spacing and Radius Review
Adjusts the radii of nested corners so that the padding is visually consistent between parent and child elements.
Typography and Numeric Readability
Apply the "text-wrap: balance/pretty" and "tabular-nums" properties to prevent visual breaks in counters and prices.
Interaction States
Define hover, active, focus, load, and empty states with explicit transitions and appropriate touch gestures.
Borders, Shadows, and Images
Add subtle outlines to images and shadows using transparent layers that work on any background.

Usage examples

📐 Complete Review
Take a look at this product card and give me some UI refinement recommendations, including before-and-after examples.
🔤 Counters that jump
The cart counter jumps when I change the digits. How do I fix this with tabular-nums?
🎯 Button States
Add hover, active, and focus states to these buttons with explicit transitions and a press effect.
🖼️ Images that blend together
The images in my list blend into the background. Apply a subtle outline that works in both light and dark modes.

Features

Concentric radius Calculate the outer radius as the inner radius plus padding to ensure visual consistency in nested surfaces.
Optical Alignment Adjusts the visual alignment of asymmetrical icons with pixel-level offsets.
Explicit transitions Avoid using `transition: all` and specify only the properties that have changed, with appropriate durations and easing.
Expanded touch areas Ensure that controls are at least 44x44px by using pseudo-elements to expand the clickable area.
Before-and-After Table Returns a concise summary of the changes made, omitting anything that did not require modification.

Frequently asked questions

No. This skill works with Claude Code or Cowork without any additional configuration. You just need to have your frontend code accessible.
Not automatically. It returns a table showing the changes before and after, along with the specific CSS properties and file paths so you can apply the changes.
Yes. The principles of styling (spacing, typography, shadows, transitions) are framework-agnostic and apply to plain CSS, Tailwind, styled-components, etc.
Yes. The skill includes specific recommendations for `prefers-color-scheme`, such as image outlines with neutral alpha values that work in both modes.
Refining UI Interfaces — Design and Front-End Details with Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.