@thierrynakoa/fire-flow 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +64 -0
- package/ARCHITECTURE-DIAGRAM.md +440 -0
- package/COMMAND-REFERENCE.md +172 -0
- package/DOMINION-FLOW-OVERVIEW.md +421 -0
- package/LICENSE +21 -0
- package/QUICK-START.md +351 -0
- package/README.md +398 -0
- package/TROUBLESHOOTING.md +264 -0
- package/agents/fire-codebase-mapper.md +484 -0
- package/agents/fire-debugger.md +535 -0
- package/agents/fire-executor.md +949 -0
- package/agents/fire-fact-checker.md +276 -0
- package/agents/fire-learncoding-explainer.md +237 -0
- package/agents/fire-learncoding-walker.md +147 -0
- package/agents/fire-planner.md +675 -0
- package/agents/fire-project-researcher.md +155 -0
- package/agents/fire-research-synthesizer.md +166 -0
- package/agents/fire-researcher.md +723 -0
- package/agents/fire-reviewer.md +499 -0
- package/agents/fire-roadmapper.md +203 -0
- package/agents/fire-verifier.md +880 -0
- package/bin/cli.js +208 -0
- package/commands/fire-0-orient.md +476 -0
- package/commands/fire-1-new.md +281 -0
- package/commands/fire-1a-discuss.md +455 -0
- package/commands/fire-2-plan.md +527 -0
- package/commands/fire-3-execute.md +1303 -0
- package/commands/fire-4-verify.md +845 -0
- package/commands/fire-5-handoff.md +515 -0
- package/commands/fire-6-resume.md +501 -0
- package/commands/fire-7-review.md +409 -0
- package/commands/fire-add-new-skill.md +598 -0
- package/commands/fire-analytics.md +499 -0
- package/commands/fire-assumptions.md +78 -0
- package/commands/fire-autonomous.md +528 -0
- package/commands/fire-brainstorm.md +413 -0
- package/commands/fire-complete-milestone.md +270 -0
- package/commands/fire-dashboard.md +375 -0
- package/commands/fire-debug.md +663 -0
- package/commands/fire-discover.md +616 -0
- package/commands/fire-double-check.md +460 -0
- package/commands/fire-execute-plan.md +182 -0
- package/commands/fire-learncoding.md +242 -0
- package/commands/fire-loop-resume.md +272 -0
- package/commands/fire-loop-stop.md +198 -0
- package/commands/fire-loop.md +1168 -0
- package/commands/fire-map-codebase.md +313 -0
- package/commands/fire-new-milestone.md +356 -0
- package/commands/fire-reflect.md +235 -0
- package/commands/fire-research.md +246 -0
- package/commands/fire-search.md +330 -0
- package/commands/fire-security-audit-repo.md +293 -0
- package/commands/fire-security-scan.md +484 -0
- package/commands/fire-session-summary.md +252 -0
- package/commands/fire-skills-diff.md +506 -0
- package/commands/fire-skills-history.md +388 -0
- package/commands/fire-skills-rollback.md +408 -0
- package/commands/fire-skills-sync.md +470 -0
- package/commands/fire-test.md +520 -0
- package/commands/fire-todos.md +335 -0
- package/commands/fire-transition.md +186 -0
- package/commands/fire-update.md +312 -0
- package/commands/fire-verify-uat.md +146 -0
- package/commands/fire-vuln-scan.md +493 -0
- package/hooks/hooks.json +16 -0
- package/hooks/run-hook.cmd +69 -0
- package/hooks/run-hook.sh +8 -0
- package/hooks/run-session-end.cmd +49 -0
- package/hooks/run-session-end.sh +7 -0
- package/hooks/session-end.sh +90 -0
- package/hooks/session-start.sh +111 -0
- package/package.json +52 -0
- package/plugin.json +7 -0
- package/references/auto-skill-extraction.md +136 -0
- package/references/behavioral-directives.md +365 -0
- package/references/blocker-tracking.md +155 -0
- package/references/checkpoints.md +165 -0
- package/references/circuit-breaker.md +410 -0
- package/references/context-engineering.md +587 -0
- package/references/decision-time-guidance.md +289 -0
- package/references/error-classification.md +326 -0
- package/references/execution-mode-intelligence.md +242 -0
- package/references/git-integration.md +217 -0
- package/references/honesty-protocols.md +304 -0
- package/references/integration-architecture.md +470 -0
- package/references/issue-to-pr-pipeline.md +150 -0
- package/references/metrics-and-trends.md +234 -0
- package/references/playwright-e2e-testing.md +326 -0
- package/references/questioning.md +125 -0
- package/references/research-improvements.md +110 -0
- package/references/skills-usage-guide.md +429 -0
- package/references/tdd.md +131 -0
- package/references/testing-enforcement.md +192 -0
- package/references/ui-brand.md +383 -0
- package/references/validation-checklist.md +456 -0
- package/references/verification-patterns.md +187 -0
- package/references/warrior-principles.md +173 -0
- package/skills-library/SKILLS-INDEX.md +588 -0
- package/skills-library/_general/frontend/html-visual-reports.md +292 -0
- package/skills-library/_general/methodology/debug-swarm-researcher-escape-hatch.md +240 -0
- package/skills-library/_general/methodology/learncoding-agentic-pattern.md +114 -0
- package/skills-library/_general/methodology/shell-autonomous-loop-fixplan.md +238 -0
- package/skills-library/basics/api-rest-basics.md +162 -0
- package/skills-library/basics/env-variables.md +96 -0
- package/skills-library/basics/error-handling-basics.md +125 -0
- package/skills-library/basics/git-commit-conventions.md +106 -0
- package/skills-library/basics/readme-template.md +108 -0
- package/skills-library/common-tasks/async-await-patterns.md +157 -0
- package/skills-library/common-tasks/auth-jwt-basics.md +164 -0
- package/skills-library/common-tasks/database-schema-design.md +166 -0
- package/skills-library/common-tasks/file-upload-basics.md +166 -0
- package/skills-library/common-tasks/form-validation.md +159 -0
- package/skills-library/debugging/FAILURE_TAXONOMY_CLASSIFICATION.md +117 -0
- package/skills-library/debugging/THREE_AGENT_HYPOTHESIS_DEBUGGING.md +86 -0
- package/skills-library/methodology/BREATH_BASED_PARALLEL_EXECUTION.md +678 -0
- package/skills-library/methodology/CONFIDENCE_GATED_EXECUTION.md +243 -0
- package/skills-library/methodology/EVIDENCE_BASED_VALIDATION.md +308 -0
- package/skills-library/methodology/MULTI_PERSPECTIVE_CODE_REVIEW.md +330 -0
- package/skills-library/methodology/PATH_VERIFICATION_GATE.md +211 -0
- package/skills-library/methodology/REFLEXION_MEMORY_PATTERN.md +183 -0
- package/skills-library/methodology/RESEARCH_BACKED_WORKFLOW_UPGRADE.md +263 -0
- package/skills-library/methodology/SABBATH_REST_PATTERN.md +267 -0
- package/skills-library/methodology/STONE_AND_SCAFFOLD.md +220 -0
- package/skills-library/performance/cache-augmented-generation.md +172 -0
- package/skills-library/quality-safety/debugging-steps.md +147 -0
- package/skills-library/quality-safety/deployment-checklist.md +155 -0
- package/skills-library/quality-safety/security-checklist.md +204 -0
- package/skills-library/quality-safety/testing-basics.md +180 -0
- package/skills-library/security/agent-security-scanner.md +445 -0
- package/skills-library/specialists/api-architecture/api-designer.md +49 -0
- package/skills-library/specialists/api-architecture/graphql-architect.md +49 -0
- package/skills-library/specialists/api-architecture/mcp-developer.md +51 -0
- package/skills-library/specialists/api-architecture/microservices-architect.md +50 -0
- package/skills-library/specialists/api-architecture/websocket-engineer.md +48 -0
- package/skills-library/specialists/backend/django-expert.md +52 -0
- package/skills-library/specialists/backend/fastapi-expert.md +52 -0
- package/skills-library/specialists/backend/laravel-specialist.md +52 -0
- package/skills-library/specialists/backend/nestjs-expert.md +51 -0
- package/skills-library/specialists/backend/rails-expert.md +53 -0
- package/skills-library/specialists/backend/spring-boot-engineer.md +56 -0
- package/skills-library/specialists/data-ml/fine-tuning-expert.md +48 -0
- package/skills-library/specialists/data-ml/ml-pipeline.md +47 -0
- package/skills-library/specialists/data-ml/pandas-pro.md +47 -0
- package/skills-library/specialists/data-ml/rag-architect.md +51 -0
- package/skills-library/specialists/data-ml/spark-engineer.md +47 -0
- package/skills-library/specialists/frontend/angular-architect.md +52 -0
- package/skills-library/specialists/frontend/flutter-expert.md +51 -0
- package/skills-library/specialists/frontend/nextjs-developer.md +54 -0
- package/skills-library/specialists/frontend/react-native-expert.md +50 -0
- package/skills-library/specialists/frontend/vue-expert.md +51 -0
- package/skills-library/specialists/infrastructure/chaos-engineer.md +74 -0
- package/skills-library/specialists/infrastructure/cloud-architect.md +70 -0
- package/skills-library/specialists/infrastructure/database-optimizer.md +64 -0
- package/skills-library/specialists/infrastructure/devops-engineer.md +70 -0
- package/skills-library/specialists/infrastructure/kubernetes-specialist.md +52 -0
- package/skills-library/specialists/infrastructure/monitoring-expert.md +70 -0
- package/skills-library/specialists/infrastructure/sre-engineer.md +70 -0
- package/skills-library/specialists/infrastructure/terraform-engineer.md +51 -0
- package/skills-library/specialists/languages/cpp-pro.md +74 -0
- package/skills-library/specialists/languages/csharp-developer.md +69 -0
- package/skills-library/specialists/languages/dotnet-core-expert.md +54 -0
- package/skills-library/specialists/languages/golang-pro.md +51 -0
- package/skills-library/specialists/languages/java-architect.md +49 -0
- package/skills-library/specialists/languages/javascript-pro.md +68 -0
- package/skills-library/specialists/languages/kotlin-specialist.md +68 -0
- package/skills-library/specialists/languages/php-pro.md +49 -0
- package/skills-library/specialists/languages/python-pro.md +52 -0
- package/skills-library/specialists/languages/react-expert.md +51 -0
- package/skills-library/specialists/languages/rust-engineer.md +50 -0
- package/skills-library/specialists/languages/sql-pro.md +56 -0
- package/skills-library/specialists/languages/swift-expert.md +69 -0
- package/skills-library/specialists/languages/typescript-pro.md +51 -0
- package/skills-library/specialists/platform/atlassian-mcp.md +52 -0
- package/skills-library/specialists/platform/embedded-systems.md +53 -0
- package/skills-library/specialists/platform/game-developer.md +53 -0
- package/skills-library/specialists/platform/salesforce-developer.md +53 -0
- package/skills-library/specialists/platform/shopify-expert.md +49 -0
- package/skills-library/specialists/platform/wordpress-pro.md +49 -0
- package/skills-library/specialists/quality/code-documenter.md +51 -0
- package/skills-library/specialists/quality/code-reviewer.md +67 -0
- package/skills-library/specialists/quality/debugging-wizard.md +51 -0
- package/skills-library/specialists/quality/fullstack-guardian.md +51 -0
- package/skills-library/specialists/quality/legacy-modernizer.md +50 -0
- package/skills-library/specialists/quality/playwright-expert.md +65 -0
- package/skills-library/specialists/quality/spec-miner.md +56 -0
- package/skills-library/specialists/quality/test-master.md +65 -0
- package/skills-library/specialists/security/secure-code-guardian.md +55 -0
- package/skills-library/specialists/security/security-reviewer.md +53 -0
- package/skills-library/specialists/workflow/architecture-designer.md +53 -0
- package/skills-library/specialists/workflow/cli-developer.md +70 -0
- package/skills-library/specialists/workflow/feature-forge.md +65 -0
- package/skills-library/specialists/workflow/prompt-engineer.md +54 -0
- package/skills-library/specialists/workflow/the-fool.md +62 -0
- package/templates/ASSUMPTIONS.md +125 -0
- package/templates/BLOCKERS.md +73 -0
- package/templates/DECISION_LOG.md +116 -0
- package/templates/UAT.md +96 -0
- package/templates/blueprint.md +94 -0
- package/templates/brainstorm.md +185 -0
- package/templates/conscience.md +92 -0
- package/templates/fire-handoff.md +159 -0
- package/templates/metrics.md +67 -0
- package/templates/phase-prompt.md +142 -0
- package/templates/record.md +131 -0
- package/templates/review-report.md +117 -0
- package/templates/skills-index.md +157 -0
- package/templates/verification.md +149 -0
- package/templates/vision.md +79 -0
- package/validation-config.yml +793 -0
- package/version.json +7 -0
- package/workflows/execute-phase.md +732 -0
- package/workflows/handoff-session.md +678 -0
- package/workflows/new-project.md +578 -0
- package/workflows/plan-phase.md +592 -0
- package/workflows/verify-phase.md +874 -0
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: html-visual-reports
|
|
3
|
+
category: frontend
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
contributed: 2026-03-06
|
|
6
|
+
contributor: dominion-flow
|
|
7
|
+
last_updated: 2026-03-06
|
|
8
|
+
contributors:
|
|
9
|
+
- dominion-flow
|
|
10
|
+
tags: [html, css, visualization, reports, dashboards, data-tables, diagrams, self-contained]
|
|
11
|
+
difficulty: medium
|
|
12
|
+
usage_count: 0
|
|
13
|
+
success_rate: 100
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
# HTML Visual Reports & Dashboards
|
|
17
|
+
|
|
18
|
+
## Problem
|
|
19
|
+
|
|
20
|
+
When presenting data to stakeholders — competitive analyses, audit results, feature matrices, architecture overviews — plain text tables in the terminal are hard to read and impossible to share. Screenshots of terminal output look unprofessional. External tools (Google Slides, Figma) require context-switching and manual data entry.
|
|
21
|
+
|
|
22
|
+
Symptoms:
|
|
23
|
+
- ASCII box-drawing tables with 10+ rows are unreadable
|
|
24
|
+
- Stakeholders ask "can you put that in a slide?"
|
|
25
|
+
- Architecture diagrams drawn with text characters lack clarity
|
|
26
|
+
- Data comparisons lose impact without color-coded status indicators
|
|
27
|
+
- No way to share Claude's analysis output as a professional artifact
|
|
28
|
+
|
|
29
|
+
## Solution Pattern
|
|
30
|
+
|
|
31
|
+
Generate **self-contained HTML files** that open directly in any browser. No build step, no dependencies, no server — just a single `.html` file with inline CSS, Google Fonts via CDN, and optional JavaScript for interactivity. The file IS the deliverable.
|
|
32
|
+
|
|
33
|
+
### Core Architecture
|
|
34
|
+
|
|
35
|
+
Every report follows this structure:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html lang="en">
|
|
40
|
+
<head>
|
|
41
|
+
<meta charset="UTF-8">
|
|
42
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
43
|
+
<title>Descriptive Title</title>
|
|
44
|
+
<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">
|
|
45
|
+
<style>
|
|
46
|
+
/* CSS custom properties for theming */
|
|
47
|
+
/* Full layout, components, animations — all inline */
|
|
48
|
+
</style>
|
|
49
|
+
</head>
|
|
50
|
+
<body>
|
|
51
|
+
<!-- Semantic HTML: sections, headings, tables, inline SVG -->
|
|
52
|
+
<!-- Optional: <script> for Mermaid, scroll spy, or Chart.js -->
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Design System (CSS Custom Properties)
|
|
58
|
+
|
|
59
|
+
Every report defines a complete palette via CSS variables. This enables dark/light theme support and consistent styling:
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
:root {
|
|
63
|
+
--bg: #0a0e17;
|
|
64
|
+
--surface: #111827;
|
|
65
|
+
--surface2: #1a2236;
|
|
66
|
+
--border: rgba(255, 255, 255, 0.06);
|
|
67
|
+
--text: #e2e8f0;
|
|
68
|
+
--text-dim: #64748b;
|
|
69
|
+
--cyan: #22d3ee;
|
|
70
|
+
--cyan-dim: rgba(34, 211, 238, 0.10);
|
|
71
|
+
--green: #4ade80;
|
|
72
|
+
--green-dim: rgba(74, 222, 128, 0.10);
|
|
73
|
+
--red: #f87171;
|
|
74
|
+
--red-dim: rgba(248, 113, 113, 0.10);
|
|
75
|
+
--amber: #fbbf24;
|
|
76
|
+
--amber-dim: rgba(251, 191, 36, 0.10);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@media (prefers-color-scheme: light) {
|
|
80
|
+
:root {
|
|
81
|
+
--bg: #f0f4f8;
|
|
82
|
+
--surface: #ffffff;
|
|
83
|
+
/* ... light overrides ... */
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Aesthetic Variations
|
|
89
|
+
|
|
90
|
+
Rotate aesthetics to avoid cookie-cutter output:
|
|
91
|
+
|
|
92
|
+
| Aesthetic | When to Use | Font Pairing |
|
|
93
|
+
|-----------|-------------|--------------|
|
|
94
|
+
| Neon Dashboard | Competitive analysis, metrics, KPIs | Orbitron + JetBrains Mono |
|
|
95
|
+
| Editorial | Executive summaries, proposals | Instrument Serif + JetBrains Mono |
|
|
96
|
+
| Blueprint | Architecture diagrams, technical specs | Space Mono + system-ui |
|
|
97
|
+
| Paper/Ink | Documentation, guides | Literata + Fira Code |
|
|
98
|
+
| IDE-inspired | Code reviews, debug reports | Use Dracula/Nord/Catppuccin palette |
|
|
99
|
+
|
|
100
|
+
### Key Components
|
|
101
|
+
|
|
102
|
+
**KPI Cards** — Large hero numbers with labels, color-coded by meaning:
|
|
103
|
+
```html
|
|
104
|
+
<div class="kpi-row">
|
|
105
|
+
<div class="kpi-card">
|
|
106
|
+
<div class="kpi-card__value" style="color:var(--cyan)">42</div>
|
|
107
|
+
<div class="kpi-card__label">Commands</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
**Data Tables** — Real `<table>` elements with sticky headers, alternating rows, status badges:
|
|
113
|
+
```html
|
|
114
|
+
<div class="table-wrap">
|
|
115
|
+
<div class="table-scroll">
|
|
116
|
+
<table class="data-table">
|
|
117
|
+
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
|
|
118
|
+
<tbody>
|
|
119
|
+
<tr><td>Auth</td><td><span class="status status--yes">YES</span></td></tr>
|
|
120
|
+
<tr><td>Caching</td><td><span class="status status--no">NO</span></td></tr>
|
|
121
|
+
</tbody>
|
|
122
|
+
</table>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Status Badges** — Never use emoji. Use styled `<span>` elements:
|
|
128
|
+
```css
|
|
129
|
+
.status--yes { background: var(--green-dim); color: var(--green); }
|
|
130
|
+
.status--no { background: var(--red-dim); color: var(--red); }
|
|
131
|
+
.status--partial { background: var(--amber-dim); color: var(--amber); }
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
**Grade Badges** — Letter grades with color-coded borders:
|
|
135
|
+
```css
|
|
136
|
+
.grade--a { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); }
|
|
137
|
+
.grade--f { background: var(--red-dim); color: var(--red); border: 1px solid var(--red); }
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
**Section Navigation** — For pages with 4+ sections, add a sticky sidebar TOC on desktop that collapses to a horizontal scrollable bar on mobile. Use IntersectionObserver for scroll-spy highlighting.
|
|
141
|
+
|
|
142
|
+
**Staggered Animations** — Use CSS `--i` variable per element for load stagger:
|
|
143
|
+
```css
|
|
144
|
+
@keyframes fadeUp {
|
|
145
|
+
from { opacity: 0; transform: translateY(14px); }
|
|
146
|
+
to { opacity: 1; transform: translateY(0); }
|
|
147
|
+
}
|
|
148
|
+
.animate {
|
|
149
|
+
animation: fadeUp 0.4s ease-out both;
|
|
150
|
+
animation-delay: calc(var(--i, 0) * 0.05s);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Diagram Types and Rendering
|
|
155
|
+
|
|
156
|
+
| Diagram Type | Approach |
|
|
157
|
+
|---|---|
|
|
158
|
+
| Architecture (text-heavy cards) | CSS Grid + flow arrows |
|
|
159
|
+
| Flowcharts, sequence diagrams | Mermaid.js via CDN |
|
|
160
|
+
| Data tables, comparisons | HTML `<table>` element |
|
|
161
|
+
| ER / schema diagrams | Mermaid erDiagram |
|
|
162
|
+
| Dashboards with charts | CSS Grid + Chart.js via CDN |
|
|
163
|
+
| Timelines | CSS central line + alternating cards |
|
|
164
|
+
|
|
165
|
+
### Mermaid Integration
|
|
166
|
+
|
|
167
|
+
For flowcharts, sequence diagrams, and ER diagrams, use Mermaid.js with custom theming:
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
171
|
+
<script>
|
|
172
|
+
mermaid.initialize({
|
|
173
|
+
theme: 'base',
|
|
174
|
+
themeVariables: {
|
|
175
|
+
primaryColor: '#1e293b',
|
|
176
|
+
primaryTextColor: '#e2e8f0',
|
|
177
|
+
lineColor: '#22d3ee'
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
</script>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
Always add zoom controls (+/-/reset buttons) to Mermaid containers.
|
|
184
|
+
|
|
185
|
+
## Code Example
|
|
186
|
+
|
|
187
|
+
```html
|
|
188
|
+
<!-- Before: ASCII table in terminal -->
|
|
189
|
+
<!--
|
|
190
|
+
| Feature | Us | Them |
|
|
191
|
+
|------------|-----|------|
|
|
192
|
+
| Auth | YES | NO |
|
|
193
|
+
| Memory | YES | YES |
|
|
194
|
+
| Parallel | YES | NO |
|
|
195
|
+
Unreadable at scale, can't share, no visual hierarchy
|
|
196
|
+
-->
|
|
197
|
+
|
|
198
|
+
<!-- After: Self-contained HTML report -->
|
|
199
|
+
<!DOCTYPE html>
|
|
200
|
+
<html lang="en">
|
|
201
|
+
<head>
|
|
202
|
+
<meta charset="UTF-8">
|
|
203
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
204
|
+
<title>Feature Comparison</title>
|
|
205
|
+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
206
|
+
<style>
|
|
207
|
+
:root {
|
|
208
|
+
--bg: #0a0e17; --surface: #111827; --text: #e2e8f0;
|
|
209
|
+
--text-dim: #64748b; --border: rgba(255,255,255,0.06);
|
|
210
|
+
--cyan: #22d3ee; --cyan-dim: rgba(34,211,238,0.10);
|
|
211
|
+
--green: #4ade80; --green-dim: rgba(74,222,128,0.10);
|
|
212
|
+
--red: #f87171; --red-dim: rgba(248,113,113,0.10);
|
|
213
|
+
}
|
|
214
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
215
|
+
body { background: var(--bg); color: var(--text); font-family: system-ui; padding: 40px; }
|
|
216
|
+
h1 { font-family: 'Orbitron'; color: var(--cyan); font-size: 24px; margin-bottom: 24px; }
|
|
217
|
+
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
|
218
|
+
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
219
|
+
.data-table th { background: #1a2236; font-family: 'JetBrains Mono'; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); padding: 14px; text-align: left; }
|
|
220
|
+
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
|
|
221
|
+
.data-table tbody tr:hover { background: var(--cyan-dim); }
|
|
222
|
+
.status { font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
|
|
223
|
+
.status--yes { background: var(--green-dim); color: var(--green); }
|
|
224
|
+
.status--no { background: var(--red-dim); color: var(--red); }
|
|
225
|
+
</style>
|
|
226
|
+
</head>
|
|
227
|
+
<body>
|
|
228
|
+
<h1>Feature Comparison</h1>
|
|
229
|
+
<div class="table-wrap">
|
|
230
|
+
<table class="data-table">
|
|
231
|
+
<thead><tr><th>Feature</th><th>Us</th><th>Competitor</th></tr></thead>
|
|
232
|
+
<tbody>
|
|
233
|
+
<tr><td><strong>Auth</strong></td><td><span class="status status--yes">YES</span></td><td><span class="status status--no">NO</span></td></tr>
|
|
234
|
+
<tr><td><strong>Memory</strong></td><td><span class="status status--yes">YES</span></td><td><span class="status status--yes">YES</span></td></tr>
|
|
235
|
+
<tr><td><strong>Parallel</strong></td><td><span class="status status--yes">YES</span></td><td><span class="status status--no">NO</span></td></tr>
|
|
236
|
+
</tbody>
|
|
237
|
+
</table>
|
|
238
|
+
</div>
|
|
239
|
+
</body>
|
|
240
|
+
</html>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
## Implementation Steps
|
|
244
|
+
|
|
245
|
+
1. Choose an aesthetic that fits the audience and content type
|
|
246
|
+
2. Pick a distinctive Google Fonts pairing (never use Inter/Roboto/Arial)
|
|
247
|
+
3. Define the full CSS variable palette with both dark and light themes
|
|
248
|
+
4. Structure content with semantic HTML (sections, headings, tables)
|
|
249
|
+
5. Add KPI cards above tables for visual hook
|
|
250
|
+
6. Use status badges (never emoji) for match/gap/partial indicators
|
|
251
|
+
7. Add staggered fadeUp animations with `--i` variable
|
|
252
|
+
8. Add section navigation if 4+ sections
|
|
253
|
+
9. Add `@media (prefers-reduced-motion: reduce)` for accessibility
|
|
254
|
+
10. Write to `~/.agent/diagrams/` and open in browser
|
|
255
|
+
11. Always respect `overflow-wrap: break-word` and `min-width: 0` on flex/grid children
|
|
256
|
+
|
|
257
|
+
## When to Use
|
|
258
|
+
|
|
259
|
+
- Competitive analysis or feature comparisons (4+ rows, 3+ columns)
|
|
260
|
+
- Architecture or system diagrams
|
|
261
|
+
- Audit results or requirement reviews
|
|
262
|
+
- Project dashboards with KPI metrics
|
|
263
|
+
- Any data you'd present as an ASCII table — generate HTML instead
|
|
264
|
+
- When sharing analysis output with stakeholders who don't use the terminal
|
|
265
|
+
|
|
266
|
+
## When NOT to Use
|
|
267
|
+
|
|
268
|
+
- Quick 2-3 line comparisons that fit naturally in chat
|
|
269
|
+
- Internal debugging output that doesn't need to be shared
|
|
270
|
+
- When the user explicitly asks for plain text output
|
|
271
|
+
- Real-time dashboards that need live data (use a proper framework)
|
|
272
|
+
|
|
273
|
+
## Common Mistakes
|
|
274
|
+
|
|
275
|
+
- Using flat solid backgrounds (add subtle radial gradients for atmosphere)
|
|
276
|
+
- Same animation on everything (use fadeUp for cards, fadeScale for KPIs)
|
|
277
|
+
- Forgetting `overflow-x: auto` wrapper on wide tables
|
|
278
|
+
- Using `display: flex` on `<li>` for markers (causes overflow — use absolute positioning)
|
|
279
|
+
- Not testing both light and dark themes via `prefers-color-scheme`
|
|
280
|
+
- Using emoji for status indicators instead of styled `<span>` elements
|
|
281
|
+
- Forgetting `min-width: 0` on CSS Grid/Flex children (causes container overflow)
|
|
282
|
+
|
|
283
|
+
## Related Skills
|
|
284
|
+
|
|
285
|
+
- [plugin-doc-auto-generation](../plugin-development/plugin-doc-auto-generation.md) — Auto-generate plugin docs from filesystem
|
|
286
|
+
- [complexity-divider](../complexity-metrics/complexity-divider.md) — Complexity analysis patterns
|
|
287
|
+
|
|
288
|
+
## References
|
|
289
|
+
|
|
290
|
+
- Contributed from: dominion-flow competitive analysis session (2026-03-06)
|
|
291
|
+
- Pattern refined across 20+ generated diagrams and dashboards
|
|
292
|
+
- Aesthetic catalog: Neon, Editorial, Blueprint, Paper/Ink, IDE-inspired, Hand-drawn
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: debug-swarm-researcher-escape-hatch
|
|
3
|
+
category: methodology
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
contributed: 2026-03-04
|
|
6
|
+
contributor: dominion-flow-v2
|
|
7
|
+
last_updated: 2026-03-04
|
|
8
|
+
tags: [debugging, swarm, multi-agent, escape-hatch, researcher, blocked, orchestration, autonomous-loop]
|
|
9
|
+
difficulty: hard
|
|
10
|
+
usage_count: 0
|
|
11
|
+
success_rate: 100
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# Debug Swarm Researcher Escape Hatch
|
|
15
|
+
|
|
16
|
+
## Problem
|
|
17
|
+
|
|
18
|
+
Multi-agent debug swarms run parallel agents attacking the same bug from different hypotheses. When every hypothesis fails — every agent returns BLOCKED — the orchestrator is stuck. Spinning up identical agents produces identical failures. Halting loses all session context.
|
|
19
|
+
|
|
20
|
+
**Symptoms:**
|
|
21
|
+
- All swarm agents return `{status:"BLOCKED", issue, attempts_made[], error_context}` after N iterations
|
|
22
|
+
- No remaining hypotheses to test
|
|
23
|
+
- Loop stagnation: circuit breaker fires (`CB_STAGNATION >= limit`)
|
|
24
|
+
- Problem requires external knowledge: prior art, community solution, docs deep-dive
|
|
25
|
+
|
|
26
|
+
**The core trap:** You can't debug your way out of a knowledge gap. The swarm needs new information before it can make progress.
|
|
27
|
+
|
|
28
|
+
## Solution Pattern
|
|
29
|
+
|
|
30
|
+
When the swarm hits a collective wall, **escape the debug loop entirely** and spawn a dedicated researcher agent. The researcher searches external sources (skills library, MCP servers, WebSearch, GitHub) and writes structured findings to a persistent file. The findings file is then injected into the next swarm iteration as first-class context.
|
|
31
|
+
|
|
32
|
+
### The Three-Layer Escape
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
Layer 1: SWARM AGENTS (parallel per hypothesis)
|
|
36
|
+
↓ All return BLOCKED
|
|
37
|
+
Layer 2: ESCAPE TRIGGER (orchestrator detects collective BLOCKED)
|
|
38
|
+
↓ Spawns fire-researcher instead of re-trying swarm
|
|
39
|
+
Layer 3: RESEARCHER (skills lib + MCP + WebSearch + GitHub)
|
|
40
|
+
↓ Writes .planning/research/YYYY-MM-DD-{slug}.md
|
|
41
|
+
↓ Returns research summary to orchestrator
|
|
42
|
+
Layer 1 again: NEW SWARM AGENTS (with research injected as context)
|
|
43
|
+
↓ Fresh hypotheses informed by external knowledge
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Key insight:** The escape does NOT count as a swarm iteration. The loop counter
|
|
47
|
+
stays constant. The researcher is outside the iteration budget.
|
|
48
|
+
|
|
49
|
+
### BLOCKED Agent Response Contract
|
|
50
|
+
|
|
51
|
+
Swarm agents signal a wall using a structured response:
|
|
52
|
+
|
|
53
|
+
```json
|
|
54
|
+
{
|
|
55
|
+
"status": "BLOCKED",
|
|
56
|
+
"issue": "Cannot determine why X fails — tried Y and Z",
|
|
57
|
+
"attempts_made": [
|
|
58
|
+
"Checked env variable binding — correct",
|
|
59
|
+
"Added console.log to line 47 — never fires",
|
|
60
|
+
"Tried disabling auth middleware — same result"
|
|
61
|
+
],
|
|
62
|
+
"error_context": {
|
|
63
|
+
"error": "Cannot read properties of undefined (reading 'id')",
|
|
64
|
+
"file": "src/auth/middleware.ts",
|
|
65
|
+
"line": 23,
|
|
66
|
+
"stack": "..."
|
|
67
|
+
},
|
|
68
|
+
"files_checked": ["src/auth/middleware.ts", "src/routes/users.ts"]
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The orchestrator collects all BLOCKED responses and synthesizes a research brief.
|
|
73
|
+
|
|
74
|
+
### Orchestrator Escape Logic
|
|
75
|
+
|
|
76
|
+
```python
|
|
77
|
+
def check_escape_condition(swarm_results):
|
|
78
|
+
blocked_count = sum(1 for r in swarm_results if r["status"] == "BLOCKED")
|
|
79
|
+
if blocked_count == len(swarm_results):
|
|
80
|
+
# All agents blocked — trigger escape hatch
|
|
81
|
+
return True
|
|
82
|
+
return False
|
|
83
|
+
|
|
84
|
+
def build_research_brief(blocked_responses):
|
|
85
|
+
# Synthesize what the swarm tried and where it's stuck
|
|
86
|
+
all_attempts = [a for r in blocked_responses for a in r["attempts_made"]]
|
|
87
|
+
error_patterns = [r["error_context"] for r in blocked_responses]
|
|
88
|
+
return {
|
|
89
|
+
"problem_summary": "...",
|
|
90
|
+
"attempted_approaches": all_attempts,
|
|
91
|
+
"error_signatures": error_patterns,
|
|
92
|
+
"research_queries": [
|
|
93
|
+
"Cannot read properties undefined middleware chain express",
|
|
94
|
+
"JWT auth middleware undefined user id request context"
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Researcher Sources (priority order)
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
1. Skills library search — Has this been solved before in our patterns?
|
|
103
|
+
2. context7 MCP server — Framework/library official docs
|
|
104
|
+
3. WebSearch — Community solutions, Stack Overflow, GitHub Issues
|
|
105
|
+
4. GitHub code search — Real-world implementations of the pattern
|
|
106
|
+
5. Episodic memory search — Did WE solve a similar issue in a past session?
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Research Output Format
|
|
110
|
+
|
|
111
|
+
Researcher writes to `.planning/research/YYYY-MM-DD-{slug}.md`:
|
|
112
|
+
|
|
113
|
+
```markdown
|
|
114
|
+
# Research: {problem title}
|
|
115
|
+
**Date:** YYYY-MM-DD
|
|
116
|
+
**Trigger:** Debug swarm collective BLOCKED — N agents, N attempts
|
|
117
|
+
|
|
118
|
+
## Root Cause Hypothesis (from research)
|
|
119
|
+
[What the researcher found that the swarm was missing]
|
|
120
|
+
|
|
121
|
+
## Solution Approach
|
|
122
|
+
[Concrete steps to fix based on external sources]
|
|
123
|
+
|
|
124
|
+
## Code Reference
|
|
125
|
+
```[language]
|
|
126
|
+
// From: [source URL or skill name]
|
|
127
|
+
[relevant code snippet]
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Sources
|
|
131
|
+
- [Source 1 with URL]
|
|
132
|
+
- [Source 2 with URL]
|
|
133
|
+
|
|
134
|
+
## Re-injection Prompt
|
|
135
|
+
[Ready-to-use context block for injecting into next swarm iteration]
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Re-injection Into Next Swarm Iteration
|
|
139
|
+
|
|
140
|
+
After researcher completes, the orchestrator spawns a fresh swarm with the research pre-loaded:
|
|
141
|
+
|
|
142
|
+
```
|
|
143
|
+
CONTEXT FROM PREVIOUS SWARM + RESEARCHER:
|
|
144
|
+
|
|
145
|
+
The debug swarm tried N approaches and was blocked. A researcher agent
|
|
146
|
+
investigated and found:
|
|
147
|
+
|
|
148
|
+
[Research summary — from .planning/research/YYYY-MM-DD-{slug}.md]
|
|
149
|
+
|
|
150
|
+
Known dead ends (do NOT retry):
|
|
151
|
+
- [attempt 1]
|
|
152
|
+
- [attempt 2]
|
|
153
|
+
|
|
154
|
+
New hypotheses to test based on research:
|
|
155
|
+
- [fresh hypothesis 1 from external sources]
|
|
156
|
+
- [fresh hypothesis 2]
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Code Example
|
|
160
|
+
|
|
161
|
+
```markdown
|
|
162
|
+
# fire-debug.md — Swarm Orchestrator (key escape section)
|
|
163
|
+
|
|
164
|
+
## Swarm Mode Orchestrator
|
|
165
|
+
|
|
166
|
+
```pseudocode
|
|
167
|
+
results = await Promise.all(swarm_agents.map(agent => agent.run()))
|
|
168
|
+
|
|
169
|
+
if results.every(r => r.status === "BLOCKED"):
|
|
170
|
+
# Escape hatch: all agents blocked
|
|
171
|
+
brief = build_research_brief(results)
|
|
172
|
+
|
|
173
|
+
research = await spawn_agent(
|
|
174
|
+
"fire-researcher",
|
|
175
|
+
{
|
|
176
|
+
query: brief.problem_summary,
|
|
177
|
+
search_sources: ["skills-library", "context7-mcp", "web-search", "github"],
|
|
178
|
+
write_to: f".planning/research/{today}-{slug}.md"
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
|
|
182
|
+
# Re-spawn swarm with research context (doesn't count as iteration)
|
|
183
|
+
new_swarm = spawn_swarm(hypotheses=research.new_hypotheses, context=research)
|
|
184
|
+
results = await new_swarm.run()
|
|
185
|
+
```
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Implementation Steps
|
|
189
|
+
|
|
190
|
+
1. Define BLOCKED response contract in swarm agent instructions (the JSON shape above)
|
|
191
|
+
2. Implement `check_escape_condition()` in orchestrator — triggers when ALL agents blocked
|
|
192
|
+
3. Implement `build_research_brief()` — synthesizes blocked responses into research queries
|
|
193
|
+
4. Spawn `fire-researcher` (or equivalent) with the brief + write path
|
|
194
|
+
5. Researcher writes structured `.planning/research/YYYY-MM-DD-{slug}.md`
|
|
195
|
+
6. Orchestrator reads research, builds re-injection context block
|
|
196
|
+
7. Spawn fresh swarm iteration with research pre-loaded as context
|
|
197
|
+
|
|
198
|
+
## When to Use
|
|
199
|
+
|
|
200
|
+
- Multi-agent debug swarm where ALL agents return BLOCKED simultaneously
|
|
201
|
+
- Problem requires external knowledge (docs, prior art, community solutions)
|
|
202
|
+
- Stagnation circuit breaker has fired due to repeated identical failures
|
|
203
|
+
- The error pattern is unfamiliar — novel framework, obscure edge case, known bug in dependency
|
|
204
|
+
- You want to preserve research findings across sessions (write to disk, not just memory)
|
|
205
|
+
|
|
206
|
+
## When NOT to Use
|
|
207
|
+
|
|
208
|
+
- Single-agent debugging (use systematic-debugging skill instead)
|
|
209
|
+
- Only 1-2 agents blocked (not all) — remaining agents may still find a path
|
|
210
|
+
- Problem is clearly a typo or obvious logic error (don't need external research)
|
|
211
|
+
- Swarm has only run 1 iteration (premature escape — try more hypotheses first)
|
|
212
|
+
- Time-critical hotfix where research delay is unacceptable
|
|
213
|
+
|
|
214
|
+
## Common Mistakes
|
|
215
|
+
|
|
216
|
+
- **Counting escape as an iteration** — the researcher escape is outside the iteration budget; resetting the loop counter erases progress tracking
|
|
217
|
+
- **Vague research brief** — synthesize specific error signatures and exact code context, not just "it doesn't work". The researcher is only as good as the brief
|
|
218
|
+
- **Not writing research to disk** — if findings stay in memory only, they're lost on session compaction. Always write `.planning/research/*.md`
|
|
219
|
+
- **Re-injecting all research** — only inject the relevant new hypotheses, not the full research doc. Context window is precious
|
|
220
|
+
- **Escaping too early** — require collective BLOCKED (all agents, not just some). Partial blocking means other hypotheses are still viable
|
|
221
|
+
|
|
222
|
+
## Exit Codes (when used in shell loop)
|
|
223
|
+
|
|
224
|
+
| Code | Meaning | Action |
|
|
225
|
+
|------|---------|--------|
|
|
226
|
+
| 0 | Bug fixed after research re-injection | Proceed to verify |
|
|
227
|
+
| 2 | Escape triggered, researcher found nothing | Human investigation required |
|
|
228
|
+
| 3 | Research found solution, fix not implemented | Apply research manually |
|
|
229
|
+
|
|
230
|
+
## Related Skills
|
|
231
|
+
|
|
232
|
+
- [shell-autonomous-loop-fixplan](_general/methodology/shell-autonomous-loop-fixplan.md) — shell-level loop with BLOCKED signal (exit code 2)
|
|
233
|
+
- [autonomous-multi-phase-build](_general/methodology/autonomous-multi-phase-build.md) — phase-level orchestration
|
|
234
|
+
- [systematic-debugging] — single-agent debugging pattern
|
|
235
|
+
|
|
236
|
+
## References
|
|
237
|
+
|
|
238
|
+
- Implemented in: `dominion-flow-v2/commands/fire-debug.md` (--swarm mode section)
|
|
239
|
+
- Inspired by: RLHF researcher escalation patterns + bmalph/Ralph BLOCKED exit
|
|
240
|
+
- Contributed from: dominion-flow-v2 build session 2026-03-04
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: learncoding-agentic-pattern
|
|
3
|
+
category: methodology
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
contributed: 2026-03-04
|
|
6
|
+
contributor: dominion-flow-v2
|
|
7
|
+
last_updated: 2026-03-04
|
|
8
|
+
tags: [learning, walkthrough, cognitive-debt, simon-willison, agentic-engineering, linear-walkthrough, anti-vibe-coding]
|
|
9
|
+
difficulty: medium
|
|
10
|
+
usage_count: 0
|
|
11
|
+
success_rate: 100
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# Learncoding: Agentic Engineering Walkthrough Pattern
|
|
15
|
+
|
|
16
|
+
## Problem
|
|
17
|
+
|
|
18
|
+
Vibe coding (accepting all AI output without understanding) creates **cognitive debt**:
|
|
19
|
+
you build things you can't explain, can't debug, and can't confidently extend.
|
|
20
|
+
Simon Willison's definition: "If you don't understand the code, your only recourse is
|
|
21
|
+
to ask AI to fix it — like paying off credit card debt with another credit card."
|
|
22
|
+
|
|
23
|
+
Symptoms:
|
|
24
|
+
- You can't explain a file you "wrote" with AI
|
|
25
|
+
- Bugs require asking AI to fix rather than reasoning yourself
|
|
26
|
+
- Architecture decisions feel opaque or arbitrary
|
|
27
|
+
- You'd fail a code review on your own code
|
|
28
|
+
|
|
29
|
+
## Solution Pattern
|
|
30
|
+
|
|
31
|
+
Apply Simon Willison's **Linear Walkthrough** pattern:
|
|
32
|
+
|
|
33
|
+
> "Give me a linear walkthrough of the code that explains how it all works in detail."
|
|
34
|
+
|
|
35
|
+
Combined with his **Hoard Things You Know** principle: once you understand something,
|
|
36
|
+
capture it. The walkthrough document becomes your hoard entry.
|
|
37
|
+
|
|
38
|
+
### The Three Questions Per File
|
|
39
|
+
|
|
40
|
+
For every file in the walkthrough, answer:
|
|
41
|
+
1. **WHAT** — what does this file do for the user of the application?
|
|
42
|
+
2. **WHY** — why is it written this way, not the obvious alternative?
|
|
43
|
+
3. **PATTERN** — which design pattern is being used and what is its name?
|
|
44
|
+
|
|
45
|
+
### The Showboat Extraction Rule
|
|
46
|
+
|
|
47
|
+
Never paraphrase code from memory. Always extract real snippets using shell tools:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# Extract real code — prevents LLM hallucination of "close but wrong" code
|
|
51
|
+
cat src/auth/middleware.ts # whole file
|
|
52
|
+
sed -n '/^export function/,/^}/p' src/auth.ts # specific function
|
|
53
|
+
grep -A 20 "class UserService" src/services/user.ts # class body
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
This is the core principle from Willison's Showboat tool — agents that
|
|
57
|
+
copy code from memory will introduce subtle errors. Shell extraction is exact.
|
|
58
|
+
|
|
59
|
+
## Code Example
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
# The four-step learncoding workflow
|
|
63
|
+
# 1. Load source
|
|
64
|
+
gh api repos/user/repo/git/trees/HEAD?recursive=1 \
|
|
65
|
+
--jq '.tree[] | select(.type=="blob") | .path' > files.txt
|
|
66
|
+
|
|
67
|
+
# 2. Detect entry point
|
|
68
|
+
cat package.json | jq -r '.main // .scripts.start'
|
|
69
|
+
|
|
70
|
+
# 3. Extract real snippet (Showboat principle)
|
|
71
|
+
gh api repos/user/repo/contents/src/index.ts \
|
|
72
|
+
--jq '.content' | base64 -d
|
|
73
|
+
|
|
74
|
+
# 4. Walk imports breadth-first from entry point
|
|
75
|
+
grep -E "^import.*from ['\"]\./" src/index.ts
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## When to Use
|
|
79
|
+
|
|
80
|
+
- Learning a new codebase before contributing
|
|
81
|
+
- Recreating a GitHub project from scratch to understand it deeply
|
|
82
|
+
- Onboarding to a new tech stack (walk an example project)
|
|
83
|
+
- After AI generates a multi-file feature — walk it before committing
|
|
84
|
+
- Teaching someone else a codebase
|
|
85
|
+
- Any time you feel "I accepted this but I don't fully get it"
|
|
86
|
+
|
|
87
|
+
## When NOT to Use
|
|
88
|
+
|
|
89
|
+
- You already understand the codebase well
|
|
90
|
+
- Single-file scripts (just read them directly)
|
|
91
|
+
- Generated boilerplate with no novel logic
|
|
92
|
+
- Time-pressured hotfixes (use a quick `/fire-debug` instead)
|
|
93
|
+
|
|
94
|
+
## Willison's Golden Rule
|
|
95
|
+
|
|
96
|
+
> "I won't commit any code to my repository if I couldn't explain exactly
|
|
97
|
+
> what it does to somebody else."
|
|
98
|
+
|
|
99
|
+
Apply this as a pre-commit gate: before every `git commit`, ask yourself if you
|
|
100
|
+
could explain the diff to a colleague. If not, run a walkthrough first.
|
|
101
|
+
|
|
102
|
+
## Related Patterns
|
|
103
|
+
|
|
104
|
+
- Simon Willison's guide: simonwillison.net/guides/agentic-engineering-patterns/linear-walkthroughs/
|
|
105
|
+
- Interactive Explanations: simonwillison.net/guides/agentic-engineering-patterns/interactive-explanations/
|
|
106
|
+
- Showboat tool: github.com/simonw/showboat
|
|
107
|
+
|
|
108
|
+
## References
|
|
109
|
+
|
|
110
|
+
- [Linear Walkthroughs — Agentic Engineering Patterns](https://simonwillison.net/guides/agentic-engineering-patterns/linear-walkthroughs/)
|
|
111
|
+
- [Cognitive Debt](https://simonwillison.net/2026/Feb/15/cognitive-debt/)
|
|
112
|
+
- [Not all AI-assisted programming is vibe coding](https://simonwillison.net/2025/Mar/19/vibe-coding/)
|
|
113
|
+
- [Showboat GitHub](https://github.com/simonw/showboat)
|
|
114
|
+
- Contributed from: dominion-flow-v2 learncoding session 2026-03-04
|