404-page
Audit and guidance for implementing functional, user-friendly 404 error pages.
Install
mkdir -p .claude/skills/404-page && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16102" && unzip -o skill.zip -d .claude/skills/404-page && rm skill.zipInstalls to .claude/skills/404-page
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.Key capabilities
- →Verify custom 404 error pages
- →Confirm HTTP 404 status codes are returned
- →Check for helpful navigation options on 404 pages
- →Ensure consistent branding on 404 pages
- →Review templates and rendered HTML for 404 page markup
How it works
The skill verifies that a custom 404 error page exists, includes navigation options, maintains branding, and returns an HTTP 404 status code.
Inputs & outputs
When to use 404-page
- →Validating 404 page markup
- →Improving site UX
- →Fixing soft 404 errors
About this skill
Create a custom 404 error page
A generic browser 404 page causes users to leave immediately—a well-designed custom page provides recovery paths and keeps users engaged with your site.
Quick Reference
- Custom 404 pages retain users who encounter broken or moved links
- Include search, navigation, and links to popular content
- Maintain consistent branding and site design
- Track 404 errors to identify and fix broken links
- Return a real HTTP 404 so the page is not treated as a soft 404
Check
Verify that this website has a custom 404 error page with helpful navigation options. Confirm the route returns HTTP 404 and not a branded page with a 200 response.
Fix
Create a user-friendly 404 page with search functionality and links to important pages. Ensure the server or framework returns status code 404 so the page does not become a soft 404.
Explain
Explain how custom 404 pages help retain users who encounter broken links and why returning 200 for missing pages creates soft-404 indexing problems.
Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Create a custom 404 error page. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/html/404-page
When not to use it
- →When the task is not related to 404 error pages
- →When only the source framework abstraction needs validation
Limitations
- →The skill focuses only on 404 error pages.
- →It validates the final browser-facing markup, not just the source framework abstraction.
How it compares
This skill validates the final browser-facing markup and HTTP status of 404 pages, unlike manual checks that might miss status code issues.
Compared to similar skills
404-page side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| 404-page (this skill) | 0 | 2mo | No flags | Beginner |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
| elegant-design | 21 | 5mo | Review | Intermediate |
| tailwind-design-system | 34 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
epic-ui-guidelines
epicweb-dev
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
theme-creation
etewiah
Create new themes for PropertyWebBuilder. Use when creating custom themes, styling websites, or modifying theme templates. Handles theme registration, view templates, CSS, and asset configuration.