polish

Fix visual alignment, spacing, copy, and interaction states across UI components.

60|7|Updated Oct 18, 2020
One-click install
npx skills add https://github.com/bfree-trainer/bfree --skill polish-bfree-trainer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/polish
Command: npx skills add https://github.com/bfree-trainer/bfree --skill polish-bfree-trainer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A focused final-quality pass that fixes visual alignment, spacing, copy inconsistencies, interaction state gaps, and other micro-detail issues that prevent a feature from feeling finished and reliable before shipping.

Core Features & Use Cases

  • Systematic visual refinement: Grid alignment, spacing scale enforcement, optical centering, and responsive consistency across breakpoints.
  • Interaction and accessibility checks: Ensure all interactive states (hover, focus, active, disabled, loading, error, success) exist and meet WCAG contrast and focus guidelines.
  • Micro-interactions and performance: Smooth transitions, 60fps animations, reduced-motion support, and minimized layout shift.
  • Content and assets polish: Consistent terminology, copy checks, iconography alignment, image alt text, and retina assets.
  • Verification workflow: Context gathering from frontend-design, device testing, checklist-driven sign-off, and triage guidance when time-boxed.

Quick Start

Use the polish skill to run a final quality pass on the latest feature, check alignment, states, copy, and accessibility, and produce a prioritized list of remaining issues before release.

Frequently Asked Questions about 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 feature?

A final UI polish pass systematically fixes visual alignment, spacing, copy inconsistencies, and interaction state gaps. It requires gathering design context, enforcing design tokens, and running a checklist-driven sign-off workflow to ensure production readiness.

What is included in a UI design checklist for pre-release polishing?

A UI design checklist for pre-release polishing includes grid alignment, spacing scale enforcement, optical centering, and interaction state verification. It also covers content consistency, image alt text, retina assets, and responsive consistency across breakpoints.

How do I check accessibility and interaction states for web and mobile frontends?

Checking accessibility and interaction states involves verifying all interactive states like hover, focus, active, disabled, loading, and error exist. It ensures transitions support reduced-motion, animations hit 60fps, and all elements meet WCAG contrast and focus guidelines.

Can I use a checklist-driven sign-off workflow for bug-sprint refinements?

Yes, a checklist-driven sign-off workflow can be applied to bug-sprint refinements. It provides context gathering, device testing for responsiveness, and triage guidance to systematically resolve micro-detail issues when time-boxed.

What's the best way to fix visual alignment and micro-interactions in a design handoff?

The best way to fix visual alignment and micro-interactions in a design handoff is applying a systematic visual refinement pass. This enforces spacing scales, minimizes layout shift, and ensures smooth transitions adhere to accessibility standards.

Why does my feature feel unfinished even after passing functional testing?

A feature feels unfinished when it lacks UI polish, meaning visual alignment, spacing, copy inconsistencies, and interaction state gaps remain unresolved. A final quality pass addresses these micro-detail issues to make the feature feel reliable and finished.