SuperAPI AI 工具集

microsim-layout-reviewer

智能体与模型

查看项目

更新于 10-16 08:36

技能介绍

用途:MicroSim 指嵌入 iframe、按教育内容标准构建的交互程序(docs/sims/<sim-id>/main.html 加元数据、截图、索引页),实现库不限(p5.js、Mermaid、Chart.js、vis-network、vis-timeline、Leaflet 或手写 HTML/SVG),共同约定是固定高度、无滚动、嵌入 MkDocs 页面。本技能是视觉审查环节:在真实 iframe 高度截图,用 Claude Vision 有目的地看图,并修补渲染错误的源码。

主要能力:捕获指定高度截图;按 references/visual-checklist.md 逐项检查(含 Mermaid、vis-network、Chart.js、Leaflet 的库专属项);对每个 FAIL 依据 references/common-fixes.md 定位根因并做最小修改;重新截图验证;最多 3 轮审查-修补后停止并报告。

使用方式:先解析目标 sim 目录(须含 main.html 与 index.md),确定要修补的源文件;从 index.md 的 iframe height 读取高度(无 iframe 时回退到 JS 中 // CANVAS_HEIGHT: 注释加 2);执行 bk-capture-screenshot <sim-dir> 3 <iframe-height> 生成 <sim-id>.png;用 Read 工具读图交给 Claude Vision 分析;逐项判定 PASS/FAIL/N/A 并引用证据;修补后重截重查。若 bk-capture-screenshot 不在 PATH,应告知用户,不要自写 headless Chrome 封装。

适用场景:新生成 MicroSim 后的主动 QA;用户贴截图说“看起来不对”;iframe 高度正确但布局仍异常;同一 sim 在不同宽度下显示异常。若问题仅是控件在 iframe 底部被裁剪,应先用 microsim-iframe-tester。

限制:不替代 microsim-iframe-tester;不重新设计 sim,布局根本性糟糕时只呈现症状并停止;不修改 index.md frontmatter 中 status: approved 的已批准 sim;iframe 高度相关缺陷应交给 microsim-iframe-tester 与 fix-iframe-heights.py;Claude Vision 非确定性,依赖清单逐项检查;未覆盖的库回退到通用项并记录缺口。报告需列出所用库/源文件、初始缺陷、修改(file:line)、最终状态与所用 Claude Vision 模型版本。