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

studio-perf

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable render boundaries. Use when code reads the current frame with `useTimelinePosition()` or components unnecessarily render on every frame.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.4 KB
  • agents/openai.yaml214 B

SKILL.md(原文)

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

Studio Performance

Minimize frame subscriptions

Keep dependencies on the current frame as low in the component tree as possible. Prefer imperative timeline state reads such as getCurrentFrame() over Internals.Timeline.useTimelinePosition() for event handlers and other on-demand logic.

Use useTimelinePosition() only in the smallest leaf component whose rendered output must change with the frame. If a parent reads the frame only to pass it to a child, extract a frame-subscribing child so the parent and its other descendants stay stable.

Memoize stable boundaries

Wrap components in React.memo() when they can safely skip parent-driven renders. Confirm that their props remain referentially stable across frame updates: newly created objects, callbacks, styles, or React nodes defeat shallow memoization. Stabilize those props only where it is natural; avoid custom comparators that ignore behaviorally relevant changes.

Context subscribers continue to update through memoized ancestors. Prefer a memoized stable parent with a small frame-subscribing leaf over making the whole subtree reactive to the current frame.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

add-bug

無料

Add a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the bugs API.

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

remotion-dev/remotion6.3万2026年10月11日 更新

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.

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

remotion-dev/remotion6.3万2026年10月11日 更新

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.

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

remotion-dev/remotion6.3万2026年10月11日 更新

Add a new expert to the Remotion experts page

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

remotion-dev/remotion6.3万2026年10月11日 更新

Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, and release checklist updates. Use when creating a new @remotion package.

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

remotion-dev/remotion6.3万2026年10月11日 更新

add-sfx

無料

Add a new sound effect to @remotion/sfx

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

remotion-dev/remotion6.3万2026年10月11日 更新

remotion-dev のスキルをすべて見る

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