Laravel Inertia React

# Laravel + Inertia.js + React Skill for AI Agents

This document provides guidance for AI agents on how to effectively use the Laravel + Inertia.js + React skill patterns.

## Overview

This skill provides comprehensive patterns for building modern monolithic applications with Laravel backend, Inertia.js adapter, and React frontend. It covers 24 rules across 6 key categories.

## When to Apply This Skill

Apply this skill when:

- Building Laravel applications with Inertia.js and React
- Creating or modifying Inertia page components
- Implementing forms with the useForm hook
- Setting up navigation with Inertia's Link component
- Configuring shared data through HandleInertiaRequests
- Implementing persistent layouts
- Working with TypeScript in Inertia React apps
- Handling file uploads, validation, or flash messages

## Skill Categories

### 1. Page Components (CRITICAL)
**Priority**: CRITICAL | **Rules**: 6

Core patterns for structuring Inertia page components:
- Component structure with TypeScript interfaces
- Props typing extending PageProps
- Head management for SEO and meta tags
- Layout assignment using the layout property
- Scroll preservation during navigation
- Partial reloads for performance

**When to reference**: Creating new pages, typing props, managing document head, or optimizing page loads.

### 2. Forms & Validation (CRITICAL)
**Priority**: CRITICAL | **Rules**: 8

Complete form handling with Inertia's useForm hook:
- Basic useForm setup and methods
- Displaying Laravel validation errors
- File uploads with progress tracking
- Form state management (dirty, processing, errors)
- Data transformation before submission
- Reset and cleanup patterns

**When to reference**: Building forms, handling validation, file uploads, or managing form state.

### 3. Navigation (CRITICAL-HIGH)
**Priority**: CRITICAL to HIGH | **Rules**: 5

SPA-like navigation without full page reloads:
- Link component for internal navigation
- Programmatic navigation with router
- External links and download handling
- State preservation during navigation
- History management with replace option

**When to reference**: Implementing navigation, links, routing, or programmatic page transitions.

### 4. Shared Data (CRITICAL-HIGH)
**Priority**: CRITICAL to HIGH | **Rules**: 4

Global props shared across all pages:
- Authentication user data
- Flash messages from Laravel
- Ziggy routes for type-safe routing
- App configuration and feature flags

**When to reference**: Accessing user data, displaying flash messages, using Laravel routes in JS, or sharing global config.

### 5. Layouts (CRITICAL)
**Priority**: CRITICAL | **Rules**: 1

Persistent layout implementation:
- Layout property pattern
- Nested layouts
- State preservation across navigation
- Performance benefits

**When to reference**: Setting up layouts, preventing layout re-renders, or optimizing navigation performance.

### 6. Advanced Patterns (MEDIUM)
**Priority**: MEDIUM | **Rules**: Covered in other sections

Advanced techniques integrated into other categories:
- Partial reloads (Page Components)
- Scroll preservation (Page Components)
- Progress indicators (Forms)
- Dirty tracking (Forms)

## Integration Patterns

### Laravel Controller → Inertia Page

```php
// Laravel Controller
public function index(): Response
{
    return Inertia::render('Users/Index', [
        'users' => User::paginate(10),
        'filters' => request()->only('search', 'role'),
    ]);
}
```

```tsx
// React Page Component
interface Props extends PageProps {
    users: PaginatedData<User>;
    filters: { search: string; role: string };
}

export default function Index({ users, filters }: Props) {
    // Implementation
}
```

### HandleInertiaRequests → Shared Props

```php
// Laravel Middleware
public function share(Request $request): array
{
    return [
        'auth' => ['user' => $request->user()],
        'flash' => ['success' => session('success')],
    ];
}
```

```tsx
// React Usage
const { auth,