{
  "$schema": "https://top-agent-skills.com/schemas/catalog.v1.json",
  "type": "primary-category",
  "slug": "video-media",
  "title": "Video & Media",
  "shortTitle": "Video & Media",
  "description": "Programmatic video (Remotion), canvas design, algorithmic art, animated GIFs.",
  "canonical": "https://top-agent-skills.com/top-skills-for-video-media",
  "alternates": {
    "html": "https://top-agent-skills.com/top-skills-for-video-media",
    "markdown": "https://top-agent-skills.com/top-skills-for-video-media.md",
    "json": "https://top-agent-skills.com/top-skills-for-video-media.json"
  },
  "rubricVersion": "1.0",
  "methodology": "https://top-agent-skills.com/about/methodology",
  "contentLastUpdated": "2026-08-26",
  "count": 12,
  "topPick": {
    "slug": "remotion-best-practices",
    "name": "remotion-best-practices",
    "score": 64,
    "tagline": "Programmatic video done right. Idiomatic Remotion patterns auto-activate when detected.",
    "url": "https://top-agent-skills.com/skill/remotion-best-practices"
  },
  "ranking": [
    {
      "rank": 1,
      "slug": "remotion-best-practices",
      "name": "remotion-best-practices",
      "score": 64,
      "tagline": "Programmatic video done right. Idiomatic Remotion patterns auto-activate when detected.",
      "bestFor": "Video demos, release announcements, explainer videos written in React.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Remotion",
      "license": "Proprietary",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/remotion-dev/skills --skill remotion-best-practices",
      "url": "https://top-agent-skills.com/skill/remotion-best-practices",
      "json": "https://top-agent-skills.com/skill/remotion-best-practices.json"
    },
    {
      "rank": 2,
      "slug": "hyperframes",
      "name": "hyperframes",
      "score": 64,
      "tagline": "Write HTML, render video. Agent-native, deterministic, no build step.",
      "bestFor": "Programmatic video an agent can iterate on — release clips, motion graphics, captioned explainers.",
      "notIdealFor": "Generative video from a text prompt; that is a model API, not a renderer.",
      "provenance": "verified-org",
      "publisher": "HeyGen",
      "license": "Apache-2.0",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add heygen-com/hyperframes --skill hyperframes",
      "url": "https://top-agent-skills.com/skill/hyperframes",
      "json": "https://top-agent-skills.com/skill/hyperframes.json"
    },
    {
      "rank": 3,
      "slug": "elevenlabs-text-to-speech",
      "name": "text-to-speech",
      "score": 56,
      "tagline": "Vendor-official voiceover generation across 70+ languages, from the company that defined the category. Ships with evals, which almost no skill does.",
      "bestFor": "Generating a voiceover or in-product speech where quality is the point — narration for video, accessibility audio, or a voice interface.",
      "notIdealFor": "Anything with no budget or no network. Every call is billable against an ElevenLabs key, so it is not a free local capability.",
      "provenance": "verified-org",
      "publisher": "ElevenLabs",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add elevenlabs/skills --skill text-to-speech",
      "url": "https://top-agent-skills.com/skill/elevenlabs-text-to-speech",
      "json": "https://top-agent-skills.com/skill/elevenlabs-text-to-speech.json"
    },
    {
      "rank": 4,
      "slug": "elevenlabs-speech-to-text",
      "name": "speech-to-text",
      "score": 56,
      "tagline": "Transcription and subtitle generation as a first-class skill — the media job agents are asked for most and could not previously do well.",
      "bestFor": "Turning recorded audio or video into text you can act on: subtitles, meeting notes, or a searchable transcript of a media archive.",
      "notIdealFor": "Confidential audio that cannot leave your infrastructure — it is a hosted API, so the audio is uploaded.",
      "provenance": "verified-org",
      "publisher": "ElevenLabs",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add elevenlabs/skills --skill speech-to-text",
      "url": "https://top-agent-skills.com/skill/elevenlabs-speech-to-text",
      "json": "https://top-agent-skills.com/skill/elevenlabs-speech-to-text.json"
    },
    {
      "rank": 5,
      "slug": "elevenlabs-dubbing",
      "name": "dubbing",
      "score": 56,
      "tagline": "Localise video while keeping the original speaker's voice — and correct the transcript before regenerating, rather than accepting the first pass.",
      "bestFor": "Localising existing video or podcast content into other languages, including the review loop where you fix the machine transcript before the final dub.",
      "notIdealFor": "Live or real-time translation. This is a batch pipeline over recorded media, and each regeneration costs API credit.",
      "provenance": "verified-org",
      "publisher": "ElevenLabs",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add elevenlabs/skills --skill dubbing",
      "url": "https://top-agent-skills.com/skill/elevenlabs-dubbing",
      "json": "https://top-agent-skills.com/skill/elevenlabs-dubbing.json"
    },
    {
      "rank": 6,
      "slug": "runway-api",
      "name": "use-runway-api",
      "score": 53,
      "tagline": "Generative video from the vendor developers name first, as a skill set rather than an SDK crawl.",
      "bestFor": "Producing generated video or image assets from prompts inside an agent workflow.",
      "notIdealFor": "Deterministic or template-driven render — a programmatic renderer is cheaper and repeatable. Requires paid API credits.",
      "provenance": "verified-org",
      "publisher": "RunwayML",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add runwayml/skills --skill use-runway-api",
      "url": "https://top-agent-skills.com/skill/runway-api",
      "json": "https://top-agent-skills.com/skill/runway-api.json"
    },
    {
      "rank": 7,
      "slug": "algorithmic-art",
      "name": "algorithmic-art",
      "score": 48,
      "tagline": "p5.js algorithmic art with particle systems and procedural geometry.",
      "bestFor": "Generative art, hero illustrations, procedural backgrounds.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill algorithmic-art",
      "url": "https://top-agent-skills.com/skill/algorithmic-art",
      "json": "https://top-agent-skills.com/skill/algorithmic-art.json"
    },
    {
      "rank": 8,
      "slug": "canvas-design",
      "name": "canvas-design",
      "score": 48,
      "tagline": "Visual art from prose. PNG and PDF outputs that look intentionally designed.",
      "bestFor": "Hero images, social posts, one-off marketing visuals.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill canvas-design",
      "url": "https://top-agent-skills.com/skill/canvas-design",
      "json": "https://top-agent-skills.com/skill/canvas-design.json"
    },
    {
      "rank": 9,
      "slug": "slack-gif-creator",
      "name": "slack-gif-creator",
      "score": 48,
      "tagline": "Animated GIFs sized and optimized for Slack reactions.",
      "bestFor": "Internal team comms, custom Slack reactions.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill slack-gif-creator",
      "url": "https://top-agent-skills.com/skill/slack-gif-creator",
      "json": "https://top-agent-skills.com/skill/slack-gif-creator.json"
    },
    {
      "rank": 10,
      "slug": "canva-skills",
      "name": "canva",
      "score": 46,
      "tagline": "Brand-checked design output at volume — the production half of design work.",
      "bestFor": "Generating many on-brand variants from data, or resizing one design across every social format.",
      "notIdealFor": "Original art direction, and anyone without a Canva account and Connector access.",
      "provenance": "verified-org",
      "publisher": "Canva",
      "license": "Apache-2.0",
      "compatibility": [
        "claude-code"
      ],
      "install": "/plugin marketplace add canva-sdks/canva-skills",
      "url": "https://top-agent-skills.com/skill/canva-skills",
      "json": "https://top-agent-skills.com/skill/canva-skills.json"
    },
    {
      "rank": 11,
      "slug": "frontend-slides",
      "name": "frontend-slides",
      "score": 43,
      "tagline": "HTML slide decks from prose. Easy to embed, version, and edit later.",
      "bestFor": "Conference talks, internal training, anything you want to embed in a webpage.",
      "notIdealFor": null,
      "provenance": "community",
      "publisher": "zarazhangrui",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor"
      ],
      "install": "npx skills add zarazhangrui/frontend-slides",
      "url": "https://top-agent-skills.com/skill/frontend-slides",
      "json": "https://top-agent-skills.com/skill/frontend-slides.json"
    },
    {
      "rank": 12,
      "slug": "web-asset-generator",
      "name": "web-asset-generator",
      "score": 41,
      "tagline": "Favicons, app icons, social cards — generated at all the right sizes.",
      "bestFor": "Pre-launch asset generation, social-card production at scale.",
      "notIdealFor": null,
      "provenance": "community",
      "publisher": "alonw0",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add alonw0/web-asset-generator",
      "url": "https://top-agent-skills.com/skill/web-asset-generator",
      "json": "https://top-agent-skills.com/skill/web-asset-generator.json"
    }
  ],
  "faqs": [
    {
      "question": "What is Remotion?",
      "answer": "Remotion is a React-based framework for programmatic video — you describe each frame as a component and Remotion renders the timeline to MP4. The top video Skills here author Remotion projects and run the render."
    },
    {
      "question": "Can these Skills run ffmpeg?",
      "answer": "On agents with shell access (Claude Code, Cursor terminal) — yes, after approval. Claude.ai web does not; the Skill generates the command for you."
    },
    {
      "question": "How do video Skills handle long renders?",
      "answer": "The render runs locally or on a cloud renderer the Skill configures. For multi-minute videos the Skill backgrounds the render and reports back when complete."
    },
    {
      "question": "Are there Skills for animated GIFs specifically?",
      "answer": "Yes — several handle the GIF-specific quirks (palette optimization, dithering, looping) that generic video Skills get wrong."
    },
    {
      "question": "Do these work with Canva or Figma?",
      "answer": "Several Skills pair with the Canva and Figma MCP servers to pull assets, apply brand templates, and round-trip designs."
    }
  ],
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "attribution": "Top Agent Skills (https://top-agent-skills.com)"
}