Where this fits

You're building Inertia.js v3 with React, and your agent keeps requesting router.visit when you meant to use router.get—or it writes forms with useState instead of the built-in useForm. The gap: v3 introduced streaming props, optimistic updates, and immediate navigation, but standard React training doesn't cover them. This skill fills that gap by giving agents the exact Inertia v3 React patterns, so they generate pages, forms, and client-side navigation that match your app's architecture without guesswork.

Why agents benefit

• Uses the right primitives: The skill ensures agents reach for ,
  , and useForm instead of hand-rolled event handlers or raw window.history.
• Handles v3-specific features: Agents correctly apply deferred props, WhenVisible, InfiniteScroll, polling, and optimistic updates—features that break if implemented with generic React knowledge.
• Respects Inertia's data shape: Agents produce pages that use setLayoutProps, flash data, and once props as intended, avoiding misconfigured responses from the server.
• Reduces debugging loops: By activating on context clues (e.g., “React form”, “prefetch this link”), the agent pre-loads the right rules, cutting down trial-and-error iterations.
• Forces proper file placement: The skill guides agents to put page components in resources/js/pages, keeping your project structure clean from the start.

Practical scenarios

Instead of suggesting a generic React form with manual loading states, the agent uses useForm with transform, onSuccess, and the preserveScroll option, then applies optimistic UI via useOptimistic or Inertia's built-in behavior—saving multiple back-and-forth corrections.

The agent identifies that onMouseEnter should trigger router.prefetch or on relevant routes, and it updates active states using usePage's url() helper—not by re-fetching on every click.

When a page loads heavy data, the agent sets up deferredProps in the controller and uses on the client to show placeholders, then gradually fills in content—following v3's pattern instead of a single blocking fetch.

Add it to your agent workflow

Install the skill with a single command:

npx skills add promovaweb/specsfy --skill inertia-react-development

Once installed, your agent will automatically activate it when you mention Inertia or React pages, forms, or navigation. You can verify it's loaded by asking your agent to “Create a React page with a deferred prop” and seeing it reach for usePage and without prompts.

Compare before adopting

Before committing, compare this skill against generic React or Laravel skills. Check that it references Inertia v3 by name, includes v3-specific methods (like useHttp and instant visits), and has recent commit activity. Also review the GitHub repo (promovaweb/specsfy) for examples and maintenance cadence. If your team uses an internal skill catalog, weigh how well this one matches your exact Inertia version and React setup.

Why it is worth tracking

This skill comes from a repository with 60 stars and an MIT license—modest but growing. The author is tied to Laravel's ecosystem, which increases trust. As Inertia v3 adoption spreads, having an agent that understands deferred props, prefetching, and optimistic updates becomes a real productivity win. Track it on OpenAgentSkill to see community feedback and future refinements. Re-evaluate when Inertia v4 drops or if your team starts mixing client-side frameworks—then a dedicated skill may need a refresh.