polish

Reviews and fixes alignment, spacing, interaction states, and consistency issues in frontend UI before shipping.

Updated Dec 18, 2025
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill polish-l0lxl0lw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/impeccable/polish
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill polish-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Finished features often ship with small visual and interaction defects—misaligned elements, inconsistent spacing, missing hover or focus states, and uneven copy—that erode perceived quality. This Skill performs a systematic final quality pass over frontend work to catch and fix those details before release. ## Core Features & Use Cases - Systematic polish dimensions: Walks through alignment, spacing, typography, color contrast, interaction states, transitions, copy, icons, forms, edge cases, responsiveness, performance, and code cleanliness. - Design-token enforcement: Flags hard-coded colors and off-scale spacing values, ensuring everything uses the design system consistently. - Accessibility verification: Checks WCAG contrast ratios, keyboard navigation, focus indicators, touch target sizes, and reduced-motion support. - Use Case: Before shipping a new settings page, run the polish pass to catch a missing loading state on the save button, a 13px gap that breaks the spacing scale, and gray text on a colored banner that fails contrast. ## Quick Start Ask the AI to run the polish skill on the feature you just finished, for example: "Polish the new checkout flow before we ship it."

Frequently Asked Questions about polish

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

FAQPage Schema
How do I polish a frontend UI before shipping?

Run a systematic pass over alignment, spacing, typography, color contrast, interaction states, transitions, copy, and responsiveness. Verify every interactive element has hover, focus, active, disabled, loading, and error states, then test on real devices at multiple breakpoints.

What should a UI polish checklist include?

A polish checklist should cover grid alignment, design-token spacing, typographic hierarchy, WCAG contrast ratios, all interaction states, smooth 60fps transitions, consistent copy, labeled forms, helpful empty and error states, 44px touch targets, keyboard navigation, and removal of console logs and dead code.

When should I not run a polish pass on a feature?

Do not polish work that is not functionally complete, since polish is the last step before shipping. Also triage when time is short—if a feature ships in 30 minutes, prioritize critical issues rather than spending hours on refinements.

Does the polish skill check accessibility requirements?

Yes, it verifies WCAG contrast ratios, visible focus indicators, keyboard navigation and tab order, ARIA labels, semantic HTML, minimum 44x44px touch targets, and respect for the prefers-reduced-motion setting.

Why does my UI feel off even though everything works?

Functional but unpolished UI usually suffers from inconsistent spacing values, missing hover or loading states, mixed icon styles, or typographic inconsistencies. A systematic polish pass identifies these details by checking each dimension against the design system.