SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场visual-explainer

visual-explainer

设计与创作

查看项目

更新于 10-16 05:37

技能介绍

Visual Explainer 是一个面向可视化解释的技能，用于在解释系统、代码变更、计划或数据时，生成图表、HTML 页面、幻灯片、视频以及可复用的 React 图形与动效。其核心目标是产出可编辑的源码，以及经过验证、自包含的 HTML 产物。

用途 当需要以视觉方式说明系统结构、代码改动、实施计划或数据时，可使用该技能。默认解释器主题在图表、幻灯片和视频中统一采用 Hairline 预设；如果用户明确指定品牌或期望的外观，则以该要求优先。技能强调：当视觉元素无法增加理解时，应优先使用文字叙述。

主要能力

  • 支持多种产物形式：独立图表、数据故事、图表与架构图、实施计划、对比表、幻灯片、交互式 Hairline 图形、动效视频、原生数学或物理动效、ASCII/纹理/3D 模型媒体、参考图转低细节程序化 3D、代码走查、diff 解释、项目回顾等。
  • 提供 CLI 命令：init、add、list、export、video、engine、verify，用于初始化、添加、列出、导出、生成视频、引擎处理和验证。
  • 支持 LieflatChart JSON 信封用于独立图表，MDX 用于数据故事，Archify 使用类型化 JSON，默认以 .mdx 编写，需要本地状态、生成/自定义 SVG 或视频时使用 .tsx。
  • 共享组件可从 REPO/visual-explainer-mdx/components.tsx 导入。
  • 支持导出图表 JSON、MDX/TSX 以及静态 HTML，并可在导出失败时回到源码修复。

使用方式 要求 Node 22.12 或更新版本。内部将 SKILL_DIR 设置为包含该文件的绝对目录，使用 node "$SKILL_DIR/scripts/artifacture.mjs" 执行 init、add、list、export、video、engine 和 verify。CLI 负责运行时设置、所需 npm 包以及工作区样式表导入。用户只需安装技能并提出产物需求，不需要配置路径、缓存或第二次检出。若编写导入或参考使用 npm --prefix REPO 的内容，可通过 REPO=$(node "$SKILL_DIR/scripts/artifacture.mjs" path) 获取就绪运行时，并传入绝对源路径与输出路径。私有品牌和复制的消费者编辑仍归用户所有。安装说明仅用于开发覆盖或故障排查。

编写、导出与验证流程 根据请求选择一条路线并阅读对应卡片，仅在所选路线要求时阅读额外参考。独立图表编写 LieflatChart JSON 信封；数据故事在 MDX 中组合图形；Archify 使用类型化 JSON；其他情况默认编写 .mdx，或在需要本地状态、生成/自定义 SVG 或视频时使用 .tsx。图表 JSON 通过 node "$SKILL_DIR/scripts/artifacture.mjs" chart <abs-source.json> --out <abs-output.html> 导出；Archify 使用其经过验证的交付命令；MDX/TSX 使用 export <abs-source> --out <abs-output>；静态 HTML 使用 export-static。导出失败需在源码中修复。随后阅读 verification.md，执行其路由检查，打开产物，并报告源码、HTML、报告 JSON 以及任何未完成的验证。完成条件包括：可编辑源码、成功导出，以及每个必需验证通过的证据。反馈应应用到源码并重新导出。

适用场景 适用于需要解释系统、代码变更、计划或数据的场景，包括但不限于：React 工作区与可复用组件、可寻址场景动效、图表或定量数据、图表与架构、实施计划、对比或数据表、幻灯片或演示、交互式 Hairline 图形、动效视频、原生数学或物理动效、ASCII/纹理/3D 模型媒体、参考图转低细节程序化 3D、代码走查、diff 解释、项目回顾。点选标注可阅读 annotate.md；若请求缺少无法推断的实质性选择，可阅读 clarify.md；组件 API 未在所选卡片中显示时，可阅读 mdx-components.md；海报、视频、品牌密集或定制 HTML 工作可阅读 legacy-html.md 及其选择的分支。

编写规则与限制

  • 以 MDX/TSX、图表 JSON 或 Archify JSON 作为唯一事实来源；生成的 HTML 是一次性输出。
  • 优先使用共享组件、语义内容和令牌，而非手工坐标或页面 CSS。
  • 插图阅读 default-explainer-theme.md，跨格式复用共享几何；将严格 Hairline 指针图形与可寻址视频场景隔离。
  • 可复用 React 工作保持场景 → 合成 → 幻灯片 → 视频边界；采样显式时间，单独编写窄布局，并在注册宿主离开时调用 disposeGraphicVideo。
  • 编辑数据故事使用 LieflatChart，快速条形、折线或点比较使用 DataChart；标记必须编码证据，不得为填充模式而虚构记录或数量。
  • 调整字体时阅读 typography.md，通过行宽、分组、字重和间距组合可读文本块。
  • 紧凑支持的布局使用 DiagramCanvas，复杂类型化系统图使用 Archify；图表卡片会路由两者。标签在初始缩放下保持可读：图形中至少 14px，正文中至少 16px；缩小内容前先调整大小或拆分。
  • 紧凑多父依赖、键盘焦点和谱系追踪可发现 dag；其带标签场景和编写的揭示复用现有图形、幻灯片和视频管线，交互列表仍为页面控件。
  • 将事实、标签和视觉编码视为声明，保持可追溯到用户简报或已检查来源；标记不确定性，而非编造理由。
  • 保持可访问性、响应式包容和减少动效行为；可选元数据要求事实状态、序列、来源、所有权或导航。
  • 仅在委托视觉/文字检查可用时使用 delegated-skills.md；仅在分派视觉审查通过时使用 model-routing.md。主线程编排这些通过并消费其证据；具备视觉能力的审查者判断截图。

其他说明 官方文本暂未提供。