skills.rest
mheers
mheersCOMMUNITY
Explore all skills by this author →
Website𝕏@HeersMarcelGitHub

polish

Apply a design-system-aligned refinement workflow to polish UI quality.

Updated Feb 5, 2026
Search Tags:#typography#ui#consistency#accessibility#design-system#polish#visual-design
One-click install
npx skills add https://github.com/mheers/opencode-sandbox --skill polish-mheers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/mheers/opencode-sandbox/tree/main/skills/polish
Command: npx skills add https://github.com/mheers/opencode-sandbox --skill polish-mheers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Final polish is the last quality gate before release. It addresses visual alignment, spacing, typography, copy consistency, and interaction polish that separate good work from great.

Core Features & Use Cases

  • Systematic Visual Alignment: ensures pixel-perfect alignment and consistent spacing across breakpoints.
  • Typography & Copy Refinement: standardizes hierarchy, line length, and copy consistency.
  • Accessibility & Quality Assurance: checks contrast, focus states, and ARIA labeling for accessible components.
  • End-to-end Polish Workflow: coordinates checks across design tokens, components, and UI states for production readiness.

Quick Start

Execute a full polish pass on the active UI to validate alignment, typography, color, and content against the design system.

Frequently Asked Questions about polish

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

FAQPage Schema
What is UI polish and how does it prepare a design system for production?▼

UI polish is a structured refinement workflow that validates visual alignment, typography, color, and copy against a design system. It ensures finish-ready product screens meet accessibility and contrast standards before shipping.

How do I check accessibility readiness and contrast ratios in my UI before shipping?▼

Apply a polish workflow that systematically checks contrast ratios, focus states, and ARIA labeling on finish-ready components. This accessibility readiness step ensures your UI meets visual alignment and contrast standards.

How do I ensure consistent spacing and typography hierarchy across different breakpoints?▼

Apply a design-system-aligned polish workflow to standardize typography hierarchy, line length, and spacing across breakpoints. This enforces pixel-perfect visual alignment for finish-ready product components.

Does this design system polish workflow work for both full product screens and individual components?▼

Yes, the polish workflow applies to finish-ready product screens, individual components, and interactions. It coordinates checks across design tokens and UI states to ensure consistent spacing and typography.

What is the best way to run a final visual alignment check before release?▼

The best way is executing a structured polish workflow that validates pixel-perfect alignment, typography hierarchy, and copy consistency. This end-to-end pass coordinates checks across design tokens and UI states for production readiness.

Why does my UI look inconsistent across breakpoints even when using design tokens?▼

Your UI may look inconsistent because visual alignment, spacing, and typography hierarchy were not systematically refined. Applying a polish workflow enforces pixel-perfect alignment and standardizes hierarchy across breakpoints.

Related Skills

Explore More Design & Creative Skills→
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
effiemincereffiemincer

normalize

Normalize frontend UI components to match design system tokens.

Community
Advanced
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
diShine-digital-agencydiShine-digital-agency
1

shine-design-crit

Evaluate design artifacts for hierarchy, legibility, consistency, accessibility, and brand fit.

Community
Advanced