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
Install
inertia-rails/skills/inertia-rails-pages
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/inertia-rails-pages ~/.claude/skills/inertia-rails-pagesnpx skillfed install inertia-rails/skills/inertia-rails-pagesFrequently 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)
Read as markdown · JSON record · Browse the source repository
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