mcpField
A
axhub-prototype-context

axhub-prototype-context

github.com/lintendoデザイン・UI13742 回インストール3 日前に更新
リポジトリ

axhub-prototype-context について

axhub-prototype-contextは、公開済みプロトタイプのページ構成、PRD、注釈、ソース参照を読み取るAIエージェント向けスキルです。既定では読み取り専用で、依頼に応じてAxhub Makeへレビュー報告を送信できます。

主な機能

  1. 01公開コンテキストスナップショットの取得
  2. 02ディレクトリとPRD項目の整理
  3. 03注釈の項目と件数の抽出
  4. 04画像とソース引き継ぎ情報の確認
  5. 05依頼に応じたレビュー報告の送信

活用シーン

  1. 01注釈付きプロトタイプのレビュー継続
  2. 02制作作業前のページと要件の把握
  3. 03ソースマニフェストから関連ファイルを特定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/lintendo/axhub-skills --skill axhub-prototype-context

インストール後、Claude Code で/axhub-prototype-contextを入力して読み込まれたか確認します。

同梱ファイルreferences/review-report-submission.md

詳細

注釈付きプロトタイプのコンテキスト

注釈付きプロトタイプから公開されたコンテキストを読み取り、AI エージェントがそのページ、PRD、注釈、利用可能なソースを理解したうえで、レビューまたは本番作業を続行できるようにします。ユーザーから Axhub Make にレビュー報告を送信するよう依頼されない限り、ページは読み取り専用として扱います。

ワークフロー

  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 を報告します。ソースが必要な場合は、manifest と関連ファイルを root 経由で読みます。
  • 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 を基準に解決してください。

コメント