mcpField
E
extract-annotation-source

extract-annotation-source

github.com/lintendoDesign & UI13765 installsUpdated 2d ago
Repository

About extract-annotation-source

A skill for reading Axhub prototype context from a runtime snapshot through page JavaScript. It is intended for inspecting annotations and directory data without modifying the page.

Key features

  1. 01Read the annotation runtime snapshot
  2. 02Extract directory and PRD entries
  3. 03Summarize annotation fields and image status
  4. 04Locate an optional source manifest

Use cases

  1. 01Inspect prototype page annotations
  2. 02Collect PRD content from the directory
  3. 03Report annotations and source handoff details

Install

Copy the command and run it in a terminal.

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

After installing, type/extract-annotation-sourcein Claude Code to confirm it loaded.

Bundled filesreferences/review-report-submission.md

Details

From the project README

Extract Annotation Source

Read Axhub prototype context from the runtime snapshot. Treat the page as read-only.

Workflow

  1. Open the requested prototype URL with Playwright, Browser, Chrome, or an equivalent tool that can evaluate page JavaScript.
  2. Wait until the app renders, then poll briefly for window.__AXHUB_ANNOTATION_SOURCE__.
  3. Evaluate and return that value. Do not modify the object or write anything back to window.
  4. If the value is missing, report the URL, page title, relevant console errors, and that the annotation runtime snapshot was not published.
  5. If the user asks to submit a review report back to Axhub Make, read references/review-report-submission.md.

Minimal page evaluation:

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

What To Report

  • Directory / PRD outline from source.directory.
  • Markdown or PRD entries from directory nodes with type: "markdown".
  • Annotation count and the important node fields: id, title, pageId, locator, annotationText, aiPrompt, color, and controls.
  • Source handoff from source.source when present. Report root and manifest; when source is needed, read the manifest and relevant files via root.
  • Mention whether images are attached by checking images.length; do not download images unless the user asks.

Data Shape

type AnnotationSourceRuntimeSnapshot = {
  directory: AnnotationDirectory | null;
  nodes: AnnotationNode[];
  source?: {
    root?: string;
    manifest?: string;
  };
};
  • directory.nodes is the prototype tree. Node types are folder, route, link, and markdown.
  • nodes is the full annotation list, independent of current page, selected state, and color filter.
  • Each annotation node includes id, index, optional title, optional pageId, locator, aiPrompt, annotationText, hasMarkdown, color, images, optional controls, createdAt, and updatedAt.
  • source is only a source-code discovery reference. In HTML published with source included, manifest points to source/manifest.json; resolve its paths relative to source.root.

Comments

Markdown supported