SkillsAdd

thehotwireclub/hotwire_club-skills

hwc-media-content

>- 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 validat…

First seen Feb 13, 2026

Installation

$ npx skills add thehotwireclub/hotwire_club-skills --skill hwc-media-content
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

persona-content-creator Similar name
googleworkspace/cli

Create, organize, and distribute content across Workspace.

27.6K installs
content-creation Similar name
anthropics/knowledge-work-plugins

Draft marketing content across channels — blog posts, social media, email newsletters, landing …

4.5K installs
content-modeling-best-practices Similar name
sanity-io/agent-toolkit

Structured content modeling guidance for schema design, content architecture, content reuse, re…

4.1K installs
content-experimentation-best-practices Similar name
sanity-io/agent-toolkit

Content experimentation and A/B testing guidance covering experiment design, hypotheses, metric…

3.2K installs
apify-content-analytics Similar name
apify/agent-skills

Track engagement metrics, measure campaign ROI, and analyze content performance across Instagra…

2.6K installs
draft-content Similar name
anthropics/knowledge-work-plugins

Draft blog posts, social media, email newsletters, landing pages, press releases, and case stud…

2.5K installs

Also in this package

Other skills from thehotwireclub/hotwire_club-skills.

npx skills add thehotwireclub/hotwire_club-skills
hwc-stimulus-fundamentals 228 hwc-forms-validation 207 hwc-navigation-content 204 hwc-ux-feedback 203 hwc-realtime-streaming 194

Browse all from thehotwireclub/hotwire_club-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 127
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,983 B
  • docs SUMMARY.md 684 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 197 installs

SKILL.md

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