design-polish

Reviews UI components for spacing, typography, color, and layout polish issues.

1|Updated Apr 15, 2026
One-click install
npx skills add https://github.com/pnewsam/skills --skill design-polish-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-polish
Source: https://github.com/pnewsam/skills/tree/main/archive/design-polish
Command: npx skills add https://github.com/pnewsam/skills --skill design-polish-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? This Skill addresses the need for a component-level visual quality check on UI code, catching small defects like inconsistent spacing values, misaligned icons, off-system colors, and broken typography hierarchy before shipping. Note that this is a deprecated legacy workflow; for new work, prefer the ui-expert, design-expert, and focused ui-/design- reference skills. ## Core Features & Use Cases - Five-Lens Evaluation: Systematically reviews spacing and alignment, typography, color and visual treatment, component consistency, and layout precision. - Classified Findings: Each issue is recorded with observation, impact, effort level (quick fix, moderate, structural), and a specific recommendation such as the exact Tailwind class to change. - Structured Polish Report: Produces a markdown artifact at docs/tmp/design-polish-{target}.md summarizing strengths, key findings, and recommended actions. - Use Case: After implementing a new settings page, run a polish pass to verify that card grids use consistent gap values, icons match their label sizes, and no raw hex colors bypass the design system. ## Quick Start Ask the AI to run a design polish pass on a specific page or component, optionally providing a screenshot, and receive a report of concrete visual fixes.

Frequently Asked Questions about design-polish

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

FAQPage Schema
How do I check a UI component for visual polish issues?▼

Specify the page, route, or component to review, optionally with a screenshot. The skill reads the code and evaluates it through five lenses: spacing, typography, color, component consistency, and layout precision, then reports specific fixes.

What is the difference between design polish and design review?▼

Design polish operates at the component level, checking pixel-level details like spacing values and icon alignment. Design review covers structural concerns like page hierarchy, navigation, and information architecture, which this skill explicitly avoids.

Can design polish work without a screenshot?▼

Yes, it can work from code alone by inferring visual quality from spacing values, color choices, typography, and conditional states. A screenshot helps anchor the assessment but is not required.

Should I use design-polish for new UI work?▼

No, this skill is deprecated. For new UI or design work, use ui-expert, design-expert, or the focused ui-* and design-* reference skills instead, unless you explicitly need this legacy artifact workflow.

What output does a design polish pass produce?▼

It writes a markdown report to docs/tmp/design-polish-{target}.md containing context, a quality summary, strengths, detailed findings per lens, and recommended actions split into quick fixes and deeper structural work.