Interface Polish

A concrete, checklist-driven rubric for UI polish: radius, shadows, hit areas, animation timing.

Tested · Works

Test report

Verdict
Tested · Works
Score
9.6/10
Tested
Jul 14, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 4e22fdc

Turned a vague 'this button feels off' review into four measurable findings (32px hit area under the 40px minimum, mismatched nested border-radius, transition-all, missing tabular-nums), each mapped to a numbered principle and dropped into the skill's own mandated before/after table.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 5/5

What Interface Polish does

A design-engineering checklist for making interfaces feel polished — concentric border radius, optical alignment, layered shadows over borders, split/staggered enter animations, tabular numbers, minimum 40x40px hit areas, and no-layout-shift rules — with a mandated before/after markdown table output format. Use when building UI, reviewing frontend code, or working on any visual/animation detail.

How to install Interface Polish

git clone https://github.com/wellwelwel/blue-spec
cd blue-spec
mkdir -p ~/.claude/skills
cp -r .claude/skills/interface ~/.claude/skills/interface

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Interface Polish

  • /interface A concrete, checklist-driven rubric for UI polish: radius, shadows, hit areas, animation timing.

It also activates on plain-language prompts like these:

  • This button feels off, can you polish the interaction?
  • Review this component's CSS for spacing and animation issues.
  • Add a nice enter animation to this modal component.

Frequently asked questions

Is the Interface Polish skill free?
Yes. The skill itself is free from wellwelwel/blue-spec. SkillProof publishes the install command and an independent test verdict at no cost.
Does Interface Polish work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 14, 2026. Verdict: Tested · Works. Turned a vague 'this button feels off' review into four measurable findings (32px hit area under the 40px minimum, mismatched nested border-radius, transition-all, missing tabular-nums), each mapped to a numbered principle and dropped into the skill's own mandated before/after table.
What is the Interface Polish SkillProof Score?
9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
How do I install Interface Polish?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Interface Polish with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.