本文にスキップ
AI News HubLIVE
サイト内リライト2 分で読了

「進化するシーン」プレゼンテーション作成スキルを作りました

記事の要約

and-scene は、プロジェクト内でアニメーション付きのスライドプレゼンテーションを自動生成するエージェントスキルです。Vite/React アプリをスキャフォールディングし、単一のキャンバス上で要素がステップごとに変化します。

ソースHacker News AI著者: paulcaplan
「進化するシーン」プレゼンテーション作成スキルを作りました
誤りを報告

訂正窓口はまだ利用できません。記事情報をコピーして保存できます。

訂正案内
本文へ

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 は高品質でアニメーション豊富なプレゼンテーションを迅速に作成するための効率的なパスを提供します。

要点と分析を開く

記事インテリジェンス

エンジニア中級

要点

  • 自然言語でプレゼンテーションを記述すると、エージェントが必要なインフラを自動構築します。
  • 単一キャンバス上で要素が変形・移動・接続し、視覚的な連続性を保ちます。
  • スタイリングはユーザーが完全に制御可能。スキルはアニメーション動作とレイアウトのみ提供します。
  • ビルドとレンダリングの検証を行うスクリプトが組み込まれています。

要点と分析は自動生成され、誤りを含む場合があります。原典をご確認ください。