polish

Correct alignment, spacing, and micro-detail inconsistencies across UI components before release.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/yinshucheng/vibeflow --skill polish-yinshucheng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/yinshucheng/vibeflow/tree/main/.claude/skills/polish
Command: npx skills add https://github.com/yinshucheng/vibeflow --skill polish-yinshucheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.

Core Features & Use Cases

  • Visual Alignment & Spacing: Pixel-perfect alignment, consistent spacing, optical centering, and responsive behavior.
  • Typography Refinement: Hierarchy consistency, line length and height, and kerning adjustments.
  • Color & Contrast: Token usage, accessible contrast, and theme consistency.
  • Interaction States: Default, hover, focus, active, disabled, loading, error, and success states.
  • Micro-interactions & Transitions: Smooth 150-300ms transitions, consistent easing, respects reduced motion.
  • Content & Copy: Consistent terminology and grammar, appropriate length and punctuation.
  • Edge Cases & Error States: Helpful loading, empty, and error states; recovery paths.
  • Responsiveness & Performance: Mobile to desktop consistency; performance considerations.
  • Code Quality: Clean code, avoid TODOs, console logs, and unused imports.
  • Polish Checklist & Final Verification: Step-by-step validation and verification across the UI.

Quick Start

Provide the target area to polish, such as polishing the header for alignment and spacing before release.

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 release?

Fix UI alignment and spacing inconsistencies by applying a pre-launch polish pass that corrects pixel-perfect alignment, ensures consistent spacing, and performs optical centering across responsive layouts.

What is included in a pre-launch design polish checklist?

A pre-launch design polish checklist includes step-by-step validation for visual alignment, typography hierarchy, color contrast, interaction states, edge cases, and code quality to verify UI consistency before shipping.

How do I ensure accessible color contrast and theme consistency in my UI?

Ensure accessible color contrast and theme consistency by verifying that UI components conform to design system tokens, checking contrast ratios, and validating theme consistency across all interface elements.

How do I handle edge cases and error states during UI finishing touches?

Handle edge cases and error states during UI finishing touches by implementing helpful loading, empty, and error states with clear recovery paths and guidance for users across web and mobile interfaces.

Does this polish process work for both web and mobile interfaces?

Yes, this polish process works for both web and mobile interfaces, applying consistent alignment, typography, interaction states, and responsive behavior checks across platforms during the pre-launch quality pass.

What is the best way to refine typography hierarchy and line spacing in a UI?

The best way to refine typography hierarchy and line spacing is to check hierarchy consistency, adjust line length and height, and apply kerning adjustments to ensure readable and polished text across the interface.