SuperAPI AI 工具集

presentation

设计与创作

查看项目

更新于 10-16 05:02

技能介绍

用途:在浏览器中构建“演变场景”演示文稿——所有步骤共享一张图示画布,实体在步骤间变形,标题说明与导航引导观众。每个演示是 src/presentations/<slug>/ 下自包含文件夹,组合可复用的 src/presentation-kit/ 场景套件。

适用时机:用户要求创建/生成演示或演讲;修改、更新或添加现有演示的步骤;项目缺少场景套件或演示基础设施需要引导搭建;或需要将项目内附场景套件更新到技能最新快照。

使用方式(按阶段执行,不可跳过自校验):

  1. 收集需求:逐次提问,先确定主题、视觉风格、高层章节,再将各章节展开为步骤(一个步骤=一次可导航节拍,含标题/说明与当时场景状态),最后确认每步出现的实体与变形关系。允许细节不全并迭代;不要在结构成型前先问时长或步数。若提示已含全部细节,直接进入搭建。
  2. 解析目标并搭建:检查三类契约锚点——构建设置(vite.config.ts、package.json 的构建脚本)、场景套件(src/presentation-kit/types.ts、Presentation.tsx、Stage.tsx)、演示索引(src/presentations/index.ts 注册表)。按上下文选择位置:空目录或独立 JS 应用放仓库根;monorepo 放 presentations/ 下自包含应用;非 JS 仓库放 presentation/ 下;已有锚点则只补缺失部分。从模板复制缺失文件,重命名中性的包名,并安装完整依赖:运行期 react、react-dom、motion、lucide-react;开发/构建 vite、@vitejs/plugin-react、typescript、@types/react、@types/react-dom、@types/node、eslint 相关栈及 playwright(渲染检查用)。在目标目录运行 npm install。
  3. 生成或修改:新演示由标题派生 kebab-case slug,从模板创建 entities.ts(变形实体的稳定 layoutId 命名空间)、steps/*.tsx(每步一个 Step 对象)、Talk.tsx(渲染 <Presentation steps={STEPS} />);样式为自带(BYO),默认演示本地纯 CSS,仅在宿主项目已用或用户明确要求时用 Tailwind 等。在 src/presentations/index.ts 中注册 { slug, title, load },保留已有条目。修改时先定位目标,仅询问所改内容,做局部编辑。
  4. 自校验:在演示应用目录运行 npm run build(须无类型错误);对演示路由做渲染检查(至少首步无运行时/控制台错误),可用 npm run verify;再在浏览器做视觉构图检查,用 npm run inspect -- <slug> 生成截图,检查重叠、裁切、不可读堆叠、缺失的目录/进度高亮及与说明、进度点等装饰的碰撞。失败则修复后重查,不得在产出损坏时报告成功。缺 Chromium 时运行 npx playwright install chromium。

更新内附套件:套件按 shadcn 风格内附,每个项目持有一份 src/presentation-kit/ 副本,不会随技能自动更新。需同步时在项目根运行 node <skill-dir>/sync-kit.mjs 查看差异(退出码 0 为一致,1 为不同),再运行 node <skill-dir>/sync-kit.mjs --apply 应用;脚本只写新增与变更文件,不删除目标独有文件。之后重应用本地主题修改,并运行 npm run build 与渲染检查。同步只触及套件文件,不影响演示与宿主配置。

场景套件组合:步骤按 Step 契约定义(id、era、title、caption、可选 groupKey、payload 与 Scene 组件),带类型化 payload 可避免逐处断言;实体连续性靠 entities.ts 中稳定 layoutId,需变形的节点保持同一 id。平滑变形纪律:连续节拍用共享 groupKey 与 payload 的持久场景,不要把一张演变图拆成多个无关场景;layoutId 元素上不加 transform 或 opacity 样式,冲突定位放到非 layoutId 包装层;保留有意的重叠,用 data-allow-overlap 标注;新实体用 Appear,延续实体持久变形;让布局自然重新居中,用内容宽度与居中对齐,不用固定像素宽度或 flex-start 钉住;避免只适应原始 880px 舞台的密集横排,注意浏览模式的目录与底部说明占位。节点原语包括 Box、Label、Arrow、Frame、Emphasis、SymbolChip、Appear,均接受 layoutId。

限制:资料未提供具体收费、价格或平台支持信息;样式默认不自带,需用户自行设计;自校验依赖构建与浏览器检查,官方未提供其他验证方式。