hwc-navigation-content

Original：🇺🇸 English

Translated

Build Hotwire navigation and content-discovery flows: Turbo Frame pagination, tabbed navigation, lazy loading, faceted filtering/search, cache lifecycle, scroll restoration, and visit/render control. Prefer this skill when the core problem is request/response navigation state and browser history behavior. Use hwc-forms-validation for form validation and inline edit flows, hwc-realtime-streaming for WebSocket/Turbo Stream push updates, hwc-media-content for image/video/audio features, hwc-ux-feedback for generic loading/progress/transition polish, and hwc-stimulus-fundamentals for Stimulus APIs not centered on navigation.

2installs

Sourcethehotwireclub/hotwire_club-skills

Added on2026-02-14

NPX Install

npx skill4agent add thehotwireclub/hotwire_club-skills hwc-navigation-content

SKILL.md Content

View Translation Comparison →

Navigation & Content Display

Implement navigation and content-discovery behavior with Turbo Drive and Turbo Frames.

Core Workflow

Classify navigation mode: tabs, pagination, lazy frame loading, faceted search, or custom render/cache lifecycle.
Decide URL and history ownership first (
```
data-turbo-action
```
, frame
```
src
```
, query params, back/forward behavior).
Use frame lifecycle and visit events to update active state, request params, and scroll restoration.
Clean transient UI state before Turbo cache snapshots.
Validate behavior across forward/back navigation and refresh paths.

Guardrails

Update active/tab state on load/render events, not click intent events.
Keep URL state canonical for filters and pagination.
Avoid leaving transient UI artifacts in cache snapshots.
Use lazy loading deliberately; verify loading boundaries and observer behavior.

Load References Selectively

Open only the file needed for the current request.

Tabbed frame navigation:

references/2023-06-20-turbo-frames-tabbed-navigation.md

Pagination + history management:

references/2023-07-04-turbo-frames-pagination.md

Lazy frame lifecycle:

references/2023-09-26-turbo-frames-lazy-loading-lifecycle.md

Scroll restoration:

references/2023-09-12-turbo-frames-scroll-position-restoration.md

Cache lifecycle cleanup:

references/2023-05-23-turbo-drive-cache-lifecycle.md

Custom render interception:

references/2023-05-09-turbo-drive-custom-rendering.md

Conditional instant click strategy:

references/2024-02-13-turbo-drive-conditional-instant-click.md

Faceted search with Stimulus:

references/2024-12-10-stimulus-turbo-frames-faceted-search.md

Markdown preview flow:

references/2024-10-08-turbo-frames-markdown-preview.md

Use

references/INDEX.md

for the full catalog.

Escalate to Neighbor Skills

Form submission and validation behavior: use
```
hwc-forms-validation
```
Push-based real-time updates: use
```
hwc-realtime-streaming
```
Media-specific interaction design: use
```
hwc-media-content
```
Generic feedback/transitions and perceived-performance polish: use
```
hwc-ux-feedback
```
Non-navigation Stimulus API fundamentals: use
```
hwc-stimulus-fundamentals
```