How do I install the Thehotwireclub Hotwire Club Skills Hwc Media Content skill?

Run npx skillmds@latest add tomevault-io/thehotwireclub-hotwire-club-skills-hwc-media-content in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Which AI agents work with Thehotwireclub Hotwire Club Skills Hwc Media Content?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Who published Thehotwireclub Hotwire Club Skills Hwc Media Content?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Thehotwireclub Hotwire Club Skills Hwc Media Content by tomevault-io

Name: Thehotwireclub Hotwire Club Skills Hwc Media Content
Author: tomevault-io

File contents

Media & Rich Content

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

Core Workflow

Identify media mode: upload/preview, playback controls, progress persistence, or embedded library integration.
Keep media state in Stimulus values; bridge third-party APIs through value callbacks and targets.
Use browser-native APIs first (URL.createObjectURL, Picture-in-Picture, IntersectionObserver, MediaSession).
Clean up all allocated resources in disconnect() (observers, blob URLs, player instances, timers).
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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: thehotwireclub-hotwire-club-skills-hwc-media-contentdescription: Media & Rich Content---# Media & Rich ContentImplement media-centric Hotwire features with Stimulus and Turbo Frames.## Core Workflow1. 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 SelectivelyOpen 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`---> Converted and distributed by [TomeVault](https://tomevault.io/claim/thehotwireclub) — claim your Tome and manage your conversions.

Frequently asked questions

Thehotwireclub Hotwire Club Skills Hwc Media Content