hyperframes-cli
HyperFrames CLIでHTMLコンポジションを動画にレンダリング
HTMLベースの動画コンポジションをMP4またはWebM出力に変換し、手動レンダリングを不要にします。コンテンツクリエイターや開発チーム向けに、スキャフォールディング、リンティング、ビジュアル検査、最終デリバリーを自動化します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「hyperframes-cli」を使用しています。 npx hyperframes doctor
期待される結果:
環境を確認中...
✓ Chrome: インストール済み
✓ FFmpeg: インストール済み
✓ Node: v22.10.0
✓ メモリ: 8GB利用可
レンダリング準備完了。
「hyperframes-cli」を使用しています。 npx hyperframes lint ./my-project
期待される結果:
コンポジションをリント中...
✓ index.html: 有効
✗ compositions/intro.html: data-composition-idが不足
⚠ compositions/outro.html: 2.5秒でトラックが重なりあり
エラー1件、警告1件が見つかりました。
セキュリティ監査
安全All 69 static findings are false positives. The external_command detections are markdown code examples showing CLI usage, not executable code. Network detections are localhost URLs for local development preview, which is expected. No cryptographic code or malicious patterns exist in this skill.
品質スコア
作れるもの
CI/CDパイプラインで動画生成を自動化
--non-interactiveフラグ付きでhyperframes renderを使用し、手動介入なしに自動化されたワークフローの一環として動画を生成します。
テンプレートからマーケティング動画コンテンツを作成
product-promoなどのテンプレートでプロジェクトをスキャフォールドし、HTMLコンポジションをカスタマイズしてから、SNSや広告用に最終MP4をレンダリング。
動画コンポジションのビジュアルレイアウト問題をデバッグして修正
hyperframes lintを実行して構造的エラーをキャッチし、hyperframes inspectで最終レンダリング前にテキストオーバーフローとクリッピングを特定。
これらのプロンプトを試す
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.
ベストプラクティス
- プレビュー前にリントとインスペクトコマンドを実行して、構造的問題とビジュアル問題を早期にキャッチ
- --dockerフラグを使用して、異なる環境でもバイトレベルの同一レンダリングを実現
- イテレーション中はdraft品質を使用し、最終デリバリー時のみhigh品質に切り替え
回避
- レンダリング前のリントとインスペクト手順をスキップしない - 構造的エラーによりサイレント障害が発生する可能性がある
- 特に必要がなければ60fpsを使用しない - ビジュアル面での利点は最小限で、レンダリング時間が2倍になる
- 開発中に直接最終出力にレンダリングしない - 時間を節約するためにdraft品質を使用