Verified:GitHub

error-states

Design error and empty state interfaces with recovery actions for web apps.

Updated Aug 27, 2026

Search Tags:#rate limiting #empty states #graceful degradation #offline mode #error states #ux microcopy #permission denied

Ready to run

npx skills add https://github.com/andersoncollab/design-agent --skill error-states-andersoncollab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: error-states
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/error-states
Command: npx skills add https://github.com/andersoncollab/design-agent --skill error-states-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design error and empty states that prevent dead ends, maintain user trust, and clearly communicate recovery paths when something goes wrong.

Core Features & Use Cases

Error Hierarchy & Recovery Rules: Guides you to design page-, section-, component-, and system-level failures with at least one clear action every time.
Production-Ready Pattern Catalog: Covers 404, 500, offline mode, permission denied, maintenance mode, rate limiting, partial failure, and form validation errors with the right tone and structure.
Graceful Degradation & UI Consistency: Ensures users still see useful content, get inline retry mechanisms, and avoid exposing technical details.

Quick Start

Design a 404 page with calm microcopy, a search box, a primary home CTA, and a list of popular pages so users can quickly recover without feeling stuck.

Frequently Asked Questions about error-states

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design error states that keep users informed and able to recover?▼

Design error states by applying clear user-facing messaging and at least one actionable next step for every failure scenario, ensuring users can navigate issues without hitting dead ends or seeing technical details.

What is graceful degradation and how does it apply to offline mode UX?▼

Graceful degradation in offline mode ensures users still see useful content and receive inline retry mechanisms during failures, maintaining application usability instead of crashing or displaying blank screens.

How do I write UX microcopy for 404 and 500 error pages?▼

Write UX microcopy for 404 and 500 pages using a calm tone, clear explanations, and actionable options like a search box or primary home CTA, avoiding the exposure of technical error details.

What is the best way to handle rate limiting and permission denied flows in web apps?▼

Handle rate limiting and permission denied flows by designing structured recovery paths with appropriate tone, providing clear user-facing messages and specific actions to regain access or request permissions.

How do I design empty state screens for first-time users and no search results?▼

Design first-time and no-results empty screens by guiding users with clear messaging and actionable next steps, maintaining trust by explaining the state and offering pathways to generate or find content.

Can I use this approach for form validation errors and partial failures?▼

Yes, this approach covers form validation errors and partial component failures by ensuring UI consistency and providing inline retry mechanisms so users can correct inputs without losing context.