inertia-adonisjs

Original：🇺🇸 English

Translated

Build AdonisJS 6 + Inertia.js (React) applications from scratch through production. Full lifecycle - setup, pages, forms, shared data, debugging.

1installs

Sourcefilipebraida/skills

Added on2026-02-09

NPX Install

npx skill4agent add filipebraida/skills inertia-adonisjs

SKILL.md Content

View Translation Comparison →

<essential_principles>

How Inertia + AdonisJS Works

Inertia is a bridge between AdonisJS and React. You keep server-side routing and controllers, while the client swaps page components without full reloads.

1. Server-Driven Pages

Controllers render Inertia responses with props:

ts

return ctx.inertia.render("users/show", { user: new UserDto(user) });

2. No Client-Side Routing

Routes live in

start/routes.ts

. Inertia intercepts links and form submissions, making XHR requests and swapping components.

3. DTOs for Props

Props are sent to the client. Use DTOs to control the shape and avoid leaking fields.

4. Validation at the Edge

Validate on the server with VineJS. Let the validator throw and let Inertia handle the errors. </essential_principles>

<intake> **What would you like to do?**

Set up Inertia in AdonisJS
Create a new page/component
Build a form with validation
Debug an Inertia issue
Something else

Then read the matching workflow from
workflows/
and follow it. </intake>

<routing> | Response | Workflow | |----------|----------| | 1, "setup", "install", "start", "new" | `workflows/setup-inertia.md` | | 2, "page", "component", "create", "render" | `workflows/create-page.md` | | 3, "form", "validation", "submit", "useForm" | `workflows/build-form.md` | | 4, "debug", "fix", "error", "not working" | `workflows/debug-inertia.md` | | 5, other | Clarify, then select workflow or references | </routing>

<verification_loop>

After Every Change

Does the page render? Check for
```
X-Inertia
```
response header
Are props received?
```
console.log(usePage().props)
```
Does navigation work? Links should not full-reload
Do forms submit? Check Network tab for XHR requests
Are errors displayed? Trigger validation failure

ts

// Frontend debug
console.log(usePage().props);

Report to the user:

"Inertia response: ok"
"Props received: X keys"
"Navigation: SPA mode ok" </verification_loop>

<reference_index>

Domain Knowledge

All in

references/

:

Core: setup.md, responses.md, forms.md, validation.md Data Flow: shared-data.md, links.md Quality: testing.md Cookbook: cookbook.md </reference_index>

<workflows_index>

Workflows