skills.rest
tylerdurrett
tylerdurrettCOMMUNITY
Explore all skills by this author →
GitHub

new-video

Scaffold new Remotion video compositions in packages/video and register them in Root.tsx.

Updated Aug 27, 2026
Search Tags:#scaffolding#video#composition#animation#remotion#studio
One-click install
npx skills add https://github.com/tylerdurrett/oneshot-dashboard --skill new-video
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-video
Source: https://github.com/tylerdurrett/oneshot-dashboard/tree/main/.claude/skills/new-video
Command: npx skills add https://github.com/tylerdurrett/oneshot-dashboard --skill new-video

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide users through creating new Remotion video compositions in the @repo/video package. Use when users want to create a new video, animation, or composition, or when they invoke /new-video. Handles scaffolding, explains Remotion concepts, and helps with composition editing.

Core Features & Use Cases

  • Create a new Remotion composition in packages/video/src/compositions/<Name>.tsx with a starter template, register it in Root.tsx, and add it to barrel exports.
  • Explain Remotion core concepts like useCurrentFrame() and fps, enabling frame-by-frame animation in compositions.
  • Scaffold and customize: modify the starter template to realize the user's vision, including integrating key APIs and Tailwind styling.
  • Preview in Studio: run pnpm studio to view the new composition and iterate with hot-reloads.
  • Embedding guidance: pattern to embed the video in a Next.js web app.

Quick Start

Run pnpm new-video <CompositionName> to scaffold the new composition.

Frequently Asked Questions about new-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new Remotion video composition in a monorepo?▼

Scaffolding a new Remotion video composition involves running a script that generates a starter template in the video package, updates Root.tsx, and configures barrel exports.

What is the best way to preview Remotion compositions during development?▼

Previewing Remotion compositions during development is best achieved by running the studio command, which provides a ready-to-preview setup with hot-reloads for iterating on animations.

How does useCurrentFrame work for Remotion animations?▼

The useCurrentFrame hook works by returning the current frame number, allowing you to drive frame-by-frame animations and synchronize visual updates based on the composition's fps.

Can I embed Remotion video compositions into a Next.js web app?▼

Yes, you can embed Remotion video compositions into a Next.js web app by following specific embedding patterns provided to integrate the video output and ensure proper rendering.

Do I need Tailwind to customize a Remotion starter template?▼

You do not strictly need Tailwind, but the scaffolding process supports integrating Tailwind styling to modify the starter template and realize your animation vision.

Related Skills

Explore More Software Engineering Skills→
pohlai88pohlai88

pnpm-workspace

Define pnpm-workspace.yaml and link local packages with the workspace protocol.

Community
Intermediate
BintzGavinBintzGavin
94

workflow-preview-composition

Preview and iterate Helios video compositions in the browser via the Studio.

Community
Basic
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
stromy-orgstromy-org

remotion-video

Scaffold branded Remotion projects with charter-based theming and starter templates.

Official
Advanced