메뉴
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: