Integrate Inertia and React patterns with typed page props in AdonisJS projects.
npx skills add https://github.com/lncitador/adonisjs-maestro --skill inertia-react
Please help me install this Agent Skill. Skill: inertia-react Source: https://github.com/lncitador/adonisjs-maestro/tree/main/skills/inertia-react Command: npx skills add https://github.com/lncitador/adonisjs-maestro --skill inertia-react
The frontend layer in AdonisJS projects that use Inertia + React often suffers from inconsistent imports, typing, and shared data handling. This skill clarifies how to structure and orchestrate the React frontend with Inertia, ensuring correct usage of AdonisJS components, typed props, and shared state across pages.
Install both inertia-react and adonisjs skills, then start the dev server and begin building with inertia.render() and the React components
High-intent search queries and answers about installing and using this skill.
To share data across Inertia pages in AdonisJS, use InertiaMiddleware to orchestrate shared state, applying inertia.always or inertia.defer patterns to control data loading and passing to React components.
Type Inertia page props in AdonisJS by importing types from @generated/data. This ensures end-to-end typing for page props and automatic transformer shapes, maintaining clear separation between backend and frontend concerns.
Structure React frontends with Inertia in AdonisJS by importing components from @adonisjs/inertia/react, using Form and Link components, and ensuring typed props from @generated/data for consistent shared data handling.
Yes, Inertia works with React and AdonisJS to provide end-to-end typed page props. By leveraging @generated/data and automatic transformer shapes, you maintain type safety from backend controllers to React components.
Use inertia.render with React components in AdonisJS by ensuring correct imports from @adonisjs/inertia/react, passing typed props from @generated/data, and handling deferred or optional props including pagination.
Inconsistent Inertia React imports in AdonisJS often occur when not using the correct import paths. Ensure components are imported from @adonisjs/inertia/react and typed data is sourced from @generated/data.
omakeiCentralize AdonisJS event listener registrations in start/events.ts.
litestar-orgIntegrate Litestar backend with Inertia.js frontend SPA using Vite.
MikisbellGenerate layered and domain-driven backend architecture patterns with code samples.
berkcangumusisikGenerate typed props, tests, and stories for React, Vue, or Svelte components.
