mcpField
E
extract-annotation-source

extract-annotation-source

github.com/lintendo设计与 UI13765 次安装3 天前更新
代码仓库

关于 extract-annotation-source

用于读取 Axhub 原型运行时快照的技能，通过页面 JavaScript 获取注释、目录及可选源码交接信息。适合检查原型上下文；操作限定为只读。

主要功能

  1. 01读取注释运行时快照
  2. 02提取原型目录与 PRD 条目
  3. 03汇总注释字段与图片状态
  4. 04定位可选源码清单

适用场景

  1. 01检查原型页面的批注
  2. 02整理目录中的 PRD 内容
  3. 03报告注释与源码交接信息

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lintendo/axhub-skills --skill extract-annotation-source

安装后在 Claude Code 中输入/extract-annotation-source确认已加载。

附带文件references/review-report-submission.md

详细介绍

提取标注源

从运行时快照中读取 Axhub 原型上下文。请将页面视为只读。

工作流

  1. 使用 Playwright、Browser、Chrome 或其他能够执行页面 JavaScript 的工具，打开指定的原型 URL。
  2. 等待应用渲染完成，然后短暂轮询 window.__AXHUB_ANNOTATION_SOURCE__。
  3. 评估并返回该值。不要修改对象或向 window 写入任何内容。
  4. 如果该值缺失，请报告 URL、页面标题、相关控制台错误，以及未发布标注运行时快照这一情况。
  5. 如果用户要求向 Axhub Make 提交审查报告，请阅读 references/review-report-submission.md。

最简页面评估：

await page.waitForFunction(() => window.__AXHUB_ANNOTATION_SOURCE__, { timeout: 10000 });
const source = await page.evaluate(() => window.__AXHUB_ANNOTATION_SOURCE__);

报告内容

  • source.directory 中的目录 / PRD 大纲。
  • 目录中 type: "markdown" 节点对应的 Markdown 或 PRD 条目。
  • 标注数量及重要节点字段：id、title、pageId、locator、annotationText、aiPrompt、color 和 controls。
  • 若存在，请提供 source.source 中的源代码交接信息。报告 root 和 manifest；需要源代码时，通过 root 读取 manifest 和相关文件。
  • 通过检查 images.length 说明是否附有图像；除非用户要求，否则不要下载图像。

数据结构

type AnnotationSourceRuntimeSnapshot = {
  directory: AnnotationDirectory | null;
  nodes: AnnotationNode[];
  source?: {
    root?: string;
    manifest?: string;
  };
};
  • directory.nodes 是原型树。节点类型包括 folder、route、link 和 markdown。
  • nodes 是完整的标注列表，与当前页面、所选状态和颜色筛选器无关。
  • 每个标注节点都包含 id、index、可选的 title、可选的 pageId、locator、aiPrompt、annotationText、hasMarkdown、color、images、可选的 controls、createdAt 和 updatedAt。
  • source 仅用于发现源代码。在包含源代码发布的 HTML 中，manifest 指向 source/manifest.json；请根据 source.root 解析其中的路径。

评论

支持 Markdown