SuperAPI AI 工具集

html-slideshow-deck

前端与建站

查看项目

更新于 10-15 16:40

技能介绍

用途:当用户需要“做幻灯片/演示文稿”,且希望产出可通过链接分享、内含真实代码或实时交互的内容时,使用该技能生成 HTML 幻灯片。适合技术演讲、闪电演讲、领导层简报、新人入职讲解等顺序性视觉演示。面向董事会或客户提案等企业分发场景,仍建议考虑 .pptx。

主要能力:键盘导航(→/空格下一页,←上一页,f 全屏,Esc 退出全屏);固定 16:9(或 16:10)宽高比并居中留黑边;每页为带 slide 类的 <section>,仅显示当前页,URL 哈希(如 #3)随页码更新以支持直接链接;角落提供细进度条或页码计数。幻灯片类型包括标题页、单点页、代码页、图示页、对比页、演示页、章节分隔页和回顾页。l

使用方式:生成前先调用 html-skills:html-skills-listen,若返回 URL 则将其原样注入为 window.CLAUDE_SUBMIT_URL(含 ?t= 查询串);若为 web/sandbox 模式则省略该行。产出为写入磁盘的独立 .html 文件,内联 CSS 与 JS,无构建步骤;仅 Google Fonts 可经 <link> 引入并需声明回退字体。可支持演讲者模式,按 n 切换侧栏备注,备注写入各 <section> 内的 <aside>。

限制与规范:避免大段项目符号、照读幻灯片、正文小于约 24pt、无意义动画和对比度不足配色。代码不超过约 10 行,超出则拆页。DOM 需安全构建(用 textContent 与 createElement,禁止用变量设置 innerHTML)。SVG 文本不换行,需按标签尺寸估算或用 <foreignObject>。剪贴板写入须使用 copyToClipboard 辅助函数,不直接调用 navigator.clipboard.writeText。移动端约 700px 以下折叠为单列;需满足 WCAG AA 对比度与键盘可达。本地 HTML 为默认产出,仅在存在 Artifact 工具时附加“发布到 Claude.ai”按钮,且绝不以此替代写文件。

其他细节(如收费、价格、具体发布平台效果)暂未提供。