From harness-engineering
Trace and visualize code execution paths step-by-step with annotations. Use when understanding how a request flows through layers, debugging execution order, or learning how data moves between components. Also invoked automatically by code-explorer for flow analysis. Do NOT use for dependency graphs (use dependency-graph), architecture overviews (use ascii-diagram).
npx claudepluginhub toru-oizumi/claude-harness-engineering --plugin harness-engineeringThis skill uses the workspace's default tool permissions.
Visualize code execution as an animated step-by-step journey.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Visualize code execution as an animated step-by-step journey.
/code-journey [file_path] - Trace execution from a file
/code-journey [feature] --trace - Trace a feature's data flow
/code-journey [scenario] - Visualize a user scenario
/code-journey "User fetches their profile"
/code-journey src/services/auth/login.ts --trace
/code-journey "Login flow"
/code-journey "Payment processing"
Step 1: User triggers action
═══════════════════════════════════════════════════════════════
┌─────────────────┐
│ Controller │ ◄── User initiates request
│ [Action] │
└────────┬────────┘
│
▼
(next step...)
Step 2: Controller calls Service
═══════════════════════════════════════════════════════════════
┌─────────────────┐
│ Controller │
└────────┬────────┘
│ service.execute(input)
▼
┌─────────────────┐
│ Service │ ◄── Service called
│ state: active │
└────────┬────────┘
│
▼
(next step...)
Step 3: Service calls Repository
═══════════════════════════════════════════════════════════════
┌─────────────────────────┐
│ Service │
└────────┬────────────────┘
│ await repository.findById(id)
▼
┌─────────────────────────┐
│ Repository │ ◄── Repository (interface)
│ (impl) │
└────────┬────────────────┘
│
▼
(next step...)
Step 4: Repository calls External API / DB
═══════════════════════════════════════════════════════════════
┌─────────────────────────┐
│ RepositoryImpl │
└────────┬────────────────┘
│ client.request(params)
▼
┌─────────────────────────┐
│ API Client / DB │ ◄── External call
└────────┬────────────────┘
│
│ ──── Network ────► [External]
│
▼
(awaiting response...)
Step 5: Response returns (DTO → Entity)
═══════════════════════════════════════════════════════════════
│ ◄──── Network ──── [Response]
▼
┌─────────────────────────┐
│ ResponseDto │ ◄── Raw response
│ { id, data, ... } │
└────────┬────────────────┘
│ .toEntity()
▼
┌─────────────────────────┐
│ Entity │ ◄── Converted to domain model
│ { id, data, ... } │
└────────┬────────────────┘
│
▼
(return to upper layer...)
Step 6: State updates
═══════════════════════════════════════════════════════════════
┌─────────────────────────┐
│ Controller / Handler │
│ │
│ result = entity │ ◄── State update
│ return response(result)│
└─────────────────────────┘
Journey Complete!
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│Controller│───►│ Service │───►│ Repo │───►│ API/DB │
│ (request)│ │(execute) │ │ (fetch) │ │(request) │
└──────────┘ └──────────┘ └──────────┘ └────┬─────┘
▲ │
│ ▼
│ ┌──────────┐ ┌──────────┐ ┌──────────┐
└──────────┤ Response │◄───┤ Entity │◄───┤ DTO │
│ (return) │ │(toEntity)│ │(response)│
└──────────┘ └──────────┘ └──────────┘
Generates an HTML file with CSS animations showing each step sequentially.
<!DOCTYPE html>
<html>
<head>
<style>
.step { opacity: 0; animation: fadeIn 0.5s forwards; }
.step:nth-child(1) { animation-delay: 0s; }
.step:nth-child(2) { animation-delay: 1s; }
.step:nth-child(3) { animation-delay: 2s; }
@keyframes fadeIn { to { opacity: 1; } }
.highlight { background: #ffff0044; }
.arrow { color: #4a9eff; }
</style>
</head>
<body>
<!-- Step-by-step animated content -->
</body>
</html>
Each journey should emphasize:
Based on Anthropic Research, passive viewing can reduce skill acquisition. Use the Trace-Compare pattern:
1. Draw your mental model of the flow first:
"User triggers action → ??? → Result appears"
2. /code-journey [feature]
→ View actual execution flow
3. Compare your model vs reality
→ What steps did you miss?
→ What was different from your expectation?
When viewing the journey, pause at each step and ask yourself:
code-explorer: Broad codebase exploration (uses code-journey internally)bug-investigation: For tracing failure pathsSee gotchas.md in this directory for known pitfalls and recurring mistakes when using this skill.