スキル・ツールとデモ

必要な環境 SKILL.mdを読むエージェント。同梱HTMLを書き出す場合はNode.js 20以上、Chrome、FFmpegとffprobe。

Claudeと使うなら ブリーフ、実素材、場面の状態を渡して映像コードを制作し、描画したフレームを見て修正する。Codex等でも利用できる。

導入のポイント Studio Yebisuの独自実装。横長・縦長の実書き出しと同一環境でのPNG一致を確認。音の聴取レビューは別途必要。Remotion等の既存構成にも判断基準を適用でき、同梱レンダラーは独立HTML用。

必要な環境 Remotionプロジェクトと、スキルを読めるコーディングエージェント。

Claudeと使うなら 制作ブリーフを渡し、コンポジションの設計やフレーム連動アニメーション、レンダリングのコードを生成する。

導入のポイント 公開リポジトリに独立したルートLICENSEは確認できませんでした。Remotion本体の利用条件も確認してください。

必要な環境 既存のUIコード。対象に合わせてスキルを選択。

Claudeと使うなら 操作性やイージングの調整方針をコードレビューや実装に反映する。

導入のポイント 動画を書き出すエンジンは含みません。apple-designは作者が整理したウェブ向け指針です。

必要な環境 Claude Codeなどのスキル対応エージェント。

Claudeと使うなら ブランド情報をもとにデザイン規則を定義し、一貫したスタイルでシーンコードを組み立てる。

導入のポイント 作者の公開作例と制作手順を確認。こちらでのOpus 5.5実生成は未実施です。

必要な環境 Node.js 20以上、Python 3、FFmpeg。WebシミュレーションではChromium。

Claudeと使うなら タイムラインに沿って映像の描画コードと効果音のトリガーを同時に生成する。

導入のポイント Remotionのルートを使う場合は本体の利用条件が別途適用されます。素材と作例の権利も個別に確認。

必要な環境 Python、Playwright／Chromium、FFmpeg、NumPy、Pillow。

Claudeと使うなら <code>seek(t)</code>で指定時刻の状態を描画するコードを生成し、キャプチャとエンコードを実行する。

導入のポイント READMEの音楽・効果音・ロゴはコードのMITとは別条件です。公開前にフレームと音を確認。

必要な環境 Node.js 18以上、Chrome／Chromium／Edge、FFmpeg。

Claudeと使うなら 解説シナリオをシーン分割し、Canvasの描画コードとレンダリング処理を生成する。

導入のポイント 取得時点でルートLICENSEは未確認。コードの再配布・商用採用条件を作者に確認できるまで、参考候補として掲載。

必要な環境 リンク先の各パックにより異なります。

Claudeと使うなら 必要な表現パックを選択し、タイポグラフィやアニメーション規則を制作に適用する。

導入のポイント 本ガイドでは索引からkinetic-typographyパックを選んで制作・実行。全パックの検証ではありません。

必要な環境 資料を読むだけなら導入不要。再現条件は各事例で異なります。

Claudeと使うなら 実績のあるプロンプト構造を参考に、制作ブリーフとコード生成手順を設計する。

導入のポイント API事業者による編集資料です。モデルの評価結果ではありません。動画・音楽・第三者の指示文は各作者の権利が適用されます。

必要な環境 Node.js 22以上、FFmpeg。ブラウザでプレビューし、ローカルで書き出せます。

Claudeと使うなら 付属スキルを用いてHTMLコンポジションを構築し、プレビューと動画書き出しを行う。

導入のポイント ローカル書き出しはHeyGenクレジットを使いません。クラウド、音声、生成素材など外部サービスの費用は別です。

必要な環境 Node.jsとReactのプロジェクト。書き出し用ブラウザ等は公式手順に従います。

Claudeと使うなら 公式スキルと連携し、Reactコンポーネントとフレーム番号をもとに動画を実装する。

導入のポイント 独自のRemotion License。個人、従業員3人以下の営利組織などは無料枠があり、それ以外はCompany Licenseの確認が必要です。

必要な環境 Node.js／TypeScript。動画書き出しは対応するエクスポーターを使用。

Claudeと使うなら 解説の流れをTypeScriptコードとして組み立て、ジェネレータ関数で動きを制御する。

導入のポイント React向けのUIライブラリとは異なる制作モデルです。書き出し経路と依存を公式ガイドで確認。

必要な環境 OSに合ったFFmpeg実行ファイル。

Claudeと使うなら 解像度やFPS、コーデック要件を指定し、変換・合成コマンドを構築・実行する。

導入のポイント 主にLGPLで、オプションや外部ライブラリによってGPL等の条件が加わります。使うビルドを確認。

必要な環境 対応ブラウザ。マルチスレッド版はcross-origin isolation等の配信設定が必要。

Claudeと使うなら ブラウザ内で実行可能なトランスコードやトリミングの処理コードを実装する。

導入のポイント 公式FAQではネイティブ版より遅く、入力上限は2GBと案内。MITはJSラッパー部分で、coreにはFFmpeg等の条件が適用されます。

必要な環境 対象コーデックに対応するブラウザ。サーバー実行には対応パッケージ。

Claudeと使うなら Canvasフレームのエンコードやメディア結合処理をTypeScriptで実装する。

導入のポイント 使えるコーデックとハードウェア支援は環境次第です。MPLの対象ファイルを配布する場合は条件を確認。

必要な環境 Node.js版またはPython版と、対応ブラウザ。

Claudeと使うなら 時刻ごとのレンダリング完了を待機してスクリーンショットを連続保存するスクリプトを生成する。

導入のポイント フォント・素材・描画完了を待って取得し、動画化はFFmpeg等と組み合わせます。

必要な環境 JavaScript。React向け機能はReactプロジェクト。

Claudeと使うなら 操作に応答するUIコンポーネントを実装し、スプリング物理やアニメーション遷移を調整する。

導入のポイント Webの操作向けアニメーションを動画にするときは、フレーム番号や時刻から状態を決める設計が必要です。

必要な環境 JavaScript。必要なプラグインを登録して利用。

Claudeと使うなら 要素の登場や遷移をタイムラインに配置し、シーク可能なアニメーションコードを構築する。

導入のポイント 独自のStandard No Charge License。Webflowと競合する視覚的アニメーション制作ツール等には制限があり、MIT扱いにはできません。

必要な環境 JavaScript。バージョンに合った公式APIを使用。

Claudeと使うなら SVGの描画アニメーションや数値変化をコード化し、時間差やイージングを設定する。

導入のポイント 旧バージョンのサンプルをそのまま混ぜず、導入した版のAPIと時刻指定を確認。

必要な環境 Canvasが使えるブラウザ。

Claudeと使うなら トリガーとなるイベントに合わせ、発射角度、粒子数、色を調整した演出コードを生成する。

導入のポイント 動画へ書き出すときは、乱数のseedと粒子の進行を固定すると同じフレームを再現できます。

必要な環境 対応ブラウザ、WebGL／WebGPUなど選択するレンダラーに合った環境。

Claudeと使うなら ジオメトリ、マテリアル、ライト、カメラを定義し、フレーム更新で動く3Dシーンを構築する。

導入のポイント モデル・テクスチャ・HDR素材の権利は別です。動画化ではカメラや物体の状態も時刻から計算します。

必要な環境 ReactとThree.js。ReactとFiberの対応版をそろえる。

Claudeと使うなら 3DオブジェクトをReactコンポーネントとして宣言し、プロパティや状態に応じた動きを実装する。

導入のポイント Remotionと組む場合は@remotion/three等のフレーム連動を確認。通常のuseFrameの時間進行をそのまま動画に使わない。

必要な環境 React Three FiberとThree.js。

Claudeと使うなら OrbitControlsやEnvironmentなどのコンポーネントを導入し、シーン設定を効率化する。

導入のポイント React Three Fiberと組み合わせて使います。動画では操作用のカメラも時刻に沿って制御します。

必要な環境 WebGLに対応したブラウザ。

Claudeと使うなら マーカー座標、回転速度、配色を設定し、地球儀コンポーネントを構築する。

導入のポイント 拠点紹介や背景の地球儀に向きます。必要なマーカー数や描画負荷を対象端末で確認します。

必要な環境 WebGLとGLSLの知識、対応ブラウザ。

Claudeと使うなら GLSLシェーダーコードとバッファ管理を簡潔に記述し、WebGL描画処理を構成する。

導入のポイント シーンと時間の管理を自分で組み、使うGPU機能が対象ブラウザで動くか確認します。

必要な環境 JavaScriptとCanvas。

Claudeと使うなら Canvas要素をオブジェクト化し、位置やスケールのプログラマティックなアニメーションを実装する。

導入のポイント フレームの時刻制御を組み、描画したCanvasをレンダラーや動画処理へ渡します。

必要な環境 Riveで制作した.rivファイルと、対象環境のランタイム。

Claudeと使うなら .rivアセットを読み込み、入力値やステートの切り替えを制御するコードを生成する。

導入のポイント 制作エディタ・サービスと.riv素材には、それぞれの利用条件があります。使う素材と配布先を確認します。

必要な環境 LottieのJSON素材とブラウザ。

Claudeと使うなら Lottie JSONをロードし、再生位置や進行速度をフレームレートやスクロールに連動させる。

導入のポイント 再生ライブラリのMITは素材や作成ツールの権利に及びません。After Effects等は別製品です。

必要な環境 対応ブラウザと、選択するWebGL／WebGPU描画環境。

Claudeと使うなら スプライトやコンテナを構成し、GPU描画による高負荷な2Dアニメーションを実装する。

導入のポイント 動きの設計と動画化は別工程。ティッカーの実時間に頼らず、出力フレームの状態を決めます。

必要な環境 対応ブラウザ、選択した描画バックエンド、データと必要な地図素材。

Claudeと使うなら 空間データをレイヤーにバインドし、時間軸に沿った可視化パラメータを制御する。

導入のポイント 描画可能な件数や速度は端末・データ・レイヤー次第。地図タイル等のAPI費用と利用条件は別です。

必要な環境 JavaScript、DOM／SVG／Canvasのいずれか。

Claudeと使うなら データスケールとパスジェネレータを設定し、値の変化に応じた滑らかなグラフ遷移を実装する。

導入のポイント 数値の出典、単位、軸を先に決め、動画では時刻からグラフの状態を計算します。

必要な環境 Pythonと公式インストール手順。数式表示はLaTeX等の追加依存。

Claudeと使うなら 解説シナリオをPythonのSceneクラスとして構成し、数式や図形の変形アニメーションを実装する。

導入のポイント 作者個人版のManimとコミュニティ版は異なります。フォント・TeX・FFmpeg等の環境も確認。

必要な環境 コード動画側はPython、Playwright、ブラウザ、FFmpeg。H3動画生成の公式手順ではUbuntu 22.04とCUDA 12.6対応GPU環境。公式ではコード生成にGPT-6、参照画像生成にGPT-Image-2も使用。

Claudeと使うなら シーンの構図と動きの設計、Three.jsコードの編集にClaudeを使い、コード動画をH3の入力へつなぐ。

導入のポイント 掲載デモで実行したのは入力側のコード動画です。参照画像とH3による最終生成は未実行。公開コードはApache-2.0で、利用するモデル、API、生成素材の条件は個別に確認します。

必要な環境 Agent Skillsを読めるエージェント。閲覧はWebGL 2対応ブラウザ、録画はNode.js、Playwright、FFmpeg。Three.jsは固定版のCDNから読み込む。

Claudeと使うなら 機械の調査、寸法・材料・方程式の整理、Three.jsの組立、断面・分解・故障の演出とフレームレビューに使う。CodexでもSKILL.mdを参照して制作できる。

導入のポイント 数値は小さな計算モデルによる説明値です。CFD・FEAや製造用CADの代わりにはなりません。作例は簡略化と出典を明記します。