Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
asyrafhussin avatar

Laravel Inertia React

asyrafhussin/agent-skills

  • 965 installs
  • 58 repo stars
  • Updated May 16, 2026
  • asyrafhussin/agent-skills

laravel-inertia-react is an agent skill that supplies precise Laravel, Inertia.js, and React patterns for developers building modern monolithic web applications with shared server-driven navigation.

About

laravel-inertia-react is a comprehensive agent skill for building modern monolithic applications with a Laravel backend, Inertia.js adapter, and React frontend. It organizes guidance into 24 rules across six categories covering Inertia page components, useForm hook forms, Link-based navigation, HandleInertiaRequests shared data, and Laravel-Inertia integration conventions. Developers reach for laravel-inertia-react when AI agents need consistent, production-aligned patterns instead of mixing SPA routing approaches that fight Inertia's server-driven model.

  • 24 rules across 6 key categories including Page Components and Forms & Validation
  • CRITICAL priority guidance for TypeScript interfaces, useForm hook, and persistent layouts
  • Patterns for Inertia Link navigation, shared data via HandleInertiaRequests, and file uploads
  • Head management for SEO, partial reloads for performance, and scroll preservation
  • Hard-gated rules that prevent common Inertia + React anti-patterns before code generation

Laravel Inertia React by the numbers

  • 965 all-time installs (skills.sh)
  • +47 installs in the week ending Jul 29, 2026 (Skillselion tracking)
  • Ranked #379 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 29, 2026 (Skillselion catalog sync)
npx skills add https://github.com/asyrafhussin/agent-skills --skill laravel-inertia-react

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs965
repo stars★ 58
Security audit3 / 3 scanners passed
Last updatedMay 16, 2026
Repositoryasyrafhussin/agent-skills ↗

How do you build Laravel apps with Inertia.js and React?

Get precise, battle-tested patterns for building Laravel backends with Inertia.js and React frontends using AI coding agents.

Who is it for?

PHP developers building or extending Laravel monoliths who pair Inertia.js with React and want agent-generated code to follow established project patterns.

Skip if: Greenfield SPAs that use client-side React Router with a separate JSON API instead of Inertia's server-driven page model.

When should I use this skill?

The user builds or modifies Laravel Inertia React pages, forms, shared props, or navigation and needs consistent monolith patterns.

What you get

Inertia page components, validated form flows, shared middleware data, and navigation patterns aligned with Laravel backend conventions.

  • Inertia page components
  • Form flows with useForm
  • Shared middleware data configuration

By the numbers

  • Covers 24 rules across 6 key categories
  • Targets the Laravel + Inertia.js + React monolith stack

Files

SKILL.mdMarkdownGitHub ↗

Laravel + Inertia.js + React

Comprehensive patterns for building modern monolithic applications with Laravel, Inertia.js, and React. Contains 30+ rules for seamless full-stack development.

When to Apply

Reference these guidelines when:

  • Creating Inertia page components
  • Handling forms with useForm hook
  • Managing shared data and authentication
  • Implementing persistent layouts
  • Navigating between pages

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Page ComponentsCRITICALpage-
2Forms & ValidationCRITICALform-
3Navigation & LinksHIGHnav-
4Shared DataHIGHshared-
5LayoutsMEDIUMlayout-
6File UploadsMEDIUMupload-
7Advanced PatternsLOWadvanced-

Quick Reference

1. Page Components (CRITICAL)

  • page-props-typing - Type page props from Laravel
  • page-component-structure - Standard page component pattern
  • page-head-management - Title and meta tags with Head
  • page-default-layout - Assign layouts to pages

2. Forms & Validation (CRITICAL)

  • form-useform-basic - Basic useForm usage
  • form-validation-errors - Display Laravel validation errors
  • form-processing-state - Handle form submission state
  • form-reset-preserve - Reset vs preserve form data
  • form-nested-data - Handle nested form data
  • form-transform - Transform data before submit

3. Navigation & Links (HIGH)

  • nav-link-component - Use Link for navigation
  • nav-preserve-state - Preserve scroll and state
  • nav-partial-reloads - Reload only what changed
  • nav-replace-history - Replace vs push history

4. Shared Data (HIGH)

  • shared-auth-user - Access authenticated user
  • shared-flash-messages - Handle flash messages
  • shared-global-props - Access global props
  • shared-typescript - Type shared data

5. Layouts (MEDIUM)

  • layout-persistent - Persistent layouts pattern
  • layout-nested - Nested layouts
  • layout-default - Default layout assignment
  • layout-conditional - Conditional layouts

6. File Uploads (MEDIUM)

  • upload-basic - Basic file upload
  • upload-progress - Upload progress tracking
  • upload-multiple - Multiple file uploads

7. Advanced Patterns (LOW)

  • advanced-polling - Real-time polling
  • advanced-prefetch - Prefetch pages
  • advanced-modal-pages - Modal as pages
  • advanced-infinite-scroll - Infinite scrolling

Essential Patterns

Page Component with TypeScript

// resources/js/Pages/Posts/Index.tsx
import { Head, Link } from '@inertiajs/react'

interface Post {
  id: number
  title: string
  excerpt: string
  created_at: string
  author: {
    id: number
    name: string
  }
}

interface Props {
  posts: {
    data: Post[]
    links: { url: string | null; label: string; active: boolean }[]
  }
  filters: {
    search?: string
  }
}

export default function Index({ posts, filters }: Props) {
  return (
    <>
      <Head title="Posts" />

      <div className="container mx-auto py-8">
        <h1 className="text-2xl font-bold mb-6">Posts</h1>

        <div className="space-y-4">
          {posts.data.map((post) => (
            <article key={post.id} className="p-4 bg-white rounded-lg shadow">
              <Link href={route('posts.show', post.id)}>
                <h2 className="text-xl font-semibold hover:text-blue-600">
                  {post.title}
                </h2>
              </Link>
              <p className="text-gray-600 mt-2">{post.excerpt}</p>
              <p className="text-sm text-gray-400 mt-2">
                By {post.author.name}
              </p>
            </article>
          ))}
        </div>
      </div>
    </>
  )
}

Form with useForm

// resources/js/Pages/Posts/Create.tsx
import { Head, useForm, Link } from '@inertiajs/react'
import { FormEvent } from 'react'

interface Category {
  id: number
  name: string
}

interface Props {
  categories: Category[]
}

export default function Create({ categories }: Props) {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
    category_id: '',
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    post(route('posts.store'), {
      onSuccess: () => reset(),
    })
  }

  return (
    <>
      <Head title="Create Post" />

      <form onSubmit={handleSubmit} className="max-w-2xl mx-auto py-8">
        <div className="mb-4">
          <label htmlFor="title" className="block font-medium mb-1">
            Title
          </label>
          <input
            id="title"
            type="text"
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            className="w-full border rounded px-3 py-2"
          />
          {errors.title && (
            <p className="text-red-500 text-sm mt-1">{errors.title}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="category" className="block font-medium mb-1">
            Category
          </label>
          <select
            id="category"
            value={data.category_id}
            onChange={(e) => setData('category_id', e.target.value)}
            className="w-full border rounded px-3 py-2"
          >
            <option value="">Select a category</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.category_id && (
            <p className="text-red-500 text-sm mt-1">{errors.category_id}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="body" className="block font-medium mb-1">
            Content
          </label>
          <textarea
            id="body"
            value={data.body}
            onChange={(e) => setData('body', e.target.value)}
            rows={10}
            className="w-full border rounded px-3 py-2"
          />
          {errors.body && (
            <p className="text-red-500 text-sm mt-1">{errors.body}</p>
          )}
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={processing}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            {processing ? 'Creating...' : 'Create Post'}
          </button>

          <Link
            href={route('posts.index')}
            className="px-4 py-2 border rounded"
          >
            Cancel
          </Link>
        </div>
      </form>
    </>
  )
}

Persistent Layout

// resources/js/Layouts/AppLayout.tsx
import { Link, usePage } from '@inertiajs/react'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

export default function AppLayout({ children }: Props) {
  const { auth } = usePage().props as { auth: { user: { name: string } } }

  return (
    <div className="min-h-screen bg-gray-100">
      <nav className="bg-white shadow">
        <div className="container mx-auto px-4 py-3 flex justify-between">
          <Link href="/" className="font-bold">
            My App
          </Link>
          <span>Welcome, {auth.user.name}</span>
        </div>
      </nav>

      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
    </div>
  )
}

// resources/js/Pages/Dashboard.tsx
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
  return <h1>Dashboard</h1>
}

// Assign persistent layout
Dashboard.layout = (page: ReactNode) => <AppLayout>{page}</AppLayout>

Laravel Controller

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StorePostRequest;
use App\Models\Post;
use App\Models\Category;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

class PostController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::with('author:id,name')
                ->latest()
                ->paginate(10),
            'filters' => request()->only('search'),
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Posts/Create', [
            'categories' => Category::all(['id', 'name']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        $post = Post::create([
            ...$request->validated(),
            'user_id' => auth()->id(),
        ]);

        return redirect()
            ->route('posts.show', $post)
            ->with('success', 'Post created successfully.');
    }

    public function show(Post $post): Response
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('author', 'category'),
        ]);
    }
}

Shared Data (HandleInertiaRequests)

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user() ? [
                    'id' => $request->user()->id,
                    'name' => $request->user()->name,
                    'email' => $request->user()->email,
                ] : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ],
        ]);
    }
}

Flash Messages Component

// resources/js/Components/FlashMessages.tsx
import { usePage } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function FlashMessages() {
  const { flash } = usePage().props as {
    flash: { success?: string; error?: string }
  }
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (flash.success || flash.error) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [flash])

  if (!visible) return null

  return (
    <div className="fixed top-4 right-4 z-50">
      {flash.success && (
        <div className="bg-green-500 text-white px-4 py-2 rounded shadow">
          {flash.success}
        </div>
      )}
      {flash.error && (
        <div className="bg-red-500 text-white px-4 py-2 rounded shadow">
          {flash.error}
        </div>
      )}
    </div>
  )
}

How to Use

Read individual rule files for detailed explanations and code examples:

rules/form-useform-basic.md
rules/page-props-typing.md
rules/layout-persistent.md

Project Structure

laravel-inertia-react/
├── SKILL.md                 # This file - overview and examples
├── README.md                # Quick reference guide
├── AGENTS.md                # Integration guide for AI agents
├── metadata.json            # Skill metadata and references
└── rules/
    ├── _sections.md         # Rule categories and priorities
    ├── _template.md         # Template for new rules
    ├── page-*.md            # Page component patterns (6 rules)
    ├── form-*.md            # Form handling patterns (8 rules)
    ├── nav-*.md             # Navigation patterns (5 rules)
    ├── shared-*.md          # Shared data patterns (4 rules)
    └── layout-*.md          # Layout patterns (1 rule)

References

License

MIT License. This skill is provided as-is for educational and development purposes.

Metadata

  • Version: 1.0.1
  • Last Updated: 2026-01-17
  • Maintainer: Asyraf Hussin
  • Rule Count: 24 rules across 6 categories
  • Tech Stack: Laravel 10+, Inertia.js 1.0+, React 18+, TypeScript 5+

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kvercel-labsVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

How it compares

Use laravel-inertia-react for Inertia monolith conventions—not for headless Laravel API plus separate React SPA architectures.

FAQ

How many rules does laravel-inertia-react include?

laravel-inertia-react provides 24 rules organized across six key categories, giving agents structured guidance for Laravel backends paired with Inertia.js and React frontends.

When should I use laravel-inertia-react?

laravel-inertia-react applies when building or modifying Laravel applications that use Inertia.js with React—especially for page components, useForm forms, Link navigation, and HandleInertiaRequests shared data.

Is Laravel Inertia React safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.