harden
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
Treat edge cases as design input, not as cleanup after the happy path already shipped.
Consult the semantic color reference when designing error, warning, success, and info states so semantic color stays clear and not purely decorative. Consult the status communication reference when hardening notification flows, activity feeds, summaries, or alert settings against fatigue and interruption overload. Consult the image treatment when hardening user-uploaded media, screenshots, icon scaling, or image bleed behavior. Consult the error-recovery reference when the task involves validation behavior, summaries, strict validators, recoverable field errors, or abandonment caused by poor recovery design. Consult the authentication and account recovery reference when hardening sign-in, session expiry, password setup, MFA, lockout, or account-recovery flows. Consult the permissions and roles UX reference when hardening role editors, request-access flows, 403 recovery, admin-vs-member surfaces, capability boundaries, or risky permission changes. Consult the language and locale selection reference when hardening language selectors, regional overrides, currency or shipping preferences, or locale-switching flows that can fail under travel, VPN, or multilingual conditions. Consult the component accessibility reference when hardening keyboard support, focus indicators, skip links, hidden-content behavior, modal focus management, or accessibility claims in custom and third-party components. Consult the empty-state patterns reference when a failure needs a dedicated route-level recovery page for states like 401, 403, 404, 429, 500, or 503. Consult the interaction design reference when hardening workflows that must stay usable under stress, urgency, operational pressure, or emergency conditions. Consult the loading feedback and perceived performance reference when hardening loading states, stale-data cues, skeleton usage, or performance-looking states that may be masking brittle real behavior. Consult the micro failures and perceived quality reference when the interface technically works but feels flaky, unstable, or trust-eroding because of tiny repeated jank, state loss, hover traps, weak feedback, or similar papercuts.
MANDATORY PREPARATION
More from aladicf/better-web-ui
critique
Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring and actionable feedback. Use when the user wants an overall design or UX review—not when the main need is measurable accessibility/performance diagnosis, or final micro-detail polish.
32polish
Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.
32frontend-design
Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or redesign web pages, flows, components, or full app surfaces, or when another better-web-ui skill needs shared project design context before other better-web-ui skills.
31empty-state
Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.
30normalize
Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.
30colorize
Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
30