thehotwireclub/hwc-navigation-content
skills/hwc-navigation-content/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add thehotwireclub/hotwire_club-skills hwc-navigation-contentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 11:10 AM41.3s12 files scanned
SKILL.md
- name:
- hwc-navigation-content
- description:
- >-
- 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.
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, framesrc, 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
Related Skills
thehotwireclub/hwc-ux-feedback
development
VerifiedTrustedCommunity
Implement cross-cutting Hotwire UX feedback patterns: loading states, busy indicators, progress bars, optimistic UI, render interception, and view/page transitions. Prefer this skill when the core goal is perceived performance and user feedback, independent of a single feature domain. Use hwc-forms-validation for form correctness and validation behavior, hwc-navigation-content for navigation/history/cache mechanics, hwc-realtime-streaming for push/stream orchestration, hwc-media-content for media-specific behavior, and hwc-stimulus-fundamentals for base Stimulus API questions.
118SKILL.mdUpdated Apr 16, 2026
thehotwireclub/hwc-realtime-streaming
development
VerifiedTrustedCommunity
Implement real-time Hotwire behavior: Turbo Streams over WebSocket/SSE, custom stream actions, inline stream tags, live list updates, and cross-tab state synchronization. Prefer this skill when the core problem is push-based updates or stream action orchestration. Use hwc-navigation-content for pull-based pagination/tab/lazy-navigation flows, hwc-forms-validation for form lifecycle and validation, hwc-media-content for media upload/playback behavior, hwc-ux-feedback for generic loading/progress/transitions, and hwc-stimulus-fundamentals for non-stream Stimulus fundamentals.
118SKILL.mdUpdated Apr 16, 2026
thehotwireclub/hwc-forms-validation
development
VerifiedTrustedCommunity
Handle Hotwire form workflows: form submission lifecycle, inline editing, validation errors, typeahead/autocomplete, modal forms, and external form controls. Prefer this skill when the core problem is correctness and UX of form interaction. Use hwc-navigation-content for pagination/tabs/filter navigation, hwc-realtime-streaming for WebSocket/Turbo Stream broadcasting, hwc-media-content for image/video/audio behavior, hwc-ux-feedback for generic loading/transition polish, and hwc-stimulus-fundamentals for framework-level Stimulus APIs not tied to forms.
118SKILL.mdUpdated Apr 16, 2026
thehotwireclub/hwc-stimulus-fundamentals
development
VerifiedTrustedCommunity
Cover Stimulus controller fundamentals: lifecycle hooks, values and valueChanged callbacks, targets and target callbacks, outlets, action parameters, keyboard events, and controller architecture patterns. Prefer this skill when the request is primarily about Stimulus APIs and controller design independent of a specific Hotwire domain. Use hwc-forms-validation for form-specific workflows, hwc-navigation-content for Turbo navigation concerns, hwc-realtime-streaming for Turbo Streams/WebSocket patterns, hwc-media-content for media integrations, and hwc-ux-feedback for loading/progress/transition UX patterns.
116SKILL.mdUpdated Apr 16, 2026