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
Install
AsyrafHussin/agent-skills/laravel-inertia-react
git clone https://github.com/AsyrafHussin/agent-skills
cp -r agent-skills/skills/laravel-inertia-react ~/.claude/skills/laravel-inertia-reactnpx skillfed install AsyrafHussin/agent-skills/laravel-inertia-reactFrequently 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)
Read as markdown · JSON record · Browse the source repository
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