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 浏览器用于验证。这一工具特别适合开发者，他们可以通过自然语言快速生成演示，同时保持对布局和样式的完全控制。