skills.rest
OmOc3
OmOc3COMMUNITY
Explore all skills by this author →
GitHub

polish

Polish front-end UI spacing, alignment, typography, contrast, and micro-interactions.

Updated Aug 23, 2026
Search Tags:#typography#accessibility#ui-ux#design-system#spacing#polish#micro-interactions
One-click install
npx skills add https://github.com/OmOc3/physica --skill polish-omoc3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/OmOc3/physica/tree/main/.codex/skills/polish
Command: npx skills add https://github.com/OmOc3/physica --skill polish-omoc3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill performs a final quality pass to catch alignment, spacing, consistency, accessibility, and micro-detail issues that keep a product from feeling finished and professional before release.

Core Features & Use Cases

  • Design system alignment: Identify hard-coded values, convert to tokens, and replace one-off components with shared primitives.
  • Visual and interaction polish: Fix spacing, optical alignment, typography, color contrast, focus states, and missing interaction states across breakpoints.
  • Performance and code hygiene: Reduce layout shift, remove debug artifacts, consolidate duplicated styles, and ensure motion respects reduced-motion preferences.
  • Use case: Run a pre-launch polish on a checkout flow to ensure consistent spacing, accessible contrast, complete interaction states, smooth transitions, and no console errors.

Quick Start

Polish the checkout UI: verify spacing and alignment against the spacing scale, replace hard-coded colors with tokens, ensure all interactive states and focus indicators exist, and clean up any debug logs or duplicated styles.

Frequently Asked Questions about polish

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

FAQPage Schema
How do I fix UI spacing and alignment issues before release?▼

Fix UI spacing and alignment issues by running a final quality pass to correct optical alignment, replace hard-coded values with design tokens, and verify spacing scales across responsive breakpoints.

How do I ensure accessibility contrast and focus states in my UI components?▼

Ensure accessibility contrast and focus states by verifying color contrast ratios and adding complete interaction states with focus indicators across all responsive breakpoints during your final pre-release review.

What's the best way to align front-end code with an existing design system?▼

Align front-end code with a design system by identifying hard-coded values, converting them to design tokens, and replacing one-off components with shared primitives to satisfy design-token consistency requirements.

Can I clean up layout shift and debug artifacts during a UI polish pass?▼

Yes, you can clean up layout shift and debug artifacts during a polish pass by reducing layout shift, removing debug logs, consolidating duplicated styles, and ensuring motion respects reduced-motion preferences.

Does a pre-launch polish pass handle micro-interactions and transitions?▼

A pre-launch polish pass handles micro-interactions and transitions by verifying complete interaction states, adding smooth transitions, and checking responsive touch targets without introducing regressions.

Related Skills

Explore More Design & Creative Skills→
nsuberinsuberi

polish

Fix alignment, spacing, interaction states, and accessibility in UI implementations.

Community
Advanced
The13thNodeThe13thNode
3

browse

Launch a real browser to verify application UI and functionality.

Community
Intermediate
tuanemuytuanemuy

polish

Audit frontend UI alignment, spacing, typography, and micro-interactions across breakpoints.

Community
Advanced
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced