菜单
Use when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or state controls.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | axhub-annotation-standalone |
| description | Use when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or state controls. |
在独立 Web 项目中使用 @axhub/annotation 时，用这个技能。它只说明运行时接入：页面已有标注数据，只需要展示 marker、标注面板、目录和状态控件。
| 宿主 | 使用方式 | 文件 |
|---|---|---|
| React | AnnotationViewer 组件 | references/react-example.tsx |
| 普通 HTML / DOM | browser bundle + window.AxhubAnnotation.createAnnotationViewer | references/axhub-annotation.global.js + references/html-example.html |
| 数据源 | AnnotationSourceDocument JSON | references/annotation-source.json |
AnnotationSourceDocument，静态 import 或由宿主 loader 返回。data-annotation-id。@axhub/annotation 并走 ESM。file:// 静态页，优先走 standalone browser bundle，不要求宿主安装 React / ReactDOM / antd。AnnotationViewer 或 ESM createAnnotationViewer。file://、只想打开 HTML 看效果，必须使用 browser bundle，可从本 skill 的 references/axhub-annotation.global.js 或 npm 包 / 本地构建产物里的 dist/browser/axhub-annotation.global.js 复制。window.AxhubAnnotation.createAnnotationViewer(...)。AnnotationViewer。options.currentPageId。route 在 options.onDirectoryRoute 中交给宿主切页。useProtoDevState() 读取 controls 值。sourceReference，指向 source/manifest.json；宿主接入代码不需要生成它。references/axhub-annotation.global.js 复制 browser bundle 到静态资源目录；npm / 本地构建路径为 dist/browser/axhub-annotation.global.js。<script src="./axhub-annotation.global.js"></script>，实际路径按静态资源目录调整。window.AxhubAnnotation.createAnnotationViewer() 创建运行时。getCurrentPageId 返回当前页面。viewer.refresh()。window.__AXHUB_PROTO_DEV__，从 getState() 读值并更新 DOM。file:// 打开，避免依赖跨文件 fetch/import；运行时仍然必须来自 browser bundle。directory.nodes 放 folder / route / markdown / link，不需要 locator。type: "markdown" 目录文档可以直接写 markdown 正文。.md 文件时，可以写 markdownPath，例如 docs/prd-03-status.md；这是构建侧约定，运行时仍读取内联后的 markdown。markdownPath 只用于目录文档，不用于 marker 标注节点。data.nodes[] 放页面 marker，必须有能在宿主页面解析到的 locator。pageId。hasMarkdown: true + markdownMap[node.id]。controls；JSON 里只放可序列化字段。sourceReference 不放在 JSON 数据源里，只描述发布包中的源码清单位置，不内联源码文件。route、markdown、link。@axhub/annotation 的 browser runtime。window.AxhubAnnotation.createAnnotationViewer(...)。data-annotation-id 就加。route 自动跳转；宿主必须在 onDirectoryRoute 里处理。Use when 需要在中国、海外或跨市场场景中开展客户研究、用户研究、VOC、ICP、JTBD、Persona、竞品口碑、购买或流失原因分析，或从访谈、问卷、工单、社区与评论中为需求分析和 PRD 建立客户证据。
面向不熟悉 Git 的产品经理、设计师、运营、文档作者等非技术用户，引导 GitHub/GitLab/Gitee/Bitbucket/自建 Git 平台的仓库初始化、授权、克隆、提交同步、冲突处理、版本恢复和协作交接。
Use when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。
处理 Axhub Commentary 页面侧接入工作流，包括调整面板可编辑项、页面级属性聚合、多方案设计比稿与方案切换，以及页面资源上下文与定位信息补齐。当用户要让页面配合 Axhub Chrome 扩展或 Make 预览环境“能在调整面板改”、按页面统一整理可编辑项、先出多版方向再切换对比，或补页面定位信息以便调试时快速找到当前页和对应实现时使用。
Use when an Axhub prototype URL needs its PRD, directory, annotation context, source handoff, or optional review-report submission, especially for prototype-as-PRD review, agent context gathering, implementation planning, or design/requirements review with Playwright, Browser, Chrome, or an equivalent page evaluator.
Use when an Axhub prototype URL needs its PRD, directory, or annotation context read from window.__AXHUB_ANNOTATION_SOURCE__, especially for prototype-as-PRD review, agent context gathering, or annotation extraction with Playwright, Browser, Chrome, or an equivalent page evaluator.