← ClaudeAtlas

annotationlisted

> 原型标注工具。在页面上标注需求说明(字段说明、业务规则、交互逻辑等), 开发人员和产品经理都能看到。标注与 UI 库完全解耦,通过注入专属 class 定位。 触发场景:(1) "标注页面" "生成标注" "添加标注" "原型标注", (2) "给xx页面加标注" "标注xx功能", (3) "注入标注组件" "初始化标注"
iDWong/pm-skills · ★ 1 · AI & Automation · score 74
Install: claude install-skill iDWong/pm-skills
> **⚠️ `.agents/` 是外部资源包路径,本机已不存在**(`Documents/Claude/Product/.agents/` 已删除)。 > 下文凡引用 `.agents/knowledge/`、`.agents/agents/`、`.agents/agent-memory/` 的地方**读不到文件**, > 按以下降级处理,**不要因此中止**: > - `.agents/knowledge/**`(内容规范、质量清单)→ 用本技能 `references/` 下的模板与检查表;两者都缺时按通用工程规范执行并在产出里标注「无内容规范可依」 > - `.agents/agents/*.md`(子 Agent 派发)→ 不派发,由当前会话直接执行该角色的工作 > - `.agents/agent-memory/**`(跨会话记忆)→ 跳过读写,改为在产出里写清本次的决定 > - `.agents/rules/prd-to-srs-gate.md` → **已迁到 `../common/prd-to-srs-gate.md`**(库内权威副本) ## 技能路径解析 `generate-annotations.js` 在技能目录里,而它是**在用户项目根执行**的,相对路径不适用。先解析绝对路径: ```bash resolve_skill() { name="$(printf '%s' "$@")" if [ -n "${CLAUDE_PLUGIN_ROOT:-}" ]; then [ -d "$CLAUDE_PLUGIN_ROOT/skills/$name" ] && { printf '%s' "$CLAUDE_PLUGIN_ROOT/skills/$name"; return 0; } for R in "$CLAUDE_PLUGIN_ROOT"/../*/skills; do [ -d "$R/$name" ] && { printf '%s' "$R/$name"; return 0; } done fi for R in "$HOME/.claude/skills" "${CODEX_HOME:-$HOME/.codex}/skills" "$HOME/.cursor/skills"; do [ -d "$R/$name" ] && { printf '%s' "$R/$name"; return 0; } done echo "未找到技能:$name" >&2; return 1 } ANNO="$(resolve_skill annotation)" ``` # 原型标注工具 ## 核心设计思路 **标注系统与 UI 库完全无关**。流程: ``` 需求文档 → prd-analyzer 提取功能点(不碰代码) ↓ 页面代码 → code-locator 为每个功能点定位 DOM 节点 + 分配唯一 class ↓ 主流程 → 把 class 注入到代码里(Edit 工具)+ 生成标注 JSON(selector 用 .annot-xxx) ↓ 标注组件 → 通过 .annot-xxx 选择器定位,永远精确命中 ``` **不管项目用 Ant Design Vue / Element Plus / Vant / TDesign / Naive UI /