polish

Fix alignment, spacing, consistency, and micro-detail issues in UI designs.

Updated Apr 17, 2026
One-click install
npx skills add https://github.com/djkloop/n --skill polish-djkloop
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/djkloop/n/tree/main/.trae/skills/polish
Command: npx skills add https://github.com/djkloop/n --skill polish-djkloop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performs a thorough final quality pass to fix alignment, spacing, consistency, and micro-detail issues so designs and UI feel intentional and production-ready rather than rough or inconsistent.

Core Features & Use Cases

  • Design system alignment: Find and apply tokens, spacing scales, typography rules, and shared components so the feature conforms to the established system.
  • Visual and interaction polish: Correct pixel alignment, spacing, optical adjustments, interaction states, micro-interactions, and transitions for smooth, accessible experiences.
  • Content and code clean-up: Normalize copy and capitalization, ensure accessibility and keyboard navigation, remove debug code, and consolidate tokens or components introduced during polishing.
  • Use Case: Run a final review before launch to eliminate small inconsistencies, implement missing states (loading, error, focus), verify WCAG contrast and reduced-motion support, and perform device testing.

Quick Start

Run a final polish pass: discover the design system, verify spacing, typography, colors, and interaction states across breakpoints and devices, fix inconsistencies, add missing states, and clean up code and tokens.

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 design quality pass to fix alignment and spacing inconsistencies before shipping?

A final design quality pass discovers your design system conventions, then verifies and corrects spacing, typography, color, and interaction states to eliminate pre-launch inconsistencies. It ensures UI deliverables feel intentional and production-ready rather than rough.

What is the best way to check UI accessibility and WCAG contrast during a pre-launch review?

Checking UI accessibility during a pre-launch review involves verifying WCAG contrast ratios, keyboard navigation, and reduced-motion support across breakpoints. This process adds missing interaction states like loading, error, and focus to ensure smooth, accessible experiences.

How do I normalize design tokens and clean up code introduced during UI polishing?

To normalize design tokens and clean up code, consolidate any tokens or components introduced during polishing, remove debug code, and normalize copy and capitalization. This ensures the final deliverable conforms to the established design system.

Can I use this pre-launch quality assurance process for responsive design and device testing?

Yes, this pre-launch quality assurance process applies to responsive design and device testing by verifying spacing, typography, and interaction states across multiple breakpoints and devices. It corrects pixel alignment and optical adjustments for a flawless product.

What is visual polish in UI design and when do I need it?

Visual polish in UI design is the meticulous correction of pixel alignment, micro-interactions, and transitions. You need it during pre-launch reviews and final-pass workflows when your feature must conform to established design system rules before shipping.

Why does my UI design feel rough and inconsistent even after applying design system tokens?

Your UI design feels rough and inconsistent when micro-details like optical adjustments, interaction states, and spacing scales are misaligned. A meticulous final quality pass fixes these issues by verifying shared components and consolidating design tokens.