design-polish

Align UI implementations with design-system guidelines and polish checklists.

Updated Mar 18, 2026

Search Tags:#design #ui #consistency #accessibility #responsive #tokens #polish

Ready to run

npx skills add https://github.com/arvindbattula/my-agent-config --skill design-polish-arvindbattula

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-polish
Source: https://github.com/arvindbattula/my-agent-config/tree/main/skills/design-polish
Command: npx skills add https://github.com/arvindbattula/my-agent-config --skill design-polish-arvindbattula

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Final design quality pass fixes alignment, spacing, consistency, and micro-detail issues after a UI is functionally complete, ensuring a cohesive, professional finish.

Core Features & Use Cases

Enforces design-system alignment across components and breakpoints
Applies token-based colors, spacing, and typography to reduce drift
Validates accessibility and interaction states to meet WCAG and usability goals

Quick Start

Run /design-polish on the current UI to apply the final polish pass.

Frequently Asked Questions about design-polish

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

FAQPage Schema

How do I fix UI alignment and spacing inconsistencies after a build is functionally complete?▼

Fix UI alignment and spacing inconsistencies by applying a final design polish pass that enforces design-system guidelines. This eliminates visual drift and ensures pixel-precise composition across components and states using token-based spacing.

What is design-system visual drift and how do I eliminate it across responsive layouts?▼

Design-system visual drift occurs when UI implementations deviate from established guidelines. Eliminate it by validating components against design tokens for typography, spacing, and color to ensure consistent responsive layouts.

How do I validate interaction states and accessibility to meet WCAG goals during UI polish?▼

Validate interaction states and accessibility to meet WCAG goals by applying a polish checklist that enforces design-system compliance. This ensures interaction-state consistency and accessibility across all UI components.

What is the best way to apply design tokens for typography and color to reduce UI drift?▼

The best way to apply design tokens for typography and color is through an automated polish pass that aligns UI implementations with design-system guidelines, ensuring pixel-precise composition and reducing drift across breakpoints.

Does a UI polish pass work for responsive layouts across multiple breakpoints?▼

Yes, a UI polish pass works for responsive layouts by enforcing design-system alignment across components and breakpoints. It applies token-based colors, spacing, and typography to maintain visual consistency and eliminate drift.