skills.rest
nachopalmeri
nachopalmeriCOMMUNITY
Explore all skills by this author →
GitHub

polish

Corrects UI alignment, spacing, typography, color, interaction states, content, accessibility, responsiveness, and code quality in final artifacts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Polish final UI artifacts to ship-ready quality by correcting alignment, spacing, and consistency.

Core Features & Use Cases

  • Visual Alignment & Spacing: ensures grid alignment, baseline consistency, and responsive reflow.
  • Typography Refinement: enforces typographic hierarchy, line length, line height, widow/orphan control, kerning, and font loading.
  • Color & Contrast: guarantees WCAG-compliant contrast, design-token usage, consistent themes, and accessible focus indicators.
  • Interaction States: defines default, hover, focus, active, disabled, loading, error, and success states for interactive elements.
  • Micro-interactions & Transitions: ensures smooth, purpose-driven motion within 60fps and respects reduced motion preferences.
  • Content & Copy: standardizes terminology, capitalization, grammar, and punctuation across UI and docs.
  • Icons & Images: maintains consistent iconography, sizing, alt text, and alignment.
  • Forms & Inputs: ensures proper labeling, clear error messages, consistent validation timing, and logical tab order.
  • Edge Cases & Error States: provides helpful loading, empty, and error states with recovery guidance.
  • Responsiveness: validates mobile, tablet, and desktop behavior with accessible touch targets.
  • Performance: minimizes layout shifts and optimizes assets for fast load.
  • Code Quality: removes debugging artifacts, unused imports, and enforces naming consistency.

Quick Start

Polish the current feature to a shipping-ready state.

Frequently Asked Questions about polish

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

FAQPage Schema
How do I polish UI artifacts for ship-ready quality and consistency?▼

Polish UI artifacts by systematically correcting alignment, spacing, and consistency across visual, typography, color, and interaction states. This process ensures your final design handoffs and product interfaces meet ship-ready quality standards.

What is included in a systematic UI QA process for final design polish?▼

A systematic UI QA process includes validating visual alignment, typography refinement, WCAG-compliant color contrast, interaction states, content copy standardization, accessibility, and responsive behavior to guarantee perceived quality and user trust.

How do I ensure WCAG compliance for color contrast and focus indicators?▼

Ensure WCAG compliance by validating color contrast ratios, enforcing design-token usage, maintaining consistent themes, and defining accessible focus indicators. This guarantees your product interfaces meet accessibility requirements for user trust.

Can I use this to define interaction states like hover, focus, and loading?▼

Yes, you can define default, hover, focus, active, disabled, loading, error, and success states for interactive elements. This ensures consistent interaction patterns and smooth, purpose-driven micro-interactions within 60fps across your product.

What's the best way to standardize typography and content copy across UI documentation?▼

Standardize typography and content by enforcing typographic hierarchy, line length, widow and orphan control, and grammar standardization. This maintains consistent terminology, capitalization, and punctuation across your UI and documentation.

How do I validate responsive behavior and edge cases for mobile and tablet interfaces?▼

Validate responsive behavior by testing mobile, tablet, and desktop layouts with accessible touch targets. Provide helpful loading, empty, and error states with recovery guidance to handle edge cases and ensure responsive reflow.

Related Skills

Explore More Design & Creative Skills→
senpapi69senpapi69

i-polish

Inspect UI alignment, spacing, typography, and interaction states for final QA.

Community
Advanced
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced
alongor666alongor666
1

css-design-tokens

Define CSS design tokens for colors, spacing, typography, and theming.

Community
Basic
DataDogDataDog
648

lint

Run Hatch-based lint, format, and quality checks on modified files.

Official
Advanced