skills.rest
arvindbattula
arvindbattulaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/arvindbattula/my-agent-config --skill design-polish-arvindbattula
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

elegant

Standardize UI design with token-based typography, color, and spacing.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced