PixelPilot: Instructions file for GitHub Copilot

UI/UX Error Pages

Custom error pages that match your design system. Professional, helpful, and token-aware.

---

OVERVIEW

This skill covers custom error pages:

• 404 - Page Not Found
• 403 - Forbidden
• 419 - Session Expired (Laravel)
• 429 - Too Many Requests
• 500 - Server Error
• 503 - Service Unavailable

All pages share navbar/footer and use design tokens.

---

LARAVEL STRUCTURE

resources/views/
├── errors/
│   ├── 404.blade.php
│   ├── 403.blade.php
│   ├── 419.blade.php
│   ├── 429.blade.php
│   ├── 500.blade.php
│   ├── 503.blade.php
│   └── layout.blade.php
└── layouts/
    └── app.blade.php

---

ERROR LAYOUT

{{-- resources/views/errors/layout.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title') — {{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    
    {{-- Error page specific styles --}}
    <style>
        .error-page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .error-page__content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-8);
        }
        
        .error-page__container {
            max-width: 560px;
            text-align: center;
        }
        
        .error-page__code {
            font-size: clamp(6rem, 20vw, 10rem);
            font-weight: 800;
            line-height: 1;
            color: var(--muted);
            opacity: 0.5;
            margin-bottom: var(--space-4);
        }
        
        .error-page__title {
            font-size: var(--text-3xl);
            font-weight: 700;
            color: var(--text);
            margin-bottom: var(--space-4);
        }
        
        .error-page__message {
            font-size: var(--text-lg);
            color: var(--text-secondary);
            margin-bottom: var(--space-8);
            line-height: 1.6;
        }
        
        .error-page__actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-4);
        }
        
        .error-page__search {
            margin-top: var(--space-8);
            max-width: 400px;
            margin-inline: auto;
        }
        
        .error-page__search-form {
            display: flex;
            gap: var(--space-2);
        }
        
        .error-page__search-input {
            flex: 1;
            padding: var(--space-3) var(--space-4);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
        }
        
        .error-page__illustration {
            max-width: 300px;
            margin: 0 auto var(--space-8);
        }
        
        .error-page__illustration svg {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body class="error-page">
    {{-- Include shared navbar --}}
    @include('partials.navbar')
    
    <main class="error-page__content">
        <div class="error-page__container">
            @yield('content')
        </div>
    </main>
    
    {{-- Include shared footer --}}
    @include('partials.footer')
    
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>