学習3: test/ で最小コンポジションを作成し CLI を体験

[na-navi]

概要

学習1〜2で得た知識を使い、test/ 配下に最小のコンポジションを作成する。bun run build → lint → validate → preview の CLI ループを体験する。

手順

1. npx hyperframes init test/01-core-basics/minimal-clip でスキャフォールド
2. 生成された HTML を読む
3. bun packages/cli/dist/cli.js lint で lint
4. bun packages/cli/dist/cli.js validate で validate
5. bun packages/cli/dist/cli.js preview test/01-core-basics/minimal-clip --no-open でプレビュー（CDP ブラウザで確認）
6. --kill-all でサーバ終了

試すこと

• class="clip" を付け外して lint エラーを確認
• window.__timelines の ID をわざとずらして validate エラーを確認
• GSAP で簡単なアニメーションを追加

完了条件

• lint → validate → preview のフルサイクルを完走
• よくあるエラー（ID ミスマッチ等）を体験済み
• preview サーバを残さず終了