# Error Page Design

> Error pages (404, 500, 403), error states, and graceful failure design.

- Skill: `dragoon0x/error-page-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/error-page-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/error-page-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/error-page-design

---


# Error Page Design

## Error Page Hierarchy

### 404 — Not Found
- Acknowledge the error clearly: "This page doesn't exist."
- Offer: Search bar, popular pages, homepage link.
- Don't blame the user.
- Optional: brand-appropriate illustration.

### 500 — Server Error
- Acknowledge without technical jargon: "Something went wrong on our end."
- Offer: Retry button, status page link, support contact.
- Log the error automatically.
- Don't say "We're working on it" unless you actually are.

### 403 — Forbidden
- Explain why: "You don't have permission to view this page."
- Offer: Login link, request access button, contact admin.

### Offline
- Detect offline state.
- Show cached content if available.
- "You're offline. Some features aren't available."
- Auto-retry when connection returns.

## Principles
1. Every error needs: What happened + What to do next.
2. Use the brand voice. Error pages are touchpoints.
3. Never show stack traces or error codes to users.
4. Include a way to report the issue.