Implements Turbo Drive and Turbo Frames navigation: Drive cache lifecycle, tabbed navigation, pagination, infinite scroll, lazy loading, faceted search, Turbo 8 page refresh, render interception, view transitions, scroll restoration, partial page updates, and frame loading states. Use when building navigation, tabs, pagination, lazy-loaded content, SPA-like page transitions, infinite scroll, or rendering lifecycle. Cross-references: turbo-streams for real-time updates, hotwire-forms for form navigation, stimulus-controllers for client-side behavior, frontend-craft for triage.
npx claudepluginhub ether-moon/hotwire-frontend-skills --plugin hotwire-frontend-skillsThis skill is limited to using the following tools:
Implement navigation and rendering behavior with Turbo Drive and Turbo Frames. This skill covers request/response navigation, browser history, caching, rendering lifecycle, view transitions, and frame loading states.
examples/dashboard-lazy-widgets.mdexamples/markdown-live-preview.mdexamples/search-faceted-paginated.mdexamples/settings-tabbed.mdhandbook/INDEX.mdhandbook/turbo-attributes.mdhandbook/turbo-building.mdhandbook/turbo-drive-api.mdhandbook/turbo-drive.mdhandbook/turbo-events.mdhandbook/turbo-frames-api.mdhandbook/turbo-frames.mdreferences/INDEX.mdreferences/render-interception.mdreferences/scroll-position-restoration.mdreferences/turbo-drive-cache-lifecycle.mdreferences/turbo-frames-faceted-search.mdreferences/turbo-frames-lazy-loading.mdreferences/turbo-frames-pagination.mdreferences/turbo-frames-tabbed-navigation.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Share bugs, ideas, or general feedback.
Implement navigation and rendering behavior with Turbo Drive and Turbo Frames. This skill covers request/response navigation, browser history, caching, rendering lifecycle, view transitions, and frame loading states.
| Requirement | Pattern | Ref |
|---|---|---|
| Full page transitions with caching | Turbo Drive | references/turbo-drive-cache-lifecycle.md |
| Tabbed content sections | Turbo Frames tabs | references/turbo-frames-tabbed-navigation.md |
| Paginated lists | Turbo Frames pagination | references/turbo-frames-pagination.md |
| Deferred/below-fold content | Turbo Frames lazy loading | references/turbo-frames-lazy-loading.md |
| Filter/search interfaces | Turbo Frames faceted search | references/turbo-frames-faceted-search.md |
| Custom render/transition behavior | Render interception | references/render-interception.md |
| Scroll position after navigation | Scroll restoration | references/scroll-position-restoration.md |
| Dashboard with lazy-loaded widgets | Multiple | examples/dashboard-lazy-widgets.md |
| Search with faceted filters + pagination | Multiple | examples/search-faceted-paginated.md |
| Tabbed settings page | Multiple | examples/settings-tabbed.md |
| Live preview editor | Multiple | examples/markdown-live-preview.md |
Full catalog: references/INDEX.md. API details: handbook/INDEX.md.
Every navigation pattern must declare who owns the URL and history:
data-turbo-action promotes them.Rule of thumb: if the URL should change and the user expects a "new page," use Drive. If only a section updates, use Frames.
Decide data-turbo-action usage early:
"advance" when the frame change should create a history entry"replace" when the frame change should update the current entry<meta name="turbo-cache-control"> with no-cache or no-preview to control Turbo's snapshot cache per page.data-turbo-cache="false" on elements or pages that should never be cached.turbo:before-cache.turbo:before-render to gate transitions or animate between old and new snapshots.<meta name="view-transition" content="same-origin"> to the page <head> for cross-page animations.[aria-busy="true"] while loading — use CSS to show spinners or skeleton screens.src loads. See references/turbo-frames-lazy-loading.md.Every navigation pattern must be tested against:
Ensure URL state is canonical for filters and pagination. Verify that transient UI does not leak into cached snapshots.
Update active/tab state on load/render events, not click events. Click fires before navigation completes — the response may fail or redirect.
// GOOD: React to turbo:frame-load
document.addEventListener("turbo:frame-load", (event) => {
updateActiveTab(event.target)
})
// BAD: React to click
tab.addEventListener("click", () => { setActive(tab) })
Keep URL state canonical for filters and pagination. Reflect filter/page state in query parameters so bookmarks and back/forward work correctly.
Use turbo_frame_tag helper, not raw HTML. The helper generates correct attributes, handles dom_id, and avoids hand-typed string IDs.
Set explicit frame IDs using dom_id. Avoid hand-typed string IDs that can collide or become stale.
Use data-turbo-frame="_top" to break out of frames. Links that should navigate the full page must target _top.
Never nest frames that target each other. Frame targeting must be unidirectional.
Avoid leaving transient UI artifacts in cache snapshots. Clean up modals, tooltips, flash messages in turbo:before-cache.
Use lazy loading deliberately. Verify loading boundaries and IntersectionObserver behavior.
Gate animations for preview/cache restores. Do not re-animate content from cache.
Prefer conditional Instant Click over disabling it globally. Use data-turbo-prefetch="false" on specific links rather than turning off prefetch site-wide.
Handle frame load failures gracefully. Listen for turbo:frame-missing when a response lacks the expected frame ID. Provide fallback content or redirect.
// GOOD: Handle missing frame by visiting the response URL
document.addEventListener("turbo:frame-missing", (event) => {
event.preventDefault()
event.detail.visit(event.detail.response.url)
})
Out-of-scope requests: route back to frontend-craft for triage.