delight
Transform functional interfaces into memorable experiences through subtle personality, micro-interactions, and unexpected moments of joy.
- Identifies natural delight opportunities across success states, empty states, loading screens, errors, and interactions, matched to brand personality and audience expectations
- Provides techniques for micro-interactions (button presses, hover effects, animations), personality-driven copy, custom illustrations, and satisfying interactions like drag-and-drop
- Includes sound design, easter eggs, and celebration moments that compound over time while remaining fresh and skippable
- Emphasizes performance and accessibility: delight should enhance usability, never block core functionality or delay tasks
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
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: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
- Find natural delight moments:
- Success states: Completed actions (save, send, publish)
- Empty states: First-time experiences, onboarding
- Loading states: Waiting periods that could be entertaining
- Achievements: Milestones, streaks, completions
- Interactions: Hover states, clicks, drags
- Errors: Softening frustrating moments
More from pbakaus/impeccable
polish
Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
85.5Kcritique
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.1K
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