skills.rest
tuanemuy
tuanemuyCOMMUNITY
Explore all skills by this author →
GitHub

polish

Audit frontend UI alignment, spacing, typography, and micro-interactions across breakpoints.

Updated Feb 27, 2025
Search Tags:#design#ui#consistency#accessibility#frontend#polish#visual-design
One-click install
npx skills add https://github.com/tuanemuy/dotfiles --skill polish-tuanemuy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/tuanemuy/dotfiles/tree/main/config/claude/skills/polish
Command: npx skills add https://github.com/tuanemuy/dotfiles --skill polish-tuanemuy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to perform a final polish pass on frontend UI to fix alignment, spacing, typography, and micro-interactions before release, ensuring a consistent, high-quality user experience.

Core Features & Use Cases

  • Alignment and spacing polish: Verify grid adherence, consistent spacing, and optical alignment across breakpoints.
  • Typography and color consistency: Normalize font scales, line heights, contrast, and token-driven colors.
  • Interactive states and micro-effects: Validate hover, focus, active, loading, and error states for accessibility and polish.
  • Use Case: When shipping a new feature, run polish to align UI components with design tokens and provide a visually cohesive experience.

Quick Start

Polish the target UI by auditing alignment, spacing, typography, color contrast, and micro-interactions across desktop and mobile breakpoints.

Frequently Asked Questions about polish

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix UI alignment and spacing inconsistencies before a frontend release?▼

Fix UI alignment and spacing inconsistencies by running a structured polish audit that verifies grid adherence, optical alignment, and design-token-driven spacing across all responsive breakpoints.

What is a frontend polish pass for visual design?▼

A frontend polish pass normalizes typography, color contrast, and interactive states like hover and focus to ensure a consistent, high-quality user experience before shipping.

How do I check accessibility focus indicators and micro-interactions across responsive breakpoints?▼

Check accessibility focus indicators and micro-interactions by validating hover, active, loading, and error states against design tokens across desktop and mobile breakpoints.

Does this UI polish approach work for complex product features like dashboards and checkout flows?▼

Yes, this UI polish approach works for complex product features like dashboards, checkout, and detail views by applying a structured audit checklist to align components and correct spacing.

What's the best way to normalize font scales and color contrast using design tokens?▼

Normalize font scales and color contrast by applying a final visual polish pass that enforces design-token-driven typography and color consistency across all UI components and pages.

Related Skills

Explore More Design & Creative Skills→
AO-Cyber-SystemsAO-Cyber-Systems

df:frontend-design

Build, review, and visually test Eden UI components with Playwright.

Official
Advanced
tassiovaletassiovale
13

webapp-testing

Test local web applications with Python and Playwright.

Community
Intermediate
gnuriognurio
240

manage-color-contrast

Verifies foreground and background colors meet WCAG AA contrast thresholds.

Community
Intermediate
mahou-labsmahou-labs
1

polish

Fix alignment, spacing, typography, and content consistency across UI components during final handoff.

Official
Advanced