@pbakaus

harden covers making interfaces production-ready by systematically testing extreme inputs, error scenarios, internationalization, accessibility, and edge cases. provides concrete css patterns, validation approaches, and testing strategies for real-world resilience.

adapt covers rethinking visual designs for different devices and screen sizes by assessing context constraints and applying responsive techniques (css grid, flexbox, media queries) with platform-specific layouts and testing on real hardware.

animate guides systematic addition of motion and micro-interactions to features by assessing feedback gaps, transitions, and entrance effects while enforcing accessibility and 60fps performance constraints.

typeset audits and systematizes typography by establishing font choices, hierarchy, scales, and readability standards. covers font selection, type scales, weight strategy, spacing refinement, and accessibility verification.

clarify identifies and fixes confusing interface text, error messages, labels, and instructions. it systematically improves copy across forms, buttons, empty states, and confirmation dialogs to reduce user friction.

overdrive covers browser-native performance techniques (view transitions, spring physics, webgl, scroll animations) for interfaces that feel extraordinary. requires design context and iterative visual testing, emphasizes 60fps targets and accessibility compliance.

polish performs final quality verification across visual alignment, spacing, typography, and interaction states before release, with mandatory design system discovery and pre-polish assessment phases.

layout addresses spacing systems, visual hierarchy, and grid structure through systematic assessment and improvement steps. it covers rhythm, density, and responsive adaptation but lacks concrete decision logic and failure modes.

distill simplifies designs by identifying and removing unnecessary complexity across information architecture, visuals, and interactions. requires frontend-design context and applies progressive disclosure, element consolidation, and hierarchy flattening.

delight surfaces micro-interaction opportunities (micro-animations, personality-driven copy, easter eggs) and guides placement within success/error/loading states while anchoring choices to brand voice and accessibility constraints.

deprecated skill that redirects users to /impeccable teach. contains no functional logic, only a deprecation notice.

Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use…

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling…

frontend-design — an installable skill for AI agents, published by pbakaus/impeccable.

Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding,…

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches…

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched…

Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud,…

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the…

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions…

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky,…

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity…

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with…

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…