菜单
Generate interactive HTML visualization of team plans. Use after plan is finalized in /team, /team-run, or /team-brainstorm. Creates a visual diagram showing team composition, phase flow, file assignments, and dependency graph. Saves HTML alongside the plan .md file.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use BEFORE any solo/low-blast creative work — designing a feature, component, behavior change, or this harness itself — to turn an idea into an approved design through a lightweight collaborative dialogue. The solo counterpart to /team-brainstorm (which owns multi-file / cross-cutting / product / architecturally-uncertain work). Harness-owned; do NOT invoke any external brainstorming skill.
6-phase verification system (+ an opt-in human comprehension quiz gate) with checkpoint support and pass@k metrics. Use in Phase 4-5 of team workflow, before creating PRs, or after completing feature implementations. Covers build, type check, lint, test, security scan, diff review, a human-understanding gate, checkpoints, and evaluation metrics.
Multi-agent team workflow orchestration with 5 phases, escalation loops, and TDD enforcement. Use when /team or /team-run commands are invoked. Coordinates Team Leader, Architects (FE/BE/Infra), UI/UX Master, Designers (TDD developers), and Testers through Planning → UI/UX → Gate → Implementation → Verification → Final Review.
Model routing (incl. per-agent Workflow / ultracode routing), effort levels, context efficiency, and compaction strategy. Use when spawning agents, authoring Workflow fan-outs, selecting models, choosing effort levels, or managing context window pressure.
Git worktree management, cascade method for multiple instances, and scaling guidelines. Use when planning parallel agent work, managing worktrees, or deciding when to scale instances.
Analyze project structure, conventions, and patterns to generate a project profile. Use when /team-init is invoked or when team agents need to understand the codebase. Scans package.json, config files, source code patterns, and test setup to produce structured profiles in .claude/project-profile/.
| name | plan-visualizer |
| description | Generate interactive HTML visualization of team plans. Use after plan is finalized in /team, /team-run, or /team-brainstorm. Creates a visual diagram showing team composition, phase flow, file assignments, and dependency graph. Saves HTML alongside the plan .md file. |
Generate an interactive HTML diagram from a finalized team plan. The HTML file is saved in the same directory as the plan .md file.
/team, /team-run, or /team-brainstormThe orchestrator provides:
_docs/active/planning/<created>/<created>-<topic>-plan.md)Save HTML file at: _docs/active/planning/<created>/<created>-<topic>-plan.visual.html
Add link in plan .md under the title:
# [Task Name]
> Status: Planning
> [View Plan Diagram](./<created>-<topic>-plan.visual.html)
Generate a self-contained HTML file (no external dependencies) with these sections:
/* Color scheme */
--bg: #0a0a0a;
--surface: #1a1a2e;
--border: #2a2a4a;
--text: #e0e0e0;
--text-muted: #888;
/* Role colors */
--leader: #ffd700;
--arch-fe: #7fff7f;
--arch-be: #7fbfff;
--arch-infra: #ff7f7f;
--uiux: #ff7fff;
--designer: #ffbf7f;
--tester: #7fffff;
/* Phase colors */
--phase-planning: #ffd700;
--phase-uiux: #ff7fff;
--phase-impl: #ffbf7f;
--phase-verify: #7fffff;
--phase-security: #ff7f7f;
--escalation: #ff4444;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Task Name] — Team Plan</title>
<style>
/* Dark theme, self-contained CSS */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
.header { margin-bottom: 32px; }
.header h1 { font-size: 28px; margin-bottom: 8px; }
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.section { margin-bottom: 32px; }
.section h2 {
font-size: 18px;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.role-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
text-align: center;
}
.role-card.inactive { opacity: 0.4; }
.phase-flow {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 20px 0;
}
.phase-node {
padding: 12px 20px;
border-radius: 8px;
border: 2px solid;
font-size: 13px;
font-weight: bold;
}
.phase-arrow { color: var(--text-muted); font-size: 20px; }
.phase-node.conditional { border-style: dashed; }
.phase-node.gate {
transform: rotate(0deg);
border-radius: 4px;
border-style: dashed;
}
.file-table { width: 100%; border-collapse: collapse; }
.file-table th, .file-table td {
padding: 8px 12px;
border: 1px solid var(--border);
text-align: left;
font-size: 13px;
}
.file-table th { background: var(--surface); }
.risk-item {
padding: 12px;
margin-bottom: 8px;
border-radius: 6px;
border-left: 4px solid;
}
.risk-critical { border-color: #ff4444; background: #1a0a0a; }
.risk-high { border-color: #ff8844; background: #1a1a0a; }
.risk-medium { border-color: #ffcc44; background: #1a1a0a; }
.dep-graph {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
min-height: 200px;
}
.dep-node {
display: inline-block;
padding: 8px 16px;
border-radius: 6px;
margin: 4px;
font-size: 12px;
border: 1px solid;
}
.meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>[Task Name]</h1>
<span class="status-badge" style="background: [status-color]; color: #000;">
[STATUS]
</span>
<p style="margin-top: 8px; color: var(--text-muted);">[Task description]</p>
</div>
<!-- Section 1: Team Composition -->
<div class="section">
<h2>Team Composition</h2>
<div class="team-grid">
<!-- Active roles get full opacity, inactive get .inactive class -->
<div class="role-card" style="border-color: var(--leader);">
<div style="font-size: 24px;">👑</div>
<div style="color: var(--leader); font-weight: bold;">Leader</div>
<div style="font-size: 11px; color: var(--text-muted);">Coordination</div>
</div>
<!-- Repeat for each role... -->
</div>
</div>
<!-- Section 2: Phase Flow -->
<div class="section">
<h2>Workflow Phases</h2>
<div class="phase-flow">
<!-- Phases as colored nodes connected by arrows -->
</div>
</div>
<!-- Section 3: File Assignment -->
<div class="section">
<h2>File Assignment</h2>
<table class="file-table">
<thead><tr><th>Designer</th><th>Files</th><th>Scope</th></tr></thead>
<tbody>
<!-- Rows per designer -->
</tbody>
</table>
</div>
<!-- Section 4: Dependency Graph -->
<div class="section">
<h2>Dependencies</h2>
<div class="dep-graph">
<!-- Component/store/API nodes with arrows -->
</div>
</div>
<!-- Section 5: Risks (if available) -->
<div class="section">
<h2>Risk Summary</h2>
<!-- Risk items with severity coloring -->
</div>
<div class="meta">
Generated by AI Harness Team Workflow · [timestamp]
</div>
</body>
</html>
[View Plan Diagram](./filename.visual.html) linkGenerate after Step 7 (Save plan). This is the final output.
Generate after Phase 1 + Phase 2 (before Leader Gate). Update after each phase completion.
Generate after Phase 1. Update after Phase 3, 4, 5 completion with progress indicators.
When escalation causes re-planning, regenerate the HTML with: