lucianghinda/hwc-media-content
skills/hwc-media-content/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add lucianghinda/superpowers-ruby hwc-media-contentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 1:07 PM138.9s10 files scanned
SKILL.md
- name:
- hwc-media-content
- description:
- >-
- 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.
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
Related Skills
lucianghinda/skills/ruby-upgrade
tools
VerifiedTrustedCommunity
--- name: ruby-upgrade description: Use when upgrading the Ruby interpreter version of a Bundler/Rails app — especially "upgrade to Ruby 4", "bump Ruby to 4.0", "audit Ruby 4 compatibility", "what breaks on Ruby 4", or a specific target like "Ruby 4.0.5". Triggers on Ruby-major risk symptoms: CGI.parse/CGI::Cookie removal, Net::HTTP implicit Content-Type dropped, demoted default gems (ostruct/logger/benchmark/irb), SortedSet, Set#inspect changes, native-extension recompile crashes, openssl 4 pin
306SKILL.mdUpdated May 29, 2026
lucianghinda/consulting-an-oracle
development
VerifiedTrustedCommunity
Use when stuck after multiple debug attempts and want to escalate to a stronger one-shot model (GPT-5 Pro, Opus, Gemini Pro) — packages a self-contained "oracle prompt" with Ruby/Rails project briefing, verbatim error, what-was-tried, constraints, and just-enough attached files. Triggers include "ask the oracle", "write a letter to GPT-5", "I'm stuck, draft a prompt for another model", "/tmp/letter.md".
306SKILL.mdUpdated May 9, 2026
lucianghinda/writing-skills
testing
VerifiedTrustedCommunity
Use when creating new skills, editing existing skills, or verifying skills work before deployment
306SKILL.mdUpdated May 7, 2026
lucianghinda/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task, before touching code
306SKILL.mdUpdated Apr 25, 2026