and-scene は、簡単な説明からアニメーション付き「進化するシーン」プレゼンテーションを生成する革新的な Agent Skill です。従来のスライドとは異なり、共有された図解キャンバス上で要素(ボックス、矢印、ラベルなど)がステップごとに変化し、一貫性のあるストーリーを描きます。
このスキルの主なワークフローは次の通りです。プロジェクト内で /and-scene:presentation コマンドを実行するか、自然言語で要件を伝えると、スキルが対話形式で詳細を収集し、不足しているインフラ(Vite + React アプリ)を自動的にスキャフォールディングし、プレゼンテーションを生成してビルドとレンダリングを自己検証します。ユーザーが複雑なツールチェーンを手動で設定する必要はありません。
技術的には、and-scene は React 19、TypeScript、Vite、および motion アニメーションライブラリを基盤とし、layoutId を利用して要素をスムーズに変形させます。スタイリングは「BYO(Bring Your Own)」ポリシーを採用しており、スキルはアニメーション動作、固定キャンバスレイアウト、安定した DOM フックのみを提供し、ユーザーはプレーン CSS、CSS Modules、Tailwind、またはその他の方法で自由にデザインできます。
プレゼンテーションは豊富なナビゲーションコントロールを備えています。矢印キーやスペースキーでステップを移動し、P キーで「プレゼンテーションモード」と「ブラウズモード」を切り替えられます。ブラウズモードでは追加のキャプションと目次が表示されます。さらに、verify スクリプトと inspect スクリプトにより、ビルドエラーやレイアウトの重なりを自動チェックし、プレゼンテーションの品質を保証します。
and-scene のインストールと使用は非常に簡単です。プラグインマーケットからインストールした後、プロジェクト内でコマンドを実行するだけです。スキルがプロジェクトの種類(単一リポジトリ、モノレポ、非 JS プロジェクトなど)を自動的に判別し、適切な場所にスキャフォールディングします。シーンキットはユーザーが編集可能なソースコードとしてプロジェクトにコピーされ、shadcn/ui と同様のアプローチを取ります。また、「resync the scene kit」コマンドで最新の更新を取得できます。
スキルの更新は2段階で行われます。まずインストール済みのスキル/プラグインを更新し、次に各プロジェクト内のベンダリングされたキットコピーを再同期します。これにより、ユーザーは常に最新の機能と修正を利用できます。全体として、and-scene は高品質でアニメーション豊富なプレゼンテーションを迅速に作成するための効率的なパスを提供します。