本文へ移動
cccskills
無料GitHub で公開

remotion-best-practices

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.

canvascoding/canvas-notebook
インストール方法を見る

含まれるファイル（2）

  • SKILL.md3.2 KB
  • agents/canvas.yaml241 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

  1. Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.
  2. Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.
  3. Implement motion with frame-driven values and deterministic interpolation.
  4. Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.
  5. 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

algorithmic-art

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

brand-guidelines

無料

Applies Canvas brand colors, typography, and visual polish to artifacts that benefit from a consistent product look-and-feel. Use it when brand colors, style guidelines, visual formatting, or company design standards apply.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

canvas-design

無料

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

create-plugin

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

doc-coauthoring

無料

Use this Canvas-owned clean-room skill to guide collaborative writing for documentation, proposals, technical specs, decision records, PRDs, RFCs, operating guides, and structured memos. Trigger when the user wants help drafting, organizing, refining, reviewing, or testing a document before sharing it.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

docx

無料

Use this Canvas-owned clean-room skill for creating, reading, editing, reviewing, redlining, commenting, or repairing Word `.docx` documents. Trigger for Word documents, DOCX files, memos, reports, letters, templates, tracked changes, comments, table of contents, headers, footers, page numbers, and Google Docs-targeted documents that should be authored as DOCX first.

日本語の概要は準備中です。原文の説明を表示しています。

canvascoding/canvas-notebook112026年10月11日 更新

canvascoding のスキルをすべて見る

このスキルの問題を報告する