Stats
Actions
Tags
From hotwire-club-skills
Implements media-centric Hotwire features: upload previews, playback controls, progress tracking, and third-party integrations like WaveSurfer, Swiper, Picture-in-Picture, Blurhash.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hotwire-club-skills:hwc-media-contentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Implement media-centric Hotwire features with Stimulus and Turbo Frames.
agents/openai.yamlreferences/2024-04-09-turbo-frames-scrolling-lyrics.mdreferences/2024-04-23-stimulus-progressive-image-loading-blurhash.mdreferences/2024-06-04-stimulus-picture-in-picture.mdreferences/2024-07-02-stimulus-wavesurfer-add-markers.mdreferences/2024-07-30-stimulus-wavesurfer-remove-markers.mdreferences/2024-09-17-stimulus-image-upload-previews.mdreferences/2024-10-29-stimulus-video-progress-tracker.mdreferences/2025-01-14-turbo-frames-swiper-autoplay.mdreferences/INDEX.mdImplement 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-fundamentalsnpx claudepluginhub thehotwireclub/hotwire_club-skills --plugin hotwire-club-skillsImplements Hotwire UX feedback patterns: loading states, busy indicators, progress bars, optimistic UI with reconciliation, render interception, and page transitions. Use when perceived performance is the primary goal.
Guides building reactive Rails apps with Hotwire (Turbo Drive/Frames/Streams, Stimulus): installation, ActionCable/Redis setup, core patterns.
Implements Hotwire Turbo (Drive, Frames, Streams, Morph) and Stimulus controllers in Rails views for SPA-like interactivity, real-time updates, and progressive enhancement.