pbakaus/impeccable▌

Distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices. \n \n Requires confirmed design context (target audience, use cases, brand personality) before implementation; includes teach-impeccable skill integration for gathering missing context \n Covers five core design areas: typography, color and theming, layout and spacing, visual details, and motion with specific anti-patterns to avoid \n Emphasizes bold aesthetic directions (brutal

One-time setup that gathers design context and persists it to your AI config file. \n \n Scans your codebase to discover existing design patterns, brand assets, tech stack, and design tokens before asking questions \n Asks targeted UX questions about users, brand personality, aesthetic preferences, and accessibility needs, skipping what's already clear from exploration \n Synthesizes findings into a Design Context markdown section saved to .impeccable.md in your project root for all future sessi

Transform functional interfaces into memorable experiences through subtle personality, micro-interactions, and unexpected moments of joy. \n \n Identifies natural delight opportunities across success states, empty states, loading screens, errors, and interactions, matched to brand personality and audience expectations \n Provides techniques for micro-interactions (button presses, hover effects, animations), personality-driven copy, custom illustrations, and satisfying interactions like drag-and-

Strategic animation and micro-interaction enhancement for improved usability and delight. \n \n Guides systematic assessment of animation opportunities across feedback, transitions, entrance effects, and delight moments, with mandatory accessibility support for prefers-reduced-motion \n Provides timing recommendations (100–800ms by purpose), GPU-accelerated easing curves, and anti-patterns to avoid (bounce/elastic effects, layout property animations, animation fatigue) \n Covers implementation a

Final quality pass catching alignment, spacing, consistency, and interaction details before shipping. \n \n Systematically reviews visual alignment, spacing, typography hierarchy, color contrast, and interaction states across all breakpoints and device types \n Identifies and fixes micro-interaction gaps, transition smoothness, edge cases, error states, and loading feedback to ensure polished user experience \n Requires frontend-design skill context and functional completeness before starting; i

Identify and improve unclear interface text to make products easier to understand and use. \n \n Assesses copy across error messages, form labels, buttons, help text, empty states, success messages, and confirmation dialogs to find jargon, ambiguity, passive voice, and missing context \n Requires frontend-design skill context and audience analysis before proceeding; gathers technical level and user mental state to inform improvements \n Applies core principles: be specific, concise, active, huma

Design or improve onboarding flows that get users to their \"aha moment\" quickly and successfully. \n \n Assess onboarding needs by identifying user challenges, experience level, and the key action you want them to take, then define measurable success metrics \n Follow core principles: show don't tell, make it optional, prioritize time to value, teach contextually, and respect user intelligence \n Design for multiple contexts: initial product onboarding (welcome, setup, core concepts, first suc

Amplify safe or generic designs with intentional drama, distinctive choices, and visual confidence while maintaining usability. \n \n Systematically increases impact across typography, color, spatial composition, motion, and visual effects to create memorable experiences \n Guides away from AI design clichés (cyan gradients, glassmorphism, neon accents) toward distinctive, purposeful amplification \n Requires design context analysis first—assesses brand personality, purpose, audience, and constr

Systematically assess and refine typography to eliminate generic defaults and establish clear hierarchy, readability, and brand personality. \n \n Analyzes five core typography dimensions: font choices, visual hierarchy, sizing consistency, readability metrics, and weight strategy across components \n Guides font selection, type scale establishment, and weight assignment aligned to brand personality and context (fixed scales for app UIs, fluid sizing for marketing pages) \n Covers practical read

Analyze and redesign features to match your design system standards and ensure consistency. \n \n Requires upfront design system discovery—searches for documentation, UI guidelines, and design tokens before making changes; asks clarifying questions rather than guessing at principles \n Systematically normalizes typography, color, spacing, components, motion, responsive behavior, and accessibility across eight key dimensions \n Prioritizes UX consistency and usability over visual polish; replaces

Systematically identify and fix performance bottlenecks across loading, rendering, animations, and bundle size. \n \n Covers five optimization areas: image optimization, JavaScript/CSS reduction, font loading, rendering performance, and animation efficiency \n Includes Core Web Vitals guidance (LCP, FID/INP, CLS) with specific thresholds and remediation strategies \n Provides code examples for common patterns: lazy loading, code splitting, layout thrashing prevention, GPU-accelerated animations,

Strip designs to their essence by removing unnecessary complexity and revealing core functionality. \n \n Analyzes complexity sources across information architecture, visual design, layout, interactions, and content to identify what can be removed or hidden \n Applies ruthless simplification strategies including progressive disclosure, element consolidation, color/typography reduction, and flattened component hierarchies \n Requires the frontend-design skill and its Context Gathering Protocol as

Evaluate design effectiveness across visual hierarchy, information architecture, emotional resonance, and user experience quality. \n \n Assesses interfaces against AI-generated design anti-patterns (color palettes, gradients, glassmorphism, generic layouts) to identify and eliminate \"AI slop\" tells \n Evaluates 10 core dimensions: visual hierarchy, information architecture, emotional resonance, discoverability, composition, typography, color strategy, state handling, microcopy, and affordance

Systematic quality audit across accessibility, performance, theming, and responsive design with prioritized findings. \n \n Scans five dimensions: accessibility (contrast, ARIA, keyboard nav, semantic HTML, alt text, forms), performance (layout thrashing, expensive animations, bundle size, render efficiency), theming (hard-coded colors, dark mode, token consistency), responsive design (fixed widths, touch targets, overflow, text scaling), and AI anti-patterns \n Documents issues by severity (Cri

Reduce visual intensity in designs while preserving refinement, sophistication, and functional clarity. \n \n Systematically addresses color saturation, contrast extremes, visual weight, animation excess, and compositional complexity to create calmer, more approachable interfaces \n Requires frontend-design skill context and the Context Gathering Protocol; stops to clarify purpose, audience, and what's working before proceeding \n Guides refinement across five dimensions: color (desaturation, mu

Systematically strengthen interfaces against text overflow, internationalization, errors, and real-world edge cases. \n \n Covers text handling (truncation, wrapping, responsive sizing), RTL/CJK support, date/number formatting, and translation expansion planning \n Provides error recovery patterns for network failures, API status codes, validation errors, and permission states \n Includes edge case strategies: empty states, loading states, large datasets, concurrent operations, and boundary cond

Rethink designs for different screens, devices, and contexts while maintaining consistency. \n \n Assess source and target contexts (device type, input method, screen size, connection speed, usage patterns) to identify what won't fit or work across platforms \n Apply context-specific strategies: single-column layouts and touch targets for mobile, two-column hybrid layouts for tablet, multi-column and hover states for desktop, narrow widths and inline CSS for email \n Use responsive techniques in

Strategically introduce color to monochromatic designs while maintaining hierarchy, accessibility, and visual restraint. \n \n Requires running the frontend-design skill first to establish design context and gather existing brand colors \n Guides systematic color application across semantic states (success, error, warning, info), accents, backgrounds, data visualization, borders, and typography \n Enforces a 60-30-10 color distribution rule and WCAG contrast compliance to prevent overwhelming or

Identify and extract reusable components, design tokens, and patterns into a cohesive design system. \n \n Analyzes target areas to find repeated UI patterns, hard-coded values, and inconsistent variations worth systematizing \n Guides extraction planning including component APIs, token hierarchies, naming conventions, and migration strategies \n Emphasizes incremental growth: extract only patterns used 3+ times or with clear reuse potential, avoiding over-generalization \n Includes accessibilit

$22

$22