laravel-inertia-react
This skill provides 30+ patterns for Laravel, Inertia.js, and React integration, covering page components, form handling with useForm, navigation, shared data, layouts, and file uploads. Use it when building Inertia page components, managing forms with validation, or implementing persistent layouts in full-stack applications.
laravel-inertia-react helps you build modern monolithic apps using Laravel, Inertia.js, and React with proven integration patterns.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-16
laravel-inertia-react helps you build modern monolithic apps using Laravel, Inertia.js, and React with proven integration patterns. This skill provides 30+ patterns for Laravel, Inertia.js, and React integration, covering page components, form handling with useForm, navigation, shared data, layouts, and file uploads. Use it when building Inertia page components, managing forms with validation, or implementing persistent layouts in full-stack applications.
Use it when
- laravel-inertia-react is a skill covering 30+ patterns for building modern full-stack applications with Laravel, Inertia.js, and React.
- laravel-inertia-react covers persistent layouts that persist across page visits without full remounts.
Verify before relying
Read SKILL.md below before installing (30 files). Open directory: indexed for reading, not audited.
Install
AsyrafHussin/agent-skills/laravel-inertia-react
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use the useForm hook in Inertia with React?
laravel-inertia-react teaches the useForm hook for managing form state, validation errors, and submissions. The hook tracks form data, handles server-side validation errors, and provides methods like setData, post, put, and reset. Use it to bind form inputs, display validation feedback, and manage form processing state throughout your Inertia page components.
What is laravel-inertia-react and how does it work?
laravel-inertia-react is a skill covering 30+ patterns for building modern full-stack applications with Laravel, Inertia.js, and React. It bridges your Laravel backend with React frontends using Inertia page components, eliminating the need for a separate API. The skill covers form handling, navigation, shared data, persistent layouts, and file uploads.
How do I implement persistent layouts in Inertia React?
laravel-inertia-react covers persistent layouts that persist across page visits without full remounts. Define a layout component wrapping your page, then assign it via the layout property on your page component. This pattern keeps navigation bars, sidebars, and state alive while only the page content updates, improving performance and user experience.
Can laravel-inertia-react handle form validation and error display?
Yes. laravel-inertia-react provides patterns for Laravel validation integration with Inertia's form handling. Server-side validation errors are automatically returned and accessible via the useForm hook's errors object. Display validation feedback by checking error keys and rendering error messages next to form fields in your React components.
How does laravel-inertia-react support file uploads?
laravel-inertia-react includes patterns for handling file uploads through the useForm hook. Attach files using FormData, then submit via post or put methods. The skill covers multipart form encoding, progress tracking, and server-side file handling in Laravel, enabling seamless file upload workflows in your Inertia page components.
What navigation and link patterns does laravel-inertia-react provide?
laravel-inertia-react covers Inertia's Link component for client-side navigation without full page reloads, partial page reloads for targeted updates, and programmatic navigation via the router. Learn prefetching strategies, link method options (get, post, put, delete), and how to preserve scroll position or implement custom navigation behaviors.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Page Components | CRITICAL | page- |
| 2 | Forms & Validation | CRITICAL | form- |
| 3 | Navigation & Links | HIGH | nav- |
| 4 | Shared Data | HIGH | shared- |
| 5 | Layouts | MEDIUM | layout- |
| 6 | File |
(truncated - see the full file via the links below)
File tree — 15 files
skills/laravel-inertia-react/AGENTS.md
skills/laravel-inertia-react/README.md
skills/laravel-inertia-react/SKILL.md
skills/laravel-inertia-react/metadata.json
skills/laravel-inertia-react/rules/_sections.md
skills/laravel-inertia-react/rules/_template.md
skills/laravel-inertia-react/rules/form-dirty-tracking.md
skills/laravel-inertia-react/rules/form-file-uploads.md
skills/laravel-inertia-react/rules/form-progress-indicator.md
skills/laravel-inertia-react/rules/form-reset-handling.md
skills/laravel-inertia-react/rules/form-transform-data.md
skills/laravel-inertia-react/rules/form-useform-basic.md
skills/laravel-inertia-react/rules/form-useform-hook.md
skills/laravel-inertia-react/rules/form-validation-errors.md
skills/laravel-inertia-react/rules/layout-persistent.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build modern Laravel + React apps with Inertia.js page components and form handling”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Inertia Coder guides you through building modern single-page applications that combine Inertia.js with Rails and your choice of React, Vue, or Svelte. It covers controller setup, page component patterns, form handling with the useForm hook, shared data management, and client-side routing—all without the complexity of separate APIs.
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
Build forms in Inertia.js + Rails using the `<Form>` component for simple create/edit workflows or `useForm` for multi-step wizards and dynamic fields. Automatic CSRF token handling, error mapping, file upload detection, and progress tracking eliminate the need for external form libraries. React, Vue, and Svelte examples included.
Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
More skills shadcn-svelte-inertia (MIT) · inertia-rails-controllers (MIT) · Motion React (unlicensed) · laravel-11-12-app-guidelines (Apache-2.0) · Motion Design Patterns (unlicensed) · React Google Maps (unlicensed)