Handle media-heavy Hotwire features: image/video/audio uploads, previews, playback controls, progress tracking, and third-party media integrations (for example WaveSurfer, Swiper, Picture-in-Picture, Blurhash). Prefer this skill when the core problem is media rendering, playback state, or media library integration. Use hwc-realtime-streaming for server-pushed Turbo Stream updates, hwc-navigation-content for non-media pagination/tab/lazy-navigation flows, hwc-forms-validation for form validation and inline-edit behavior, hwc-ux-feedback for generic loading/transition patterns, and hwc-stimulus-fundamentals for Stimulus primitives not specific to media.
Implement media-centric Hotwire features with Stimulus and Turbo Frames.
URL.createObjectURL, Picture-in-Picture, IntersectionObserver, MediaSession).disconnect() (observers, blob URLs, player instances, timers).Open only the file needed for the current request.
references/2024-09-17-stimulus-image-upload-previews.mdreferences/2024-04-23-stimulus-progressive-image-loading-blurhash.mdreferences/2024-06-04-stimulus-picture-in-picture.mdreferences/2024-10-29-stimulus-video-progress-tracker.mdreferences/2024-07-02-stimulus-wavesurfer-add-markers.mdreferences/2024-07-30-stimulus-wavesurfer-remove-markers.mdreferences/2024-04-09-turbo-frames-scrolling-lyrics.mdreferences/2025-01-14-turbo-frames-swiper-autoplay.mdUse references/INDEX.md for the full catalog.
hwc-realtime-streaminghwc-navigation-contenthwc-forms-validationhwc-ux-feedbackhwc-stimulus-fundamentals