mcpField
H
hwc-media-content

hwc-media-content

github.com/thehotwireclubDevelopment152212 installsUpdated 3w ago
Repository

About hwc-media-content

A development skill for building media features in Hotwire with Stimulus and Turbo Frames. It focuses on media state, browser-native APIs, and resource cleanup, with implementation references that can be loaded as needed.

Key features

  1. 01Plan media modes and implementation
  2. 02Manage media state with Stimulus
  3. 03Prefer browser-native APIs
  4. 04Clean up resources on disconnect
  5. 05Load focused implementation references

Use cases

  1. 01Build image or file upload previews
  2. 02Save and restore video progress
  3. 03Implement picture-in-picture and playback controls
  4. 04Create synchronized lyrics or carousel interfaces

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
2024-04-09-turbo-frames-scrolling-lyrics.md
2024-04-23-stimulus-progressive-image-loading-blurhash.md
2024-06-04-stimulus-picture-in-picture.md
2024-07-02-stimulus-wavesurfer-add-markers.md
2024-07-30-stimulus-wavesurfer-remove-markers.md
2024-09-17-stimulus-image-upload-previews.md
2024-10-29-stimulus-video-progress-tracker.md
2025-01-14-turbo-frames-swiper-autoplay.md
INDEX.md

Details

From the project README

Media & Rich Content

Implement media-centric Hotwire features with Stimulus and Turbo Frames.

Core Workflow

  1. Identify media mode: upload/preview, playback controls, progress persistence, or embedded library integration.
  2. Keep media state in Stimulus values; bridge third-party APIs through value callbacks and targets.
  3. Use browser-native APIs first (URL.createObjectURL, Picture-in-Picture, IntersectionObserver, MediaSession).
  4. Clean up all allocated resources in disconnect() (observers, blob URLs, player instances, timers).
  5. Persist only intentional client state (for example playback progress) and reconcile on load.

Guardrails

  • Revoke blob URLs after image/file preview rendering.
  • Prefer feature detection for browser APIs (PiP/Web Share/MediaSession).
  • Avoid mixing transport concerns; media rendering belongs here, stream orchestration belongs in real-time skill.
  • Keep frame updates incremental for time-based UI (lyrics, carousels, progress widgets).

Load References Selectively

Open only the file needed for the current request.

  • Upload previews via blob URLs: references/2024-09-17-stimulus-image-upload-previews.md
  • Progressive image loading and Blurhash: references/2024-04-23-stimulus-progressive-image-loading-blurhash.md
  • Picture-in-Picture behavior: references/2024-06-04-stimulus-picture-in-picture.md
  • Video progress persistence: references/2024-10-29-stimulus-video-progress-tracker.md
  • WaveSurfer marker add flows: references/2024-07-02-stimulus-wavesurfer-add-markers.md
  • WaveSurfer marker remove flows: references/2024-07-30-stimulus-wavesurfer-remove-markers.md
  • Time-synced lyrics frame updates: references/2024-04-09-turbo-frames-scrolling-lyrics.md
  • Swiper autoplay with Turbo Frames: references/2025-01-14-turbo-frames-swiper-autoplay.md

Use references/INDEX.md for the full catalog.

Escalate to Neighbor Skills

  • Push-based data updates or custom Turbo Stream actions: use hwc-realtime-streaming
  • Pagination/tab/filter navigation concerns: use hwc-navigation-content
  • Form lifecycle and validation handling: use hwc-forms-validation
  • Generic loading/progress/transition UX: use hwc-ux-feedback
  • Pure Stimulus API architecture: use hwc-stimulus-fundamentals

Comments

Markdown supported