Video Producer

This handles the video player work you'd rather not build from scratch. You get a custom player with all the standard controls (play, pause, seek, volume, fullscreen), HLS streaming setup with hls.js for adaptive bitrate, and picture-in-picture mode. The main VideoPlayer component is fully featured with progress bars, time formatting, and smart control visibility on hover. It also covers subtitle tracks and includes error recovery for HLS streams. Good for when you need video playback that goes beyond a basic HTML5 video tag but don't want to pull in a heavy third-party player library.

skills.sh installs: 454
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill video-producer --agent claude-code

Installs into .claude/skills of the current project.

Files

Video Producer Skill

I help you build video players, handle video streaming, and create engaging video experiences.

What I Do

Video Playback:

Custom video players with controls
Adaptive bitrate streaming (HLS, DASH)
Picture-in-picture mode
Fullscreen support

Video Features:

Subtitles and captions
Quality selection
Playback speed control
Thumbnail previews

Streaming:

Live video streaming
Video on demand (VOD)
Progressive download
Adaptive streaming

Custom Video Player

// components/VideoPlayer.tsx
'use client'
import { useRef, useState, useEffect } from 'react'

interface VideoPlayerProps {
  src: string
  poster?: string
  title?: string
}

export function VideoPlayer({ src, poster, title }: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [playing, setPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [volume, setVolume] = useState(1)
  const [fullscreen, setFullscreen] = useState(false)
  const [showControls, setShowControls] = useState(true)

SKILL.md on GitHub