From Office
Creates programmatic videos in React using Remotion, covering project scaffolding, React markup and animations, rendering, captions, Studio interactivity, SaaS deployment, and media metadata.
How this skill is triggered — by the user, by Claude, or both
Slash command
/office:remotionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill is a router for all Remotion video-creation operations. It mirrors the upstream `remotion-dev/skills` repository. Based on user intent, read the corresponding sub-skill `SKILL.md` before executing.
mediabunny/get-audio-duration.mdmediabunny/get-video-dimensions.mdmediabunny/get-video-duration.mdremotion-captions/display-captions.mdremotion-captions/import-srt-captions.mdremotion-captions/transcribe-captions.mdremotion-create/tailwind.mdremotion-create/video-layout.mdremotion-markup/3d.mdremotion-markup/audio-visualization.mdremotion-markup/audio.mdremotion-markup/calculate-metadata.mdremotion-markup/compositions.mdremotion-markup/effects.mdremotion-markup/embedding-videos.mdremotion-markup/ffmpeg.mdremotion-markup/gifs.mdremotion-markup/google-fonts.mdremotion-markup/html-in-canvas.mdremotion-markup/images.mdThis skill is a router for all Remotion video-creation operations. It mirrors the upstream remotion-dev/skills repository. Based on user intent, read the corresponding sub-skill SKILL.md before executing.
Sub-skills are authoritative. The files under each sub-skill directory are upstream content kept verbatim — do not edit them; re-sync from upstream instead. The table below is the index, the sub-skill SKILL.md is the instruction.
| Sub-skill | Directory | Use When |
|---|---|---|
| New Project | remotion-create/ | Scaffold a new Remotion project (npx create-video), design a video, start the Studio preview |
| React Markup | remotion-markup/ | Writing Remotion React markup — the core: animations, media, sequences, timing, fonts, effects, maps, Lottie, DOM measurement, transitions, trimming |
| Rendering | remotion-render/ | Rendering videos and stills (npx remotion render/still), transparent videos |
| Captions | remotion-captions/ | Transcribing, importing SRT, and displaying captions/subtitles |
| Interactivity | remotion-interactivity/ | Making animations editable in Remotion Studio Visual Mode |
| SaaS / Apps | remotion-saas/ | Building video apps — <Player>, rendering on Lambda/Vercel/Cloudflare/Node, client-side rendering, choosing a framework |
| Mediabunny | mediabunny/ | Multimedia handling in the browser — get audio/video duration, get video dimensions |
SKILL.md, then follow any references/-style .md files it points to (each sub-skill folder carries its own detail files).../remotion-markup/SKILL.md — these resolve within this remotion/ directory.Some upstream sub-skill files contain links like [Remotion Best Practices](../remotion-best-practices/SKILL.md). There is no remotion-best-practices/ directory here — that role is filled by this top-level SKILL.md. Treat such links as "go back to the Remotion router" (i.e. this file). All other sibling cross-references (../remotion-markup/SKILL.md, ../remotion-captions/SKILL.md, etc.) resolve correctly.
npx claudepluginhub fradser/dotclaude --plugin officeCreates production-grade videos with Remotion (React), including animations, audio sync, subtitles, charts, and 3D. Includes project scaffolding and render scripts.
Builds programmatic videos with Remotion+React: animations, timing, transitions, text effects, captions, 3D, charts, and serverless rendering. Use when creating video generation pipelines.
Provides Remotion best practices for video creation in React: animation patterns (useCurrentFrame, interpolate, Easing), proper use of Sequence, staticFile, and media components (Img, Video, Audio). Warns against CSS transitions, Tailwind animations.