mcpField
H
hwc-navigation-content

hwc-navigation-content

github.com/thehotwireclubDevelopment152220 installsUpdated 3w ago
Repository

About hwc-navigation-content

hwc-navigation-content is a skill for implementing navigation and content discovery with Turbo Drive and Turbo Frames. It guides decisions about URL history, frame lifecycle, caching, and validation across navigation paths.

Key features

  1. 01Navigation mode selection
  2. 02URL and history state design
  3. 03Frame and visit lifecycle handling
  4. 04Turbo cache cleanup
  5. 05Navigation path validation

Use cases

  1. 01Building tabbed frame navigation
  2. 02Managing pagination and browser history
  3. 03Implementing lazy-loaded frames
  4. 04Creating faceted search

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-navigation-content

After installing, type/hwc-navigation-contentin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
2023-05-09-turbo-drive-custom-rendering.md
2023-05-23-turbo-drive-cache-lifecycle.md
2023-06-20-turbo-frames-tabbed-navigation.md
2023-07-04-turbo-frames-pagination.md
2023-09-12-turbo-frames-scroll-position-restoration.md
2023-09-26-turbo-frames-lazy-loading-lifecycle.md
2024-02-13-turbo-drive-conditional-instant-click.md
2024-10-08-turbo-frames-markdown-preview.md
2024-12-10-stimulus-turbo-frames-faceted-search.md
INDEX.md

Details

From the project README

Navigation & Content Display

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

Core Workflow

  1. Classify navigation mode: tabs, pagination, lazy frame loading, faceted search, or custom render/cache lifecycle.
  2. Decide URL and history ownership first (data-turbo-action, frame src, query params, back/forward behavior).
  3. Use frame lifecycle and visit events to update active state, request params, and scroll restoration.
  4. Clean transient UI state before Turbo cache snapshots.
  5. 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

Comments

Markdown supported