polish

Reviews and fixes alignment, spacing, interaction states, and consistency issues in UI code before shipping.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/fauzanazz/katalis --skill polish-fauzanazz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/fauzanazz/katalis/tree/main/.agents/skills/polish
Command: npx skills add https://github.com/fauzanazz/katalis --skill polish-fauzanazz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Finished features often ship with small visual and interaction defects—misaligned elements, inconsistent spacing, missing hover or focus states, hard-coded colors—that degrade perceived quality. This Skill performs a systematic final quality pass over front-end code to catch and fix those micro-detail issues before release. ## Core Features & Use Cases - Design System Alignment: Discovers existing design tokens, component libraries, and style conventions, then corrects drift such as hard-coded values or duplicated one-off components. - Systematic Multi-Dimension Review: Works through checklists covering typography, color contrast (WCAG), interaction states, transitions, forms, edge cases, responsiveness, and performance. - Code Hygiene Cleanup: Removes console logs, dead code, and unused imports while verifying accessibility attributes and keyboard navigation. - Use Case: Before launching a new settings page, run the polish pass to verify all buttons have hover/focus/disabled states, spacing matches the design token scale, and no layout shift occurs on load. ## Quick Start Ask the AI to polish the settings page component and fix any alignment, spacing, and interaction state 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 polish a UI before launch?▼

Run a systematic pass covering alignment, spacing scale adherence, typography hierarchy, all interaction states (hover, focus, active, disabled, loading), and responsive breakpoints. Verify contrast ratios meet WCAG standards and remove debug code before shipping.

What should a pre-launch UI review checklist include?▼

Include visual alignment at all breakpoints, consistent design token usage, complete interaction states, smooth 60fps transitions, labeled forms with validation, helpful empty and error states, 44x44px touch targets, keyboard navigation, and no console errors or layout shift.

When should I not run a polish pass?▼

Do not polish work that is not functionally complete, since polish is the final step. Also triage scope when shipping imminently, and fix systemic issues at the design system level rather than patching individual instances.

Does the polish skill work without an existing design system?▼

Yes. If no design system exists, it polishes against conventions visible in the codebase. When a system does exist, it aligns the feature with shared tokens and components instead of creating one-off implementations.

Why does my UI still feel off after fixing obvious bugs?▼

Residual issues are usually micro-details: spacing values outside the scale, missing focus indicators, inconsistent icon sizing, widowed text lines, or abrupt transitions. A structured checklist pass across these dimensions catches what ad-hoc review misses.