Impeccable
Skill Verified ActiveUse 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.
To empower users to design, redesign, critique, and optimize frontend interfaces with expert-level guidance and a specialized command vocabulary.
Features
- 23 specialized commands for design tasks
- 7 domain-specific references (typography, color, etc.)
- UX critique and technical audit capabilities
- Live variant mode for visual iteration
- Context gathering for project-specific design
Use Cases
- Improving the visual hierarchy and layout of a webpage
- Auditing a frontend feature for accessibility and performance
- Refining UI copy and error messages for clarity
- Experimenting with color palettes and typography
- Automating design system component extraction
Non-Goals
- Backend-only tasks
- Non-UI related development tasks
- Creating generic or bland designs
Practices
- Design quality
- UX principles
- Accessibility
- Performance
- Code standards
Prerequisites
- Access to a compatible AI harness (Cursor, Claude Code, etc.)
- Node.js environment (for CLI usage and server components)
Installation
npx skills add pbakaus/impeccableRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Design Audit
100Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Microinteractions
99Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "interaction polish", "state transitions", or "input feedback". Also trigger when designing form validation responses, progress indicators, confirmation dialogs, or any UI element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.