impeccable-polish

Fix alignment, spacing, consistency, and micro-detail issues in UI/UX deliverables.

6|1|Updated Apr 7, 2026
One-click install
npx skills add https://github.com/kmshihab7878/claude-code-setup --skill impeccable-polish
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: impeccable-polish
Source: https://github.com/kmshihab7878/claude-code-setup/tree/main/skills/impeccable-polish
Command: npx skills add https://github.com/kmshihab7878/claude-code-setup --skill impeccable-polish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Catches the small visual, interaction, copy, and code issues that prevent a product from feeling polished and production-ready, so releases look intentional and behave reliably across devices and states.

Core Features & Use Cases

  • Perform a final pass on UI/UX deliverables to fix alignment, spacing, and optical adjustments across breakpoints.
  • Validate typography hierarchy, line-length, and loading behavior to prevent widows/orphans and layout shift.
  • Verify color tokens, WCAG contrast, and consistent token usage to avoid hard-coded colors and accessibility regressions.
  • Ensure every interactive element has complete states (default, hover, focus, active, disabled, loading, error, success) and smooth, 60fps-friendly transitions that respect reduced motion.
  • Clean frontend code by removing console.logs, commented-out blocks, unused imports, and TypeScript any annotations; verify forms, labels, and keyboard navigation.
  • Use Case: Run this pass before shipping a checkout or onboarding flow to catch alignment, accessibility, and micro-interaction regressions that affect conversion and user trust.

Quick Start

Run a final polish pass on the checkout flow focusing on layout alignment, interaction states, accessibility, and code clean-up.

Frequently Asked Questions about impeccable-polish

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

FAQPage Schema
How do I perform a final UI polish pass before shipping a frontend feature?

Perform a final UI polish pass by reviewing layout alignment, optical spacing, typography hierarchy, and interaction states across breakpoints. This process catches visual, interaction, and code issues so releases look intentional and behave reliably across devices.

What is the best way to ensure accessibility compliance and color contrast in a design handoff?

The best way to ensure accessibility compliance is to verify WCAG contrast ratios and validate consistent color token usage. This prevents hard-coded colors and accessibility regressions during the design handoff and pre-launch review process.

How do I check that all interactive elements have complete default, hover, focus, and disabled states?

Check interactive elements by verifying every component includes default, hover, focus, active, disabled, loading, and error states. This ensures smooth, 60fps-friendly transitions that respect reduced motion preferences for reliable user trust.

How do I clean frontend code to remove unused imports and TypeScript any annotations?

Clean frontend code by removing console.logs, commented-out blocks, unused imports, and TypeScript any annotations. This code clean-up verifies forms, labels, and keyboard navigation meet production standards before feature deployment.

Does this pre-launch quality assurance pass work for responsive checkout and onboarding flows?

Yes, this pre-launch quality assurance pass works for checkout and onboarding flows. Running this review catches alignment, accessibility, and micro-interaction regressions that directly affect conversion rates and user trust.

Why does my layout shift during loading and how do I prevent widows and orphans?

Layout shifts during loading are prevented by validating typography hierarchy, line-length, and loading behavior. This final quality pass fixes optical adjustments and loading behavior to ensure visual fidelity and prevent widows and orphans.