error-states
Error handling patterns for Astro sites. 404/500 pages, form errors, offline states, loading failures. Use for graceful degradation and user experience.
When & Why to Use This Skill
This Claude skill provides comprehensive error handling patterns specifically optimized for Astro websites, focusing on graceful degradation and superior user experience. It offers structured guidance for implementing custom 404/500 pages, accessible form validation, loading indicators, and offline fallbacks to maintain user trust and site reliability even during technical failures.
Use Cases
- Scenario 1: Designing branded 404 and 500 error pages that include search functionality and helpful navigation links to prevent user bounce after a broken link or server error.
- Scenario 2: Implementing real-time, accessible form validation patterns that provide clear, non-blaming feedback to users during data entry and submission.
- Scenario 3: Developing robust offline states and network awareness to ensure the site remains functional or provides clear feedback to users with intermittent internet connectivity.
- Scenario 4: Integrating loading spinners and empty state components to manage user expectations and improve perceived performance during asynchronous data-heavy operations.
| name | error-states |
|---|---|
| description | Error handling patterns for Astro sites. 404/500 pages, form errors, offline states, loading failures. Use for graceful degradation and user experience. |
Error States Skill
Purpose
Provides error handling patterns that maintain trust and guide users when things go wrong. Includes custom error pages, form validation states, loading indicators, offline fallbacks, and network error handling.
Core Rules
- Never blame the user — "We couldn't find that" not "Invalid request"
- Offer next steps — Always provide a way forward
- Keep branding — Error pages should match site design
- Be helpful — Search, popular links, contact info
- Log errors — Track 404s to fix broken links
- Accessible errors — Use ARIA labels and semantic HTML
- Loading feedback — Show spinners for async operations
- Network awareness — Handle offline states gracefully
- User-friendly messages — Translate HTTP codes to plain language
- Prevent error loops — Fail silently in error handlers
References
See the references/ directory for detailed implementations:
- error-pages.md — Custom 404 and 500 error pages with tracking
- form-errors.md — Inline field errors and error summary components
- loading-states.md — Loading spinners and offline fallback page
- empty-states.md — Empty state component with icons and actions
- network-handling.md — Safe fetch utility, toast notifications, error logging
Forbidden
- Technical jargon in error messages
- Blaming users for errors
- Generic "Something went wrong" with no next steps
- Error pages without navigation
- Silent failures (no feedback)
- Ignoring 404 tracking
Definition of Done
- Custom 404 page with search and links
- Custom 500 page with recovery options
- Form validation with inline errors
- Loading states for async operations
- Offline fallback page
- Empty states for lists/search
- Toast notifications for actions
- Error logging in production
- All error pages match site branding