polish

Refine frontend UI and UX details across visual, interaction, content, and edge-case dimensions.

Updated Dec 20, 2023
One-click install
npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill polish-thiago-cruz-eng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/Thiago-Cruz-eng/Hibrygame/tree/main/.claude/skills/polish
Command: npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill polish-thiago-cruz-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Removes last-mile quality issues—alignment, spacing, typography, interaction states, and copy inconsistencies—so the work matches the intended standard and feels effortless to use.

Core Features & Use Cases

  • Pre-shipment quality pass: Ensures functional completeness before making detail-level improvements.
  • Systematic UI/UX refinement: Covers visual alignment, typography, color/contrast, interaction states, transitions, and responsiveness across breakpoints.
  • Robustness checks: Validates edge cases, loading/empty/error/success states, accessibility, and performance concerns like layout shift and reduced motion.

Quick Start

Run the polish step for your latest UI feature and provide the specific area you want improved, like “polish the checkout button states and spacing.”

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 frontend feature?▼

A pre-polish completeness assessment verifies that your frontend feature is functionally complete before you refine typography, interaction states, and responsive design. This required step prevents wasting effort polishing incomplete functionality and ensures the feature is truly ready for final visual refinement.

What is included in a UI quality checklist for shipping-ready frontend design?▼

A UI quality checklist covers visual alignment, typography, color contrast, accessibility, complete interaction states, smooth transitions, and responsive consistency across breakpoints. It also validates edge cases including loading, empty, error, and success states to ensure robust frontend design.

How do I check accessibility and contrast during a UI refinement pass?▼

Check accessibility and contrast during a UI refinement pass by validating color contrast ratios and ensuring complete interaction states are present. Final verification requires real-device testing and cross-checking against the intended design to confirm accessibility standards are met.

How do I handle edge cases and interaction states in responsive design?▼

Handle edge cases and interaction states in responsive design by validating loading, empty, error, and success states across all breakpoints. Check for layout shift and reduced motion performance concerns, ensuring smooth transitions and complete interactive state coverage.

What's the best way to verify frontend design quality before release?▼

The best way to verify frontend design quality before release is through real-device testing and cross-checking against the intended design. This final verification step follows a systematic checklist covering visual, interaction, content, and edge-case dimensions.