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

manim-video

技術の仕組みやグラフ、システム構成、製品の流れをManimのアニメーションで説明し、絵コンテとシーン計画、短い動画、サムネイルを作るスキル。

原文原文の説明を見る

Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.

インストール方法を見る

こんなときに便利

  • 技術の仕組みを動画で説明したいとき
  • グラフやネットワークの変化を可視化
  • 業務フローやシステム構成の説明
  • XやLP向けの短い製品紹介

日本語での紹介

できること

技術の仕組みやグラフ、処理の流れを、Manimで動きのある説明動画にします。伝えたい要点を一文にまとめ、3〜6シーンの絵コンテと構成を作ってからコードを書きます。各シーンで一つの内容を示し、図を段階的に表示したり、状態の変化を動きで説明したりします。標準の成果物は短い16:9のMP4、サムネイルまたはポスター用の一枚、絵コンテとシーン計画です。

こんなときに便利

システム構成、ネットワーク、数値の推移など、静止画だけでは流れを伝えにくい題材に向いています。Xやランディングページ向けの短い製品紹介にも使えます。まず低品質の試作を描画し、構成とタイミングを確かめてから文字、余白、色、テンポを整えます。

使い方の例

  • 「処理の流れを4シーンのアニメーションで説明して」
  • 「ネットワークの改善前後を見せる動画とサムネイルを作って」

注意点

描画にはmanim CLIが必要です。必要に応じて後処理にffmpeg、仕上げにvideo-editing、UIや字幕などの合成にremotion-video-creationを使います。

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

含まれるファイル(2)

  • SKILL.md2.8 KB
  • assets/network_graph_scene.py2.8 KB

SKILL.md(原文)

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

Manim Video

Use Manim for technical explainers where motion, structure, and clarity matter more than photorealism.

When to Activate

  • the user wants a technical explainer animation
  • the concept is a graph, workflow, architecture, metric progression, or system diagram
  • the user wants a short product or launch explainer for X or a landing page
  • the visual should feel precise instead of generically cinematic

Tool Requirements

  • manim CLI for scene rendering
  • ffmpeg for post-processing if needed
  • video-editing for final assembly or polish
  • remotion-video-creation when the final package needs composited UI, captions, or additional motion layers

Default Output

  • short 16:9 MP4
  • one thumbnail or poster frame
  • storyboard plus scene plan

Workflow

  1. Define the core visual thesis in one sentence.
  2. Break the concept into 3 to 6 scenes.
  3. Decide what each scene proves.
  4. Write the scene outline before writing Manim code.
  5. Render the smallest working version first.
  6. Tighten typography, spacing, color, and pacing after the render works.
  7. Hand off to the wider video stack only if it adds value.

Scene Planning Rules

  • each scene should prove one thing
  • avoid overstuffed diagrams
  • prefer progressive reveal over full-screen clutter
  • use motion to explain state change, not just to keep the screen busy
  • title cards should be short and loaded with meaning

Network Graph Default

For social-graph and network-optimization explainers:

  • show the current graph before showing the optimized graph
  • distinguish low-signal follow clutter from high-signal bridges
  • highlight warm-path nodes and target clusters
  • if useful, add a final scene showing the self-improvement lineage that informed the skill

Render Conventions

  • default to 16:9 landscape unless the user asks for vertical
  • start with a low-quality smoke test render
  • only push to higher quality after composition and timing are stable
  • export one clean thumbnail frame that reads at social size

Reusable Starter

Use assets/network_graph_scene.py as a starting point for network-graph explainers.

Example smoke test:

manim -ql assets/network_graph_scene.py NetworkGraphExplainer

Output Format

Return:

  • core visual thesis
  • storyboard
  • scene outline
  • render plan
  • any follow-on polish recommendations

Related Skills

  • video-editing for final polish
  • remotion-video-creation for motion-heavy post-processing or compositing
  • content-engine when the animation is part of a broader launch

レビュー

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

同じリポジトリのスキル

概要と使いどころ

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月5日 更新

agent-introspection-debugging

無料日本語概要

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

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

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

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