polish

Inspect frontend UI components for alignment, spacing, consistency, and detail issues.

Updated Jan 22, 2025
One-click install
npx skills add https://github.com/SL-A-SH/my-portfolio --skill polish-sl-a-sh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/polish
Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill polish-sl-a-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Polish performs a meticulous final quality pass to catch small visual, interaction, and content details that separate shipped from truly finished work, addressing alignment, spacing, consistency, and missing states right before release.

Core Features & Use Cases

  • Pre-Polish Assessment: Verify functional completeness, identify known issues, and confirm the quality bar (MVP vs flagship) and shipping timeline.
  • Systematic Visual & Interaction Checks: Inspect alignment, spacing, typography, color contrast, interactive states, transitions, and micro-interactions across breakpoints.
  • Content & Accessibility Review: Ensure copy consistency, alt text for images, keyboard focus indicators, required ARIA attributes, and WCAG contrast and motion preferences.
  • Performance & Code Hygiene: Validate loading states, layout shift, remove debug logs, and confirm clean code practices before shipping.

Quick Start

Run the polish skill on the specified feature (for example, "checkout flow") to perform a systematic visual, interaction, accessibility, and content final pass before release.

Frequently Asked Questions about polish

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

FAQPage Schema
How do I check UI alignment and spacing before shipping a frontend feature?

To check UI alignment and spacing before shipping, perform a systematic visual inspection across breakpoints to catch detail issues. This process verifies typography, color contrast, and spacing consistency to ensure your frontend feature is truly release-ready.

What is a final UI/UX polish pass for frontend components?

A final UI/UX polish pass is a meticulous quality check on frontend components to fix alignment, spacing, and consistency issues. It separates shipped code from truly finished work by addressing missing interactive states and content details right before release.

How do I ensure accessibility and WCAG contrast compliance in my UI components?

To ensure accessibility and WCAG contrast compliance in your UI components, review copy consistency, verify keyboard focus indicators, and check required ARIA attributes. This confirms your design meets motion preferences and contrast standards before release.

Can I use a pre-release quality check for both MVP and flagship design standards?

Yes, you can use a pre-release quality check for both MVP and flagship design standards. The process requires you to define your quality bar and shipping timeline upfront, allowing the final visual and interaction checks to scale to your specific target quality.

What is the best way to fix missing interactive states and micro-interactions across breakpoints?

The best way to fix missing interactive states and micro-interactions across breakpoints is a systematic visual and interaction check. This method inspects transitions and interactive details on real devices to validate responsive behavior and ensure flawless execution.