この連載「うちのSkill」では、社内で実際に運用しているSkillを紹介しています。今回取り上げる/hyperframesは、生成AIによる文章作成や分析ではなく、動画レンダリングという別種の作業をSkillとして仕組み化した事例です。
動画を「書く」という発想
HyperFramesはAI動画企業HeyGenが公開しているOSSで、GitHub上で43,000を超えるスターを集めています。README記載のキャッチコピーは「Write HTML. Render video. Built for agents.」で、HTMLファイルにタイミングやトラックを指定するデータ属性を追加し、GSAP・CSS・Lottie・Three.jsといったアニメーション機能で動きを付けたうえで、Puppeteerでブラウザ描画をキャプチャし、FFmpegでMP4に変換する仕組みです。同じ入力からは同じフレームが生成される決定論的な設計になっており、README上で「same input, same frames, same output」と明記されています。動画編集ソフトのタイムラインをマウスで操作する代わりに、アニメーションの内容をコードとして記述する点が、このツールの特徴です。
テンプレートを選び、コードを直して、レンダリングする
SKILL.mdを確認したところ、作業は5ステップで設計されています。まずテンプレートを選びます。用意されているのは、黒背景に中央テロップと下部ロゴを配置した縦型ショート「short-9x16」、複数行のテロップを連続表示する「short-9x16-typography」、タイトルスライドと本文を表示する横長の「landscape-16x9」の3種類です。次にテンプレートをプロジェクト用のディレクトリへコピーして初期化し、`index.html`を編集してテキストや画像、色、アニメーションを変更します。編集が終わったら`npx hyperframes render`コマンドでMP4に書き出し、出力ファイルのサイズや解像度、尺を確認してから、必要であれば`index.html`を直して再レンダリングするという流れです。この社内Skillの独自性は、HyperFrames自体の機能に加えて、テンプレートの初期化を専用のスクリプトで自動化し、作業ディレクトリの置き場所（同期フォルダを避けローカルディスクに置く）まで具体的に指定している点にあります。
つまずきどころをあらかじめ潰しておく
SKILL.mdにはエラーハンドリングの一覧表が用意されています。ヘッドレスブラウザが未導入のときの対処、FFmpegが見つからないときのインストール方法、日本語が文字化けする場合はGoogle FontsでNoto Sans JPを指定するという対処、レンダリングが遅い場合は並列ワーカー数を調整するという対処、ネットワークのない環境でCDN読み込みが失敗する場合はアセットをローカルに置き換えるという対処まで、動かしてみて初めて分かるような具体的なつまずきどころが先回りして書かれています。加えて`npx hyperframes doctor`という環境診断コマンドが用意されており、導入時にNode.jsやFFmpeg、ヘッドレスブラウザが揃っているかを機械的に確認できる設計です。個々の対処法自体はHyperFrames本体のドキュメントにも書かれている内容ですが、それを社内の運用手順としてSKILL.mdに集約し、初めて使う人がドキュメントを探し回らずに済むようにしている点が、この社内Skillの役割です。
自分の組織で真似るには
このSkillが有効なのは、動画編集という属人化しやすい作業を、コードとして再現可能な形に落とし込んでいるからです。真似る場合のポイントは3つです。まず、外部のOSSツールをそのまま使うのではなく、自分たちの用途に絞ったテンプレートを用意すること。汎用ツールの全機能を毎回学び直すより、決まった用途向けのひな形から始めるほうが、初めて使う人の着手コストが下がります。次に、エラーハンドリングの一覧を先に作っておくこと。ツール本体のエラーメッセージだけでは対処法が分かりにくい場面ほど、実際につまずいた経験を運用手順に書き足しておく価値があります。そして、環境診断コマンドのような「動く前提が揃っているか」を機械的に確認できる手段を用意すること。前提環境の不備は、作業を始めてから気づくと手戻りが大きくなるため、着手前に一括で確認できる仕組みがあると無駄が減ります。