本文へ移動
cccskills
無料GitHub で公開日本語紹介

remotion-video-creation

Reactで動画を作る際に、Remotionの実装例と制作ルールを参照できるスキル。アニメーション、音声、字幕、グラフ、3D表現や場面転換を扱います。

原文原文の説明を見る

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more. Use when building video in React with Remotion — animations, audio, captions, charts, or transitions.

インストール方法を見る

こんなときに便利

  • 文字アニメーションや場面転換の制作
  • 動画に音声や字幕を加えたいとき
  • 動画内でグラフや3Dを見せたいとき
  • 素材の表示時間や再生の調整

日本語での紹介

できること

Reactで動画を制作する際に、Remotion向けの実装ルールとコード例を参照するスキルです。文字や図形のアニメーション、音声のトリミングや音量調整、字幕表示、グラフ、場面転換を扱います。Three.jsとReact Three Fiberによる3D表現、Lottieの組み込み、画像・動画・フォントの読み込みも対象です。素材の長さやサイズの取得、表示順序や再生時間の調整についても参照できます。

こんなときに便利

Remotionで動画を作り始めるときや、既存の動画コードに字幕・音声・演出を加えたいときに向いています。文字が枠からはみ出す問題や、素材とアニメーションのタイミングを調整する作業にも使えます。必要な分野のルールファイルを選んで読む構成です。

使い方の例

  • 「Remotionで文字が順番に現れるアニメーションを作って」
  • 「.srtの字幕を読み込み、発話中の単語を強調して」
  • 「グラフを表示する場面に音声と場面転換を加えて」

注意点

Remotionを使うReactの動画コードが対象です。3D、字幕、素材情報の取得などでは、用途に応じてThree.js、React Three Fiber、@remotion/captions、Mediabunnyなどを扱います。

この紹介文は、公開されている SKILL.md をもとに AI(Claude Haiku)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(32)

  • SKILL.md3.6 KB
  • rules/3d.md2.2 KB
  • rules/animations.md784 B
  • rules/assets.md1.6 KB
  • rules/assets/charts-bar-chart.tsx3.3 KB
  • rules/assets/text-animations-typewriter.tsx2.1 KB
  • rules/assets/text-animations-word-highlight.tsx2.3 KB
  • rules/audio.md3.7 KB
  • rules/calculate-metadata.md2.9 KB
  • rules/can-decode.md1.5 KB
  • rules/charts.md1.7 KB
  • rules/compositions.md3.4 KB
  • rules/display-captions.md3.6 KB
  • rules/extract-frames.md5.4 KB
  • rules/fonts.md3.4 KB
  • rules/get-audio-duration.md1.3 KB
  • rules/get-video-dimensions.md1.6 KB
  • rules/get-video-duration.md1.3 KB
  • rules/gifs.md3.8 KB
  • rules/images.md2.7 KB
  • rules/import-srt-captions.md2.1 KB
  • rules/lottie.md1.7 KB
  • rules/measuring-dom-nodes.md973 B
  • rules/measuring-text.md2.9 KB
  • rules/sequencing.md2.3 KB
  • rules/tailwind.md423 B
  • rules/text-animations.md700 B
  • rules/timing.md3.8 KB
  • rules/transcribe-captions.md856 B
  • rules/transitions.md3.6 KB
  • rules/trimming.md1.2 KB
  • rules/videos.md3.4 KB

SKILL.md(原文)

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

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

How to use

Read individual rule files for detailed explanations and code examples:

レビュー

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

同じリポジトリのスキル

概要と使いどころ

accessibility

無料日本語概要

Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。

  • アイコンボタンの説明を付けたいとき
  • キーボード操作とモーダルの点検
  • コントラストや操作対象の大きさの確認
affaan-m/ECC27.8万2026年10月12日 更新

agent-architecture-audit

無料日本語概要

AIエージェントの不調を、指示・記憶・ツール実行・画面表示など12の層から調べるスキル。コードやログを根拠に原因を整理し、重要度順の指摘と修正案をまとめます。

  • アプリ内だけで起きる不調を調べたいとき
  • 過去の会話が混ざる原因を調査
  • ツールの未実行や実行の誤報を確認
affaan-m/ECC27.8万2026年10月12日 更新

agent-eval

無料日本語概要

実際の開発課題で複数のコーディングエージェントを比較するスキル。成功率、取得可能なAPI費用、所要時間、繰り返し実行の安定性を測り、選定や更新後の評価に使えます。

  • 実際の開発課題でエージェントを比較
  • 新しいツールやモデルの導入前評価
  • エージェント更新後の性能確認
affaan-m/ECC27.8万2026年10月12日 更新

agent-harness-construction

無料日本語概要

AIエージェントが使うツールの種類や入出力、エラーからの復帰手順を設計・見直します。文脈の情報量も整理し、作業完了率や再試行回数で改善を評価します。

  • エージェントのツールや入力形式の設計
  • ツールの結果と次の行動を明確にしたいとき
  • 安全な再試行と停止条件を定めたいとき
affaan-m/ECC27.8万2026年10月12日 更新

agent-introspection-debugging

無料日本語概要

AIエージェントの失敗や同じ操作の繰り返しを記録し、原因の切り分け、小さな復旧操作、結果の報告まで進める手順を示して、根拠のある再試行につなげるスキル。

  • 同じツール操作を繰り返す原因の調査
  • 会話の肥大化による品質低下の調査
  • ファイルパスや環境の食い違いの確認
affaan-m/ECC27.8万2026年10月12日 更新

agent-introspection-debugging

無料日本語概要

AIエージェントが失敗や同じ操作を繰り返す原因を、エラーと実行状況から整理します。小さな復旧操作を試し、結果と根拠を引き継げる報告にまとめるスキルです。

  • エージェントの連続失敗を診断したいとき
  • 同じツール操作のループ調査
  • 情報の蓄積による出力劣化の点検
affaan-m/ECC27.8万2026年10月5日 更新

affaan-m のスキルをすべて見る

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