UI Polish Slash Commands
Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.
Before & after
Same prompt, same agent — the only difference is the skill.
Good design is about details. You might want to look at your typography, spacing, colors, and overall hierarchy. Sometimes a few small tweaks can make a big difference in how polished something feels. I'd probably suggest adjusting font sizes, padding, and maybe the button styles.
UI POLISH PASS REPORT COMMANDS APPLIED → /quieter (reduce visual noise) → /hierarchy (strengthen content priority) → /delight (add micro-interactions) → /critique (Nielsen heuristics review) EXECUTION LOG /QUIETER RESULTS ✓ Removed tertiary CTA buttons (3 reduced to 1 per section) ✓ Increased white space: padding 32px → 48px ✓ Muted accent color: #FF6F00 → #E85D00 (less aggressive) ✓ Removed shadow on cards (2px to 0px border instead) /HIERARCHY RESULTS ✓ Hero headline: 56px → 64px, weight 600 → 700 ✓ Value prop subheading: size 18 → 22px, color gray → navy ✓ Feature list items: removed icons (distraction), text-only ✓ Footer: de-emphasized secondary links (12px, lighter gray) /DELIGHT RESULTS ✓ Button hover: scale 1.02, shadow +8px, 120ms ease ✓ Section entrance: fade-in + slide 40px on scroll (220ms) ✓ Link underline: animated reveal on hover (left-to-right, 180ms) ✓ Mobile: reduced motion fallback activated /CRITIQUE SCORE: 8.2/10 against Nielsen Heuristics FIXES APPLIED FROM CRITIQUE ✗ Visibility of system status → Added progress indicator (step 3 of 5) ✗ Error prevention → Pre-populate email from browser, confirm before submit ✗ Flexibility & efficiency → Add keyboard nav (tab order optimized) ✓ Aesthetic & minimalist design → Passed (cleaned up 8 unused elements) BEFORE: 47 interactive elements, 8.2 sec Lighthouse, CTR 3.2% AFTER: 24 interactive elements, 9.1 sec Lighthouse, predicted CTR 4.1% (14% lift)
About this skill
name: ui-polish-commands description: Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project. Use when working on ui polish slash commands.
UI Polish Slash Commands
Layers on top of Anthropic's front-end-design skill so designers and design-engineers can push generated UI in a specific direction with one command. The /critique command scores designs against Nielsen's 10 heuristics and different user personas, giving a structured review instead of vibes. Use during the last mile of any UI build to tighten typography, spacing, hierarchy, and micro-interactions.
What you get
- 20 plus imperative slash commands
- Nielsen-heuristic scorer
- Persona-based critique template
- Anti-slop styling defaults
- Before/after diff
- Component-level polish log
Customize your output
- Command roster: default, custom subset
- Brand tokens: hex, type stack
- Persona list: casual, power, accessibility
- Strictness: light, moderate, strict
- Scope: component, page, whole project
- Auto-run on save: yes, no
Example output
'Landing page pushed through /quieter, /delight, and /critique returns a refined layout plus a heuristics score of 8.4/10 with specific fixes.'
Best for
Designers and design-engineers using Claude Code.
Note: Skill is agent-agnostic; usable in Cursor and Gemini too. High confidence.
SKILL.md preview
---
name: ui-polish-commands
description: Use during the last mile of a UI build to tighten typography, spacing, hierarchy, and micro-interactions with a specific verb-first command.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
- design
- p4
---
# UI Polish Slash Commands
Adds a set of verb-first commands, including polish, quieter, bolder, delight, and critique, each pushing a generated UI in one specific direction on demand.
## When to use
- A UI is functionally done but needs a specific, targeted visual push rather than a vague improvement
… (sign up to view the full skill)