Pre-ship visual refinement pass. Checks spacing, state completeness, contrast, typography, and motion quality. Use when asked to "polish this", "clean up the UI", "final pass", or before shipping any UI feature.
Performs final visual quality audits for spacing, states, contrast, typography, and motion before shipping UI features.
/plugin marketplace add howells/arc/plugin install arc@howellsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
<tool_restrictions>
EnterPlanMode — BANNED. Execute phases below directly.ExitPlanMode — BANNED. You are never in plan mode.
</tool_restrictions>Pre-ship visual refinement. The last step before shipping, not the first.
Announce at start: "I'm using the polish skill for a final visual quality pass."
<important> **This skill is user-interactive. Do NOT spawn agents.** Polish requires visual inspection and judgment — it's collaborative, not delegated. **Polish is the last step, not the first.** Don't begin until functionality is complete. </important><required_reading> Read ALL of these using the Read tool:
${CLAUDE_PLUGIN_ROOT}/rules/interface/spacing.md — Spacing scale and philosophy${CLAUDE_PLUGIN_ROOT}/rules/interface/colors.md — Color rules, contrast, OKLCH${CLAUDE_PLUGIN_ROOT}/rules/interface/typography.md — Type hierarchy and OpenType${CLAUDE_PLUGIN_ROOT}/rules/interface/interactions.md — Eight interactive states${CLAUDE_PLUGIN_ROOT}/rules/interface/animation.md — Motion rules${CLAUDE_PLUGIN_ROOT}/references/frontend-design.md — Design review checklist
</required_reading>Screenshot current state using Chrome MCP:
1. mcp__claude-in-chrome__tabs_context_mcp
2. mcp__claude-in-chrome__navigate to the feature URL
3. mcp__claude-in-chrome__computer action=screenshot (desktop)
4. mcp__claude-in-chrome__resize_window width=375 height=812
5. mcp__claude-in-chrome__computer action=screenshot (mobile)
6. mcp__claude-in-chrome__resize_window width=1440 height=900
If Chrome MCP is not available, ask user to provide the component/page path and review code directly.
Work through each dimension. Report findings as you go.
Check all spacing against the 4px scale (Tailwind's built-in: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px):
p-4 md:p-6 lg:p-8 or similar)p-4 for compact, p-6 standard)gap-* not margin hackspx-4 py-2 minimum standard)margin-bottom creates hierarchy (heading closer to its body than to content above)p-[13px])max-w-prose for body text)For every interactive element, verify all 8 states:
| State | Check | Common Tailwind |
|---|---|---|
| Default | Base styling present | — |
| Hover | Subtle feedback (gated to hover:hover) | hover:bg-gray-100 |
| Focus | Visible ring for keyboard | focus-visible:ring-2 |
| Active | Press feedback | active:scale-[0.97] |
| Disabled | Reduced opacity, no pointer | disabled:opacity-50 disabled:pointer-events-none |
| Loading | Spinner or skeleton | aria-busy="true" |
| Error | Red border, message | aria-invalid:border-red-500 |
| Success | Confirmation feedback | — |
antialiased on bodytext-base)text-balance on headings, text-pretty on bodytabular-nums on data tables, prices, timersease-out (not ease-in)prefers-reduced-motion respectedtransform and opacity animated (no width, height, top)Present findings grouped by severity:
For each finding:
After all fixes, screenshot again:
1. mcp__claude-in-chrome__computer action=screenshot (desktop)
2. mcp__claude-in-chrome__resize_window width=375 height=812
3. mcp__claude-in-chrome__computer action=screenshot (mobile)
Compare before/after. Confirm improvements with user.
Run the Design Review Checklist from frontend-design.md:
"Zoom in. Squint at it. Use it yourself."
<arc_log>
After completing this skill, append to the activity log.
See: ${CLAUDE_PLUGIN_ROOT}/references/arc-log.md
Entry: /arc:polish — [Component/page] polished ([key changes])
</arc_log>
<success_criteria> Polish is complete when:
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.