HyperFrames (HTML + GSAP → MP4) でアプリのプロモ動画を決定論的に生成するスキル。HyperFrames 公式スキル（19本）を土台として前提にし、素材の橋渡し・検証ゲート・ 納品仕様・誇張表現の禁止という「公式が扱わない層」だけを担当する。SNS リール、LP ヒーロー動画、リリース告知、機能デモが対象。
Use when: プロモ動画を作りたい、告知動画を作りたい、HTML から動画を作りたい、 HyperFrames で動画を作りたい、リリース動画を作りたい、SNS 用の縦動画を作りたい。
Triggers: "HyperFrames", "hyperframes", "プロモ動画", "告知動画", "宣伝動画", "HTML から動画", "html to video", "リリース動画", "SNS動画", "縦動画", "リール"
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
HTML + CSS + 一時停止した GSAP タイムラインを、ヘッドレス Chrome の フレーム seek で MP4 に焼く。同じ入力なら同じフレーム、同じ出力になる。
担当する（このリポジトリ固有の層）:
担当しない（公式スキルに委ねる）:
シェーダートランジション、キャプション、モーション設計、カタログのブロック、
TTS、文字起こし、背景除去 — すべて公式スキルの方が詳しい。
自前で書き直さず /hyperframes ルーターに投げること。
node -v # 22 以上
command -v ffmpeg # 必須
npx hyperframes doctor
公式スキルを入れる（初回のみ。init 実行時にも自動で更新される）:
npx hyperframes skills update
導入後は /hyperframes が入口になる。作るものが決まっているなら
このスキルの Step 1〜4 で外枠を固め、実装の細部は /hyperframes に routing させる。
先に決める。決まるまで HTML を書かない。
尺・比率・訴求の3つが埋まらないうちは、質問を1つだけして待つ。
実物を使う。 プレースホルダ画像、ロレム・イプサム、想像で書いた数値は使わない。
| 素材 | 取得元 |
|---|---|
| アプリ実画面 | simulator-screenshots スキル、または実機キャプチャ |
| ストア用の加工済み画像 | screenshot-creator スキル |
| ロゴ・アイコン | pencil-app-icon スキル、または既存アセット |
| 配色・書体 | app-tone-manner スキルの成果物 |
素材が足りないまま進めない。足りない素材は先に作る。
素材と構成が既に固まっていて、ブランドの見た目も決まっているとき。
npx hyperframes init <name> --example blank --resolution portrait
cd <name>
--resolution は portrait(1080×1920) / landscape(1920×1080) / square(1080×1080) /
portrait-4k / landscape-4k / square-4k。
ビジュアルの方向性が固まっていないとき、ブランド素材（スクショ・PDF・ブランドガイド） から見た目を起こしてほしいとき。Claude Design が第一稿、Claude Code が編集室という分業になる。
手順とルート A/B の選び方は references/claude-design-route.md に置いた。 要点だけ:
lint を通る状態で届く。構造を直す作業は発生しないどちらのルートでも、以降の Step 4 の検証ゲートは同じように通す。
満たすべき構造契約は references/composition-contract.md に置いた。 特に外せないのは4点:
data-composition-id と 数値の data-width / data-height / data-durationdata-start と data-duration、シーンは隙間なく端から端まで並べるwindow.__timelines["<id>"] に paused の GSAP タイムラインを登録するplay() を呼ばない再生を駆動するのはフレームワーク側。ここを破ると決定論が壊れる。
順番に実行する。失敗したら次に進まない。
npx hyperframes lint # 構造の妥当性。エラー 0 が通過条件
npx hyperframes inspect # テキストのはみ出し・見切れ・重なり、モーション意図の照合
npx hyperframes snapshot # キーフレームを PNG 化して目視
npx hyperframes render --output renders/promo.mp4 --fps 30 --quality high
lint のエラーが残ったまま render しないinspect はレイアウト崩れを機械的に検出する。目視の代わりではなく目視の前段snapshot で最低3点（冒頭・中盤・締め）を実際に開いて見る--docker を付ける主要フラグは references/cli-playbook.md に一覧化した。
ffprobe で確認 — 解像度・fps・尺・ピクセルフォーマットが指示通りか--variables で1つの composition を使い回す事実として確認できないものは、動画に入れない。
| 用途 | スキル |
|---|---|
| SNS リール・LP ヒーロー・リリース告知 | 本スキル（HyperFrames） |
| App Store 提出用プレビュー動画 | app-store-preview-movie（Remotion + エージェントチーム） |
| ライブ登壇の15秒即席動画 | promo-video-lite（ffmpeg のみ・プロジェクト初期化不要） |
Claude Design を第一稿に使うルートは Step 3 のルート B。 経路が2つ（Download-ZIP / Send to HyperFrames）あり、指示ファイルも守るルールも別なので、 着手前に references/claude-design-route.md でどちらか決める。
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.
The English summary is being prepared. Showing the original description.
Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル（app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize）から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"
The English summary is being prepared. Showing the original description.
アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"
The English summary is being prepared. Showing the original description.
App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"
The English summary is being prepared. Showing the original description.
アプリのトーン&マナー（トンマナ）を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」（矛盾ペア）を核に、AIっぽくない独自のブランドアイデンティティを生成する。
The English summary is being prepared. Showing the original description.
仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント（Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate）が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書（Markdown）。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"
The English summary is being prepared. Showing the original description.