SuperAPI AI 工具集

artifact-explainer

前端与建站

查看项目

更新于 10-16 02:36

技能介绍

用途:当用户问“X 是怎么工作的”(X 为非平凡主题)、要求入门/深入解读、做新成员引导文档,或需要研究摘要型讲解文时使用本技能。它生成教学型 HTML 讲解文,目标是让零基础读者读完后能做出判断、有效检索或参与讨论。

主要能力:输出始终是单个 .html 文件(不是 .md、不是纯 Markdown)。使用 templates/ 中的模板,将 artifact.css 内联在 <style>(Mode B 单文件便携)或用 <link> 引用。按资料要求加载 jQuery 4.0.0 与 jQuery UI 1.14.2 层。集成三种 jQuery UI 控件:accordion(可折叠正文段落,一次只开一个,如 $('.explainer-accordion').accordion({ heightStyle: 'content', collapsible: true }))、tabs(在代码示例或同一概念的多种表示间切换,如 $('.explainer-tabs').tabs())、tooltip(术语悬停定义,如 $('.glossary').tooltip({ classes: { 'ui-tooltip': 'explainer-tip' } }))。

结构:讲解文由七个块按序组成——页眉(眉题+h1+导语)、TL;DR(3 至 5 条完整论断)、心智模型(一个 panel,含短文与内嵌 SVG 图或一个类比)、渐进章节(3 至 6 个折叠节,默认首节展开,顺序为 what→why→how→when not to use it→commonly misunderstood)、代码示例选项卡(最多 3 个)、术语表(dl,按字母排序)、延伸阅读(3 至 5 条带一句话理由的链接)。页面使用 .page-narrow(680px)。

用法与限制:写前先读 artifact-css/SKILL.md 获取完整 OUTPUT CONTRACT、设计系统、页面骨架与交互层说明。必须保证无 JS 时页面仍可读:手风琴默认全部展开,选项卡面板堆叠且各带标题,工具提示回退到浏览器原生 title。不得用 JS 注入关键内容,JS 只重连既有标记。术语表 tooltip 的 title 与 dl 中定义须逐字一致;TL;DR 用事实而非承诺;代码示例必须可运行;只用一个类比;正文术语首次出现才定义。静态报告、计划和评审不使用本技能。官方文本暂未提供。