Interface Polish
A concrete, checklist-driven rubric for UI polish: radius, shadows, hit areas, animation timing.
Test report
- Verdict
- Tested · Works
- Score
- 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
-
/interfaceA 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.