inertia-rails-pages
Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
inertia-rails-pages builds page components with persistent layouts, URL-driven state, and client-side navigation for Rails + Inertia.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-02-13
inertia-rails-pages builds page components with persistent layouts, URL-driven state, and client-side navigation for Rails + Inertia. Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
Use it when
- Inertia Rails Pages shows how to build persistent layouts by structuring your page components so the layout wrapper remains mounted.
- Inertia Rails Pages covers prefetching via the router's link component, which can preload page data before the user navigates.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/inertia-rails-pages
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are inertia rails page components?
Inertia Rails Pages provides patterns for building page components that maintain persistent layouts across navigation. The skill teaches you to construct pages where layout state persists, UI derives from URL parameters server-side, and the client-side router updates props without full page reloads. It covers React, Vue, and Svelte implementations.
How do you implement persistent layouts in inertia react?
Inertia Rails Pages shows how to build persistent layouts by structuring your page components so the layout wrapper remains mounted across navigation. You define the layout once and nest page content inside it, allowing shared state and UI elements to survive route transitions. This prevents remounting issues and preserves scroll position and component state.
How does inertia router navigation prefetch work?
Inertia Rails Pages covers prefetching via the router's link component, which can preload page data before the user navigates. You configure prefetch behavior to cache responses and reduce perceived load time. The skill explains when to use prefetching, how to manage cache, and techniques to avoid unnecessary requests during client-side navigation.
What is URL-driven state in inertia rails?
Inertia Rails Pages teaches URL-driven state by showing how to encode UI state—filters, dialog visibility, active tabs—into query parameters. The server reads these parameters and returns matching data, while the client router updates props without reloading. This pattern keeps the UI in sync with the URL, enabling bookmarkable states and back-button support.
How do you add lazy-loaded sections and infinite scroll?
Inertia Rails Pages covers deferred component rendering and infinite scroll pagination. Use the deferred prop to delay loading non-critical sections, and combine partial prop updates with pagination cursors to load more items on scroll. The skill shows how to use client-side router methods to fetch additional data and merge it into existing props without full page reloads.
How do you troubleshoot layout remounting and state loss?
Inertia Rails Pages addresses layout remounting by teaching you to preserve layout identity across navigation using layout keys and proper component structure. It covers preserveState and preserveScroll options to prevent state loss, managing flash messages correctly, and using partial prop updates to avoid unnecessary data refetches that trigger remounting.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Inertia Rails Pages
Page components, layouts, navigation, and client-side APIs.
Before building a page, ask:
- Does this page need a layout? → Use persistent layout (React: Page.layout = ...; Vue: defineOptions({ layout }); Svelte: module script export) — wrapping in JSX/template remounts on every navigation, losing scroll position, audio playback, and component state
- Does UI state come from the URL? → Change BOTH controller (read params, pass as prop) AND component (derive from prop, no useState/useEffect) — use router.get to update URL
- Need to refresh data without navigation? → router.reload({ only: [...] }) — never useEffect + fetch
- **Need to update a prop without
(truncated - see the full file via the links below)
File tree — 5 files
skills/inertia-rails-pages/SKILL.md
skills/inertia-rails-pages/references/layouts.md
skills/inertia-rails-pages/references/navigation.md
skills/inertia-rails-pages/references/svelte.md
skills/inertia-rails-pages/references/vue.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build page components with persistent layouts and URL-driven state”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master the server-driven mental model behind Inertia Rails: the server owns routing, data, and auth while React renders UI only. This skill routes you to the right pattern for pages, forms, navigation, and data refresh through a decision matrix covering data sources, state ownership, and common anti-patterns to avoid.
Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
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.
Adapt shadcn-svelte (bits-ui) components for Inertia.js + Rails + Svelte apps by replacing SvelteKit patterns with Inertia equivalents. Wire inputs to Inertia Form via name attributes, manage dialogs and tables with Inertia router, and configure flash-based toasts with Rails initializers.
More skills inertia-rails-testing (MIT) · inertia-rails-controllers (MIT) · Inertia Coder (NOASSERTION) · page-layout-builder (MIT) · alba-inertia (MIT)