inertia-react-development_skill

Overview

This skill develops Inertia.js v2 React client applications, focusing on pages, navigation, forms, and client-side patterns. It activates when you work with <Link>, <Form>, useForm, router visits, deferred props, prefetching, polling, or other Inertia React features. The guidance optimizes SPA behavior, performance patterns, and common pitfalls.

How this skill works

The skill inspects React page structure and recommends Inertia-specific primitives: <Link> for client navigation, <Form> or useForm for submissions, router.visit for programmatic navigation, and hooks like usePoll and useForm for polling and state. It also checks for v2 features such as deferred props, prefetch flags, WhenVisible infinite scroll, and form reset behaviors to suggest loading states and error handling.

When to use it

• Creating or updating React page components under resources/js/pages
• Implementing client-side navigation or replacing <a> with <Link>
• Building forms using <Form> or using the useForm hook for programmatic control
• Adding Inertia v2 features: deferred props, prefetching, polling, or WhenVisible infinite scroll
• Implementing programmatic visits with router.visit or method-based Link submissions

Best practices

• Always use <Link> for internal navigation to preserve SPA behavior and preserve scroll/state
• Show loading skeletons or placeholders when using deferred props; handle undefined data explicitly
• Prefer <Form> for simple forms and useForm for complex programmatic flows (reset, setData, error handling)
• Use prefetch on links for perceived performance and restrict heavy prefetching to key routes
• When polling, use usePoll with appropriate interval, consider autoStart and keepAlive for tab behavior
• Prevent default native form submission when not using Inertia <Form>; ensure version compatibility for component availability

Example use cases

• User index page with deferred users prop showing skeleton while data loads
• Create/edit user form built with <Form> to leverage processing, errors, and reset behaviors
• Programmatic navigation after an action using router.visit with onSuccess callbacks
• Prefetching key dashboard pages via <Link prefetch> to reduce perceived latency
• Dashboard auto-refresh using usePoll with manual start/stop and throttling when tab is inactive