Skill

tr-review-visualizer

From wolfins

TR 评审可视化：生成独立 HTML 报告文件，Notion 风格单页布局，支持结构化专家评审、交付件折叠和评审建议结论。

Popularity

Stars

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/wolfins:tr-review-visualizer

Not user invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

本技能由 `ipd-orchestrator` 在硬门控之前调用，负责生成 TR 准出报告的独立 HTML 可视化页面。

Supporting Files

report-template.htmlscripts/helper.jsscripts/server.cjsscripts/start-server.shscripts/stop-server.sh

SKILL.md

326 lines · ~2.1k tokens

Stats

LanguageHTML

Stars1

MaintenanceExcellent

Last CommitMay 11, 2026

Actions

View Source View Plugin View on GitHub View README

Stats

Actions

TR 评审可视化技能

本技能由 ipd-orchestrator 在硬门控之前调用，负责生成 TR 准出报告的独立 HTML 可视化页面。

输出格式

生成完整的独立 HTML 文件（包含 <!DOCTYPE html> 和所有内联 CSS），基于 report-template.html 模板。每个报告是一个自包含文件，可直接在浏览器打开。

使用流程

主流程（文件生成）

读取 report-template.html 作为基础模板
替换模板中的占位符：、、 等
根据当前 TR 阶段生成各章节 HTML
将完整 HTML 写入 docs/wolfins/{IR}/reviews/tr{n}-report.html
向用户展示文件路径

可选服务器模式

如果需要实时预览：

运行 bash skills/tr-review-visualizer/scripts/start-server.sh --project-dir {项目目录} --ir-id {IR-ID}
将 HTML 同时写入 .wolfins/{IR-ID}/content/tr{n}-report.html
向用户展示 URL
用户 PASS/FAIL 后停止服务器

归档结构

docs/wolfins/{IR}/reviews/
├── tr1-report.html
├── tr2-report.html
├── tr3-report.html
├── tr4-report.html
└── tr5-report.html

HTML 生成规范

模板占位符替换

占位符	替换内容
`<!-- TITLE -->`	`{IR-ID} TR{N} 评审报告`
`<!-- IR_ID -->`	IR 编号
`<!-- DATE -->`	评审日期
`<!-- STATUS_BADGE -->`	评审状态 badge
`<!-- HERO_TITLE -->`	如 "TR1 产品需求与概念评审"
`<!-- HERO_SUBTITLE -->`	IR 描述摘要
`<!-- HERO_META -->`	参与角色 RACI 标签
`<!-- CONCLUSION_CARD -->`	评审建议结论卡片
`<!-- CONTENT -->`	各章节 HTML 内容

评审建议结论卡片

每个报告必须在 Hero 下方包含评审建议结论卡片：

<div class="conclusion-card conclusion-pass">
  <div class="conclusion-header">
    <span class="status-badge large pass">建议通过</span>
    <span class="conclusion-title">评审建议结论</span>
  </div>
  <p class="conclusion-reasoning">
    综合各角色评审意见，所有关键交付件满足质量要求，风险可控，建议通过 TR{N} 评审。
  </p>
  <ul class="conclusion-conditions">
    <li>前提条件1</li>
  </ul>
</div>

结论类型：

conclusion-pass：建议通过（绿色左边框）
conclusion-conditional：有条件通过（黄色左边框）
conclusion-fail：建议不通过（红色左边框）

章节分隔

报告各章节使用 .section-divider 垂直分隔，所有章节直接展开显示：

<div class="section-divider"><h2>专家评审</h2></div>
<!-- 章节内容 -->

<div class="section-divider"><h2>交付件</h2></div>
<!-- 章节内容 -->

专家评审卡片（结构化）

每个参与角色的评审意见使用 .agent-review-card。评审卡片必须包含以下 5 个结构化字段，确保评审意见严谨、具体、可追溯：

字段	必填	格式	说明
评审范围	是	`<p>` 一句话	本次评审覆盖的内容范围
详细发现	是	`<ol>` 有序列表	逐条列出具体发现，每条包含观察和判断
风险点	是	`<ul>` 无序列表	识别的风险项，每条含风险描述和影响范围
建议	是	`<ol>` 有序列表	可操作的具体建议，每条含责任人和时间要求
遗留问题	条件	`<ul>` 无序列表	需后续阶段关闭的问题（无遗留时省略）

<div class="agent-review-card">
  <div class="review-header">
    <span class="role-name">评审组长 <span class="raci-tag raci-c">C</span></span>
    <span class="status-badge pass">PASS</span>
  </div>
  <div class="review-field">
    <div class="field-label">评审范围</div>
    <p>对 IR 文档的 8 条验收标准进行完整性和可追溯性评审</p>
  </div>
  <div class="review-field">
    <div class="field-label">详细发现</div>
    <ol>
      <li>8 条验收标准全部覆盖，每条 AC 可追溯到对应 SR — 通过</li>
      <li>AC-3 并行 Agent 数量未明确下限，建议补充量化指标 — 待补充</li>
    </ol>
  </div>
  <div class="review-field">
    <div class="field-label">风险点</div>
    <ul>
      <li>AC-5 端到端流程依赖 Agent 输出稳定性，存在 LLM 输出不可控风险（影响：AC-3, AC-5）</li>
    </ul>
  </div>
  <div class="review-field">
    <div class="field-label">建议</div>
    <ol>
      <li>AC-3 补充最小并行 Agent 数量 ≥ 3（责任人：技术负责人，TR2 入口前关闭）</li>
      <li>TR3 前完成多路并发渲染原型验证（责任人：技术负责人）</li>
    </ol>
  </div>
  <div class="review-field">
    <div class="field-label">遗留问题</div>
    <ul>
      <li>PDT 经理提出的优先级调整建议需用户确认（TR2 入口前关闭）</li>
    </ul>
  </div>
</div>

评审意见质量要求：

详细发现：必须具体到某条 AC/SR/交付件，不能泛泛而谈。格式：「XX 指标/内容 — 通过/待补充/不通过」
风险点：每条必须包含「风险描述 + 影响范围」（括号内标注影响的 AC/SR 编号）
建议：每条必须可操作，包含「具体动作 + 责任人 + 关闭时间」
遗留问题：必须可在后续 TR 阶段关闭，附关闭条件

评审结论取值：PASS / CONDITIONAL_PASS / FAIL

交付件展示规则

每个交付件使用 .deliverable-card。

内容 ≤ 20 行： 直接内嵌展示，不折叠。内容以渲染后的 HTML 格式嵌入（不是原始 markdown 文本）。

内容 > 20 行： 生成 3-5 句摘要，原文以渲染后的 HTML 格式折叠在 <details> 中：

<div class="deliverable-card">
  <div class="deliverable-header">
    <span class="deliverable-title">技术可行性评估</span>
    <span class="status-badge pass">完成</span>
  </div>
  <p class="deliverable-summary">
    3-5 句 AI 生成的摘要...
  </p>
  <div class="deliverable-original">
    <details>
      <summary>展开原文</summary>
      <div class="md-content">
        <!-- 交付件内容必须渲染为 HTML，不能使用 <pre> 包裹原始 markdown -->
        <!-- 将 markdown 标题转为 <h2>/<h3>，列表转为 <ol>/<ul>，表格转为 <table> 等 -->
        <h2>一、验收标准逐条可行性评估</h2>
        <table>
          <thead><tr><th>#</th><th>验收标准</th><th>可行性</th></tr></thead>
          <tbody><tr><td>1</td><td>...</td><td>可行</td></tr></tbody>
        </table>
        <h3>R-01: 多路流式响应并发渲染抖动</h3>
        <p>问题本质：...</p>
        <ol>
          <li>渲染节流：利用 Ink 的 maxFps 选项...</li>
          <li>增量渲染：...</li>
        </ol>
      </div>
    </details>
  </div>
</div>

Markdown → HTML 渲染规则：

## 标题 → <h2>标题</h2>（已有 .md-content h2 样式）
### 标题 → <h3>标题</h3>
段落 → <p>
有序列表 → <ol><li>
无序列表 → <ul><li>
表格 → <table><thead><tbody>（已有表格样式）
**粗体** → <strong>粗体</strong>
`代码` → <code>代码</code>
> 引用 → <blockquote>
禁止使用 <pre> 包裹整个交付件内容 — <pre> 仅用于代码片段

重要：

不再生成独立子页面。所有交付件内嵌在主报告中
交付件内容必须渲染为 HTML，提供良好的阅读体验
折叠区域内的长内容设置 max-height: 600px; overflow-y: auto

CSS 类名速查

类名	用途
`.section`	章节容器
`.section-label`	小号大写标签
`.cards` / `.card`	卡片网格/单个卡片
`.metrics` / `.metric-card`	指标展示
`.status-badge`	状态标签 (.pass/.fail/.warn/.draft/.large)
`.raci-tag`	RACI 角色标签 (.raci-c/.raci-r/.raci-a/.raci-s)
`.agent-review-card`	专家评审卡片
`.review-header`	评审卡片头部
`.role-name`	角色名称
`.review-field`	评审字段
`.field-label`	字段标签
`.deliverable-card`	交付件卡片
`.deliverable-header`	交付件头部
`.deliverable-title`	交付件标题
`.deliverable-summary`	交付件摘要
`.deliverable-original`	交付件原文折叠区
`.md-content`	渲染后的 Markdown 内容（标题、列表、表格等 HTML 元素）
`.conclusion-card`	评审建议结论卡片
`.dag-container`	Mermaid DAG 容器
`.bar-chart` / `.bar-group` / `.bar`	柱状图
`.batches` / `.batch`	开发批次
`.trace-table`	RTM 追溯表
`.ga-card`	GA 建议 (.go/.no-go)
`.section-divider`	章节分隔标题

TR1 报告章节

读取：docs/wolfins/{IR}/ir.md、docs/wolfins/{IR}/reviews/tr1-report.md

内容组织原则： 结论先行 → 评审意见 → 关键数据摘要 → 交付件详情 → 遗留问题

1. 评审建议结论 → .conclusion-card（Hero 下方，最醒目位置）
2. 各角色评审意见 → .agent-review-card（按 RACI 角色 C→R→A→S 排序）
3. 验收标准摘要 → table（AC 编号、描述、优先级、可行性、可测性）
4. 技术栈成熟度 → table
5. 风险汇总 → .metrics（高/中/低计数） + table
6. 测试工作量估算 → .metrics + table（SR 列必须包含摘要列）
7. 交付件详情 → .deliverable-card（长内容折叠，渲染为 HTML）

TR2 报告章节

读取：docs/wolfins/{IR}/dependency-graph.md、docs/wolfins/{IR}/rtm.md、docs/wolfins/{IR}/rbt-strategy.md、SR 各目录下 sr.md

内容组织原则： 结论先行 → 评审意见 → SR 架构 → 质量追溯 → 交付件详情

1. 评审建议结论 → .conclusion-card
2. 各角色评审意见 → .agent-review-card（按 RACI 排序）
3. SR 列表 → table（含 SR ID、标题、摘要、状态、依赖列）
4. 依赖 DAG → .dag-container + Mermaid
5. 开发批次 → .batches
6. RBT 策略概要 → table
7. RTM 追溯 → .trace-table
8. 交付件详情 → .deliverable-card

TR3 报告章节

读取：docs/wolfins/{IR}/reviews/tr3-report.md、docs/wolfins/{IR}/reviews/tr3-architecture.md

内容组织原则： 结论先行 → 评审意见 → 架构概览 → 技术选型 → 交付件详情

1. 评审建议结论 → .conclusion-card
2. 各角色评审意见 → .agent-review-card（按 RACI 排序）
3. 架构图 → .dag-container + Mermaid
4. 技术栈选型 → table
5. 模块划分 → .cards 或 table
6. SR 映射关系 → table
7. 交付件详情 → .deliverable-card

TR4 报告章节

读取：docs/wolfins/{IR}/SR-*/sr-acceptance.md、docs/wolfins/{IR}/SR-*/ut-report.md

内容组织原则： 结论先行 → 评审意见 → 验收汇总 → 质量指标 → 交付件详情

1. 评审建议结论 → .conclusion-card
2. 各角色评审意见 → .agent-review-card（按 RACI 排序）
3. SR 验收汇总 → table（SR ID、标题、摘要、状态、UT 覆盖率）
4. 整体质量指标 → .metrics + .metric-card
5. 测试覆盖率 → .bar-chart
6. 集成测试准备就绪 → .status-badge.large
7. 交付件详情 → .deliverable-card

TR5 报告章节

读取：docs/wolfins/{IR}/reviews/test-report.md、docs/wolfins/{IR}/reviews/defect-closure-report.md、docs/wolfins/{IR}/rtm.md

内容组织原则： GA 结论 → 评审意见 → 测试结果 → 缺陷关闭 → 质量追溯 → 交付件详情

1. GA 建议 → .ga-card.go 或 .ga-card.no-go（放在最醒目位置）
2. 评审建议结论 → .conclusion-card
3. 各角色评审意见 → .agent-review-card（按 RACI 排序）
4. 测试执行概况 → .metrics + .metric-card
5. 按 SR 测试结果 → .bar-chart
6. 缺陷统计 → .metrics + table
7. RTM 最终追溯 → .trace-table
8. 交付件详情 → .deliverable-card

错误处理

如果服务启动失败，回退到纯文件生成模式。HTML 文件直接写入 docs/wolfins/{IR}/reviews/。向用户提示文件路径。

tr-review-visualizer

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

tr-review-visualizer

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

TR 评审可视化技能

输出格式

使用流程

主流程（文件生成）

可选服务器模式

归档结构

HTML 生成规范

模板占位符替换

评审建议结论卡片

章节分隔

专家评审卡片（结构化）

交付件展示规则

CSS 类名速查

TR1 报告章节

TR2 报告章节

TR3 报告章节

TR4 报告章节

TR5 报告章节

错误处理

Similar Skills

TR 评审可视化技能

输出格式

使用流程

主流程（文件生成）

可选服务器模式

归档结构

HTML 生成规范

模板占位符替换

评审建议结论卡片

章节分隔

专家评审卡片（结构化）

交付件展示规则

CSS 类名速查

TR1 报告章节

TR2 报告章节

TR3 报告章节

TR4 报告章节

TR5 报告章节

错误处理

Similar Skills