remotion-best-practices

스타10

포크2

업데이트2026년 6월 16일 11:28

Use this Canvas-owned clean-room skill when working with Remotion or React-based video generation. Trigger for Remotion projects, compositions, sequences, frame-based animation, rendering, captions, audio, video assets, templates, and debugging programmatic video output.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

canvascoding

canvascoding/canvas-notebook

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Remotion Best Practices

This skill guides Remotion work in Canvas Notebook. It is a clean-room Canvas skill; do not copy vendor skill material, hidden prompts, or proprietary rule packs into this folder.

Core Contract

Use Remotion's frame-based model for animation. Avoid CSS animations and transitions for timeline-critical motion because renders must be deterministic by frame.
Keep compositions editable React components. Avoid baking the whole video into a single prerendered asset unless the user asks for that.
Put local media in the project's public asset path and reference it through Remotion-compatible asset helpers.
Make dimensions, FPS, duration, and default props explicit in composition registration.
Verify representative frames or short renders before delivering meaningful video changes.

Workflow

Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.
Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.
Implement motion with frame-driven values and deterministic interpolation.
Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.
Render a still frame or short segment that covers the changed area. Inspect for blank frames, clipping, wrong asset paths, bad timing, text overflow, and audio/caption sync issues.

Implementation Rules

Use useCurrentFrame and video config values for time-based calculations.
Use sequences for staged entrances, exits, and scene timing.
Clamp interpolations where values should stop changing.
Avoid viewport-dependent typography that can shift between preview and render.
Prefer reusable components for repeated lower thirds, captions, cards, charts, and scene shells.
Keep text within safe margins and test the longest expected copy.
Use official Remotion documentation for version-specific APIs when uncertain.

Media And Captions

Confirm asset paths and dimensions before wiring media into a composition.
For captions, parse source timing data once, normalize it, and render from a structured caption model.
For audio, verify duration and align visual beats to frame boundaries.
For transparent or alpha workflows, confirm the target codec/container supports the requested output.

Final Checks

Composition renders at the intended size, FPS, and duration.
Representative frames are not blank and have correct framing.
Text is readable and does not overflow.
Assets load without broken paths.
Audio, captions, and transitions line up with the timeline.
Any skipped render verification is clearly reported.

이 저장소의 다른 Skills

같은 저장소

create-plugin

canvascoding/canvas-notebook

Create, update, validate, and package Canvas Plugins. Use when users want to build a Canvas plugin, bundle multiple skills into a plugin, define plugin metadata, add icons or logos, declare recommended Composio, Canvas Email, or MCP connectors, prepare a marketplace entry, or submit a plugin to the Canvas Plugin Store.

2026-07-1010

greploop

canvascoding/canvas-notebook

Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until it reaches the repository's configured Greptile merge threshold with zero unresolved actionable comments, or until the five-review maximum is reached. Triggers Greptile review, fixes all actionable comments, pushes/re-shelves, re-triggers review only for new head SHAs unless a 5/5 score is already published, and repeats. Use when the user wants to optimize a PR/MR/CL against Greptile's code review standards without creating runaway review loops.

2026-06-2910

release-publisher

canvascoding/canvas-notebook

Publish a new Canvas Notebook release. Use this skill whenever the user asks to bump a version, prepare release notes, update CHANGELOG.md, create or push a git tag, publish a GitHub Release, deploy, or automate the release workflow. This skill covers the full release sequence for this repository: inspect commits/tags, push completed product-code commits first when authorized, confirm the pushed code has built on GitHub, choose the next calendar version, update package and CLI versions, update the changelog, run the required local build, commit, push the release commit, wait for the remote Build and Push worker on the pushed branch, tag, push the tag, and publish the release.

2026-06-2910

opensrc

canvascoding/canvas-notebook

Fetch dependency source code to give AI agents deeper implementation context. Use when the agent needs to understand how a library works internally, read source code for a package, fetch implementation details for a dependency, or explore how an npm/PyPI/crates.io package is built. Triggers include "fetch source for", "read the source of", "how does X work internally", "get the implementation of", "opensrc path", or any task requiring access to dependency source code beyond types and docs.

2026-06-2910

marp-slides

canvascoding/canvas-notebook

Create, edit, review, preview, and export polished Marp Markdown slide decks in Canvas Notebook. Use when the user wants Markdown-native presentations, `.marp.md` or `.slides.md` files, version-controlled decks, Marp PDF/image/PPTX/HTML export, speaker notes, dashboard-style slides, data cards, or better looking decks that should remain close to plain text.

2026-06-1910

algorithmic-art

canvascoding/canvas-notebook

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

2026-06-1610

name	remotion-best-practices
description	Use this Canvas-owned clean-room skill when working with Remotion or React-based video generation. Trigger for Remotion projects, compositions, sequences, frame-based animation, rendering, captions, audio, video assets, templates, and debugging programmatic video output.
compatibility	Requires a project with Remotion dependencies installed or a task that is explicitly planning a Remotion implementation.
license	Canvas Notebook Sustainable Use License

Remotion Best Practices

This skill guides Remotion work in Canvas Notebook. It is a clean-room Canvas skill; do not copy vendor skill material, hidden prompts, or proprietary rule packs into this folder.

Core Contract

Use Remotion's frame-based model for animation. Avoid CSS animations and transitions for timeline-critical motion because renders must be deterministic by frame.
Keep compositions editable React components. Avoid baking the whole video into a single prerendered asset unless the user asks for that.
Put local media in the project's public asset path and reference it through Remotion-compatible asset helpers.
Make dimensions, FPS, duration, and default props explicit in composition registration.
Verify representative frames or short renders before delivering meaningful video changes.

Workflow

Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.
Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.
Implement motion with frame-driven values and deterministic interpolation.
Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.
Render a still frame or short segment that covers the changed area. Inspect for blank frames, clipping, wrong asset paths, bad timing, text overflow, and audio/caption sync issues.

Implementation Rules

Use useCurrentFrame and video config values for time-based calculations.
Use sequences for staged entrances, exits, and scene timing.
Clamp interpolations where values should stop changing.
Avoid viewport-dependent typography that can shift between preview and render.
Prefer reusable components for repeated lower thirds, captions, cards, charts, and scene shells.
Keep text within safe margins and test the longest expected copy.
Use official Remotion documentation for version-specific APIs when uncertain.

Media And Captions

Confirm asset paths and dimensions before wiring media into a composition.
For captions, parse source timing data once, normalize it, and render from a structured caption model.
For audio, verify duration and align visual beats to frame boundaries.
For transparent or alpha workflows, confirm the target codec/container supports the requested output.

Final Checks

Composition renders at the intended size, FPS, and duration.
Representative frames are not blank and have correct framing.
Text is readable and does not overflow.
Assets load without broken paths.
Audio, captions, and transitions line up with the timeline.
Any skipped render verification is clearly reported.