我創建了一個「演變場景」演示文稿生成技能

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 瀏覽器用於驗證。這一工具特別適合開發者，他們可以通過自然語言快速生成演示，同時保持對佈局和樣式的完全控制。