我建立了一個「演變場景」簡報生成技能

and-scene 是一款創新的 Agent Skill，旨在讓使用者透過簡單描述，自動生成動畫式的“演變場景”簡報。與傳統的幻燈片不同，它使用一個共享的圖解畫布，其中的元素（如方框、箭頭、標籤）會隨著演示程序逐步變化，從而講述一個連貫的故事。

該技能的主要工作流程是：使用者在專案中呼叫 /and-scene:presentation 指令或透過自然語言提出需求，技能會透過一問一答的方式收集詳細資訊，然後自動搭建一個 Vite + React 應用（如果專案尚未具備），生成簡報，並自我驗證構建和渲染是否成功。整個過程無需使用者手動配置複雜的工具鏈。

技術方面，and-scene 基於 React 19、TypeScript、Vite 和 motion 動畫庫構建，利用 layoutId 實現元素平滑變形。樣式方面採用“自帶樣式”理念，技能只提供動畫行為、固定畫布佈局和穩定的 DOM 鉤子，使用者可以使用純 CSS、CSS Modules、Tailwind 或其他方式自定義外觀。

簡報支援豐富的導航控制：方向鍵或空格鍵切換步驟，P 鍵切換“演示模式”和“瀏覽模式”，後者額外顯示步驟說明和目錄。此外，技能還提供了 verify 和 inspect 指令碼，能夠自動檢測構建錯誤和佈局溢位，確保演示質量。

and-scene 的安裝和使用非常簡單：透過外掛市場安裝後，在專案中執行指令即可。它會自動判斷專案型別（單倉庫、多倉庫或非 JS 專案），選擇合適的腳手架位置。場景工具包會被複制到專案中作為使用者可編輯的原始碼，類似於 shadcn/ui 的做法。使用者還可以透過“resync the scene kit”命令獲取更新。總體而言，and-scene 為快速建立高質量、動畫豐富的簡報提供了一條高效路徑。

該技能還包含一個參考演示應用，使用者可以在本地執行並檢視示例。技能的具體要求包括 Claude Code 或 Codex 外掛支援、Node.js 版本以及 Chromium 瀏覽器用於驗證。這一工具特別適合開發者，他們可以透過自然語言快速生成演示，同時保持對佈局和樣式的完全控制。