Claude-skill-registry error-pages

Create custom 404 and 500 error pages with brand styling. Use at project end before release. Triggers on "404", "error pages", "not found", "500 error".

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/error-pages" ~/.claude/skills/majiayu000-claude-skill-registry-error-pages && rm -rf "$T"

manifest: skills/data/error-pages/SKILL.md

source content

Error Pages

Create branded 404 and 500 error pages.

Workflow

Create app/not-found.tsx (404)
Create app/error.tsx (500)
Match brand styling from globals.css
Add i18n support

404 Page (not-found.tsx)

Create at

app/not-found.tsx

import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="min-h-svh flex items-center justify-center bg-background">
      <div className="container text-center">
        <h1 className="mb-4">404</h1>
        <p className="text-muted-foreground mb-8">
          Diese Seite wurde nicht gefunden.
        </p>
        <Link href="/" className="btn btn-primary">
          Zurück zur Startseite
        </Link>
      </div>
    </div>
  )
}

500 Page (error.tsx)

Create at

app/error.tsx

'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="min-h-svh flex items-center justify-center bg-background">
      <div className="container text-center">
        <h1 className="mb-4">Fehler</h1>
        <p className="text-muted-foreground mb-8">
          Ein unerwarteter Fehler ist aufgetreten.
        </p>
        <button onClick={reset} className="btn btn-primary">
          Erneut versuchen
        </button>
      </div>
    </div>
  )
}

i18n Support

Add to messages/de.json and messages/en.json:

{
  "error": {
    "404": {
      "title": "404",
      "message": "Diese Seite wurde nicht gefunden.",
      "cta": "Zurück zur Startseite"
    },
    "500": {
      "title": "Fehler",
      "message": "Ein unerwarteter Fehler ist aufgetreten.",
      "cta": "Erneut versuchen"
    }
  }
}