error-handling-ux
owl-listener/designer-skills
Design error prevention, detection, and recovery across multi-flow products.
What is error-handling-ux?
Expert guidance on designing error experiences that prevent, detect, and help users recover from failures. Use this when errors span multiple product flows; for single-form validation, use form-design instead.
- Design error prevention strategies including inline validation, smart defaults, confirmation dialogs, and constraint-based inputs
- Implement detection across real-time field validation, form submission, network errors, timeouts, and permission checks
- Craft clear error communication in human language with context, next steps, and appropriate severity levels
- Enable user recovery by preserving input, offering retries, providing alternative paths, and supporting undo actions
- Structure error messages with what happened, why, and what to do next
- Handle context-specific errors in forms, pages, network requests, empty states, and permission scenarios
How to install error-handling-ux
npx skills add https://github.com/owl-listener/designer-skills --skill error-handling-uxHow to use error-handling-ux
- 1.Identify all error scenarios in your product flows (validation, network, permissions, timeouts, empty states)
- 2.Apply the error handling hierarchy: prioritize prevention, then detection, then clear communication, then recovery
- 3.Draft error messages using the format: what happened, why, what to do next
- 4.Design error placement near the source (inline for forms, banners for network, full-page for critical errors)
- 5.Test error paths as thoroughly as happy paths to ensure users can recover
Use cases
- Design error handling for a multi-step checkout flow spanning cart, payment, and confirmation pages
- Create recovery strategies for a document editor that handles network disconnections, permission changes, and unsaved data
- Build error prevention into a data entry system with validation, auto-save, and clear messaging across multiple forms
- Design permission error experiences that explain what access is needed and how users can request it
- Implement timeout and retry logic with user-friendly messaging for API-dependent features
- Product designers working on multi-flow error experiences
- UX writers crafting error messages and recovery guidance
- Frontend engineers implementing error handling patterns
- Product managers defining error handling requirements across features
error-handling-ux FAQ
Use error-handling-ux for errors spanning multiple flows or pages. Use form-design for validation within a single form.
Prevention stops errors before they happen (smart defaults, constraints, confirmations). Detection identifies errors after they occur (validation, network checks, permission verification).
Offer immediate retry options, use auto-retry with backoff for background operations, and show a toast or banner with clear messaging about the temporary failure.
Yes, always preserve user input on error. Clearing forms frustrates users and wastes their time. Only clear after successful submission.
Focus on what happened and what to do next, not on user mistakes. Instead of 'Invalid email', use 'Email format not recognized. Please check and try again.'
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: error-handling-ux
description: Design error prevention, detection, and recovery across a product — message content, placement, and escape routes. Use when errors span multiple flows. For validation inside a single form, use form-design.
Error Handling UX
You are an expert in designing error experiences that prevent, detect, and help users recover from errors.
What You Do
You design error handling that minimizes frustration and helps users succeed.
Error Handling Hierarchy
1. Prevention
- Inline validation before submission
- Smart defaults and suggestions
- Confirmation dialogs for destructive actions
- Constraint-based inputs (date pickers, dropdowns)
- Auto-save to prevent data loss
2. Detection
- Real-time field validation
- Form-level validation on submit
- Network error detection
- Timeout handling
- Permission and authentication checks
3. Communication
- Clear, human language (not error codes)
- Explain what happened and why
- Tell the user what to do next
- Place error messages near the source
- Use appropriate severity (error, warning, info)
4. Recovery
- Preserve user input (don't clear forms on error)
- Offer retry for transient failures
- Provide alternative paths
- Auto-retry with backoff for network errors
- Undo for accidental actions
Error Message Format
- What happened: Brief, clear description
- Why: Context if helpful
- What to do: Specific action to resolve
Error States by Context
- Forms: Inline per-field + summary at top
- Pages: Full-page error with retry/back options
- Network: Toast/banner with retry
- Empty results: Helpful empty state with suggestions
- Permissions: Explain what access is needed and how to get it
Best Practices
- Never blame the user
- Be specific (not just 'Something went wrong')
- Maintain the user's context and data
- Log errors for debugging
- Test error paths as thoroughly as happy paths
Related skills
More from owl-listener/designer-skills and the wider catalog.
experience-map
Map the full ecosystem of touchpoints, channels, and relationships across a multi-channel service.
feedback-patterns
Design confirmations, status updates, and notifications that acknowledge user actions.
fitts-law
Apply Fitts's Law to size and position controls for faster, more accurate interaction.
form-design
Design forms that reduce abandonment and errors through clear layout, smart validation, and accessibility.
gesture-patterns
Design intuitive touch and pointer gestures—swipe, drag, long-press—with discoverability and accessibility.
handoff-spec
Write complete implementation handoffs with measurements, behaviors, assets, states, and edge cases for developers.