polish
Final quality pass catching alignment, spacing, consistency, and interaction details before shipping.
- Systematically reviews visual alignment, spacing, typography hierarchy, color contrast, and interaction states across all breakpoints and device types
- Identifies and fixes micro-interaction gaps, transition smoothness, edge cases, error states, and loading feedback to ensure polished user experience
- Requires frontend-design skill context and functional completeness before starting; includes checklist covering responsive design, accessibility, performance, and code cleanup
- Works best when triaged by quality bar (MVP vs flagship) and available time; emphasizes testing on real devices and fresh-eyes review before final sign-off
MANDATORY PREPARATION
Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship).
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
Design System Discovery
Before polishing, understand the system you are polishing toward:
- Find the design system: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API.
- Note the conventions: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established?
- Identify drift: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale.
If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase.
Pre-Polish Assessment
More from pbakaus/impeccable
critique
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
83.0Kimpeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
82.6Kaudit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
82.2Kanimate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
82.1Kadapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
82.1Kclarify
Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.
81.6K
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/skillsweb-design-guidelines
Vercel's Web Interface Guidelines covering spacing, typography, interaction, and accessibility
vercel-labs/agent-skillsvercel-composition-patterns
React composition patterns for flexible, scalable UI component architecture
vercel-labs/agent-skillsui-ux-pro-max
Advanced UI/UX patterns for complex interfaces and interaction design
nextlevelbuilder/ui-ux-pro-max-skillsleek-design-mobile-apps
Mobile-first design principles for iOS and Android app interfaces
sleekdotdesign/agent-skills