error-prevention-recovery
Design error prevention, error messages, and recovery flows for cognitive accessibility. Use when designing forms, checkout flows, account creation, settings, data entry, or any flow where users can make mistakes. Triggers on: error handling, error messages, form errors, validation, users make mistakes, users abandon, error recovery, undo, forgiving design.
- Installs
- 81
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/inclusive-design-skills --skill error-prevention-recovery- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads error-prevention-recovery automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Error Prevention and Recovery
Design systems that prevent errors before they happen, and when errors do occur, help people recover without shame, confusion, or lost work.
Prevention Strategies
Forgiving Input
- Accept multiple date formats ("15/03/2026", "15 March 2026", "March 15, 2026")
- Accept multiple phone formats ("(555) 123-4567", "555-123-4567", "5551234567")
- Auto-format as the user types
- Case-insensitive matching
- Trim whitespace automatically
- Show format examples next to fields ("e.g., 15/03/2026")
Smart Defaults
- Pre-select the most common option
- Pre-fill known information (name from account, address from postcode)
- Show the recommended choice for complex decisions
- Default to the safest option for irreversible settings
Progressive Validation
- Validate each field when the user moves to the next (on blur)
- Show success states for correctly completed fields
- Never validate while the user is still typing
- Never clear user input on error — always preserve their work
Minimal Demands
- Only ask for information you strictly need
- Mark optional fields, not required ones (most fields should be required by design — if they aren't needed, remove them)
- Break long forms into steps with clear progress
Error Message Design
Every error message must answer three questions:
- What happened? (specific, not generic)
- Why? (in plain language)
- What do I do now? (a clear, single action)
Examples
Bad: "Invalid input" Good: "Please enter a date in the format DD/MM/YYYY — for example, 15/03/2026"
Bad: "Error 403" Good: "You don't have permission to view this page. Contact your team admin to request access."
Bad: "Password does not meet requirements" Good: "Your password needs at least 8 characters and one number. You have 6 characters."
Error Message Tone
- Never blame the user ("You entered an invalid email")
- State the situation neutrally ("We need a valid email to continue")
- Be specific about what needs to change
- Offer an alternative path when possible
Recovery Design
- Undo available for at least 10 seconds after any action
- Confirmation before destructive actions with useful detail: "Delete 'Project Alpha'? This removes all 23 files. This cannot be undone."
- Preview before submission for any consequential action
- Save progress automatically in long flows
- Alternative path when primary path fails: "Can't upload a photo? You can describe what you see instead."
FAQ
What does the error-prevention-recovery skill do?
Design error prevention, error messages, and recovery flows for cognitive accessibility. Use when designing forms, checkout flows, account creation, settings, data entry, or any flow where users can make mistakes. Triggers on: error handling, error messages, form errors, validation, users make mistakes, users abandon, error recovery, undo, forgiving design.
How do I install error-prevention-recovery?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill error-prevention-recovery in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/error-prevention-recovery/ (personal) or .claude/skills/error-prevention-recovery/ (project).
Which AI agents can use error-prevention-recovery?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is error-prevention-recovery safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains error-prevention-recovery?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 81 recorded installs.
More from owl-listener/inclusive-design-skills
plain-language-design
owl-listener/inclusive-design-skills
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
keyboard-navigation
owl-listener/inclusive-design-skills
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Assess and reduce cognitive load in interfaces, flows, and content. Use when designing or reviewing any multi-step process, complex form, dashboard, decision flow, or information-dense screen. Triggers on: cognitive load, too complex, overwhelmed, too many steps, decision fatigue, confusing, information overload, simplify this flow. Applies to any interface where users must think, decide, or remember.
responsive-review
owl-listener/inclusive-design-skills
Review responsive and flexible layout for accessibility across devices, zoom levels, and orientations. Chains: responsive-accessibility, flexible-typography, information-density. Use when testing an existing interface across screen sizes and zoom levels for accessibility.
user-preference-respect
owl-listener/inclusive-design-skills
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
touch-target-design
owl-listener/inclusive-design-skills
Design touch targets and pointer interactions that work for people with motor difficulties, tremors, limited dexterity, or who use assistive pointing devices. Use when designing buttons, links, form controls, mobile interfaces, or any clickable/tappable elements. Triggers on: touch target, tap target, button size, too small to tap, fat finger, motor disability, dexterity, tremor, pointer, click area, hit area, mobile buttons.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.