frontend-design
Distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices.
- Requires confirmed design context (target audience, use cases, brand personality) before implementation; includes teach-impeccable skill integration for gathering missing context
- Covers five core design areas: typography, color and theming, layout and spacing, visual details, and motion with specific anti-patterns to avoid
- Emphasizes bold aesthetic directions (brutalist, maximalist, minimalist, retro-futuristic, etc.) executed with precision and cohesion rather than safe defaults
- Provides reference guides for typography scales, OKLCH color functions, spatial rhythm, motion timing, responsive design, and UX writing best practices
name: frontend-design description: DEPRECATED: This skill has been renamed to 'impeccable'. Run /impeccable instead.
This skill has been renamed to impeccable. All design functionality now lives in the /impeccable skill.
Check if the impeccable skill is available:
- If
/impeccableexists, use it directly. You can safely inform the user that thefrontend-designfolder is a deprecated leftover and can be deleted. - If
/impeccabledoes NOT exist, tell the user to update their skills by runningnpx impeccable skills updatein their terminal.
Do NOT attempt any design work from this skill. Redirect to /impeccable instead.
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.9Kaudit
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