Create branded 404 and 500 error pages for Next.js with i18n support.
npx skills add https://github.com/deomiarn/website-template --skill error-pages
Please help me install this Agent Skill. Skill: error-pages Source: https://github.com/deomiarn/website-template/tree/main/.claude/skills/error-pages Command: npx skills add https://github.com/deomiarn/website-template --skill error-pages
Branded error pages maintain a consistent look and feel during unexpected issues, reducing user confusion and support tickets while aligning with the project’s visual identity.
Create or update app/not-found.tsx (404) and app/error.tsx (500), apply brand styling from globals.css, and test error routes (e.g., /non-existent and a simulated server error).
High-intent search queries and answers about installing and using this skill.
Create branded 404 and 500 error pages by implementing `app/not-found.tsx` for 404 errors and `app/error.tsx` for 500 errors in your Next.js project. Apply styling from `globals.css` to match your brand, then test with non-existent routes and simulated server errors.
Yes, error pages support i18n by integrating localized error messages into your translation files for German and English. This ensures error messaging aligns with your site's language settings while maintaining brand consistency.
Branded error pages preserve your visual identity during unexpected issues by mirroring typography, colors, and button styles from `globals.css` across your site. This reduces user confusion and support overhead while keeping the experience cohesive.
Yes, branded error pages integrate directly into Next.js app directory by placing `not-found.tsx` at `app/not-found.tsx` and `error.tsx` at `app/error.tsx`. This follows Next.js conventions for handling routing and server errors in modern projects.
Implement a branded 500 error page with retry options using `app/error.tsx`, which captures server errors and displays helpful messaging alongside a retry button. This guides users back to functionality while maintaining brand styling.
Custom error pages reduce user confusion and support tickets by maintaining consistent branding during failures. They provide navigation back to the homepage and localized messaging, transforming generic errors into on-brand experiences.
wpgauravProvide framework-agnostic CSS patterns for typography, color, motion, and layout.
LaPaGaYoMonitor live apps post-deployment for console errors and performance regressions.
enowdevIntegrate next-intl into Next.js App Router projects for multi-language routing.
PostHogIntegrate PostHog exception autocapture into Node.js applications.
