error-handling-ux
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`.
Works with
--- 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`. license: MIT --- # 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
More General & Other skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
