mit einem Klick
code-trace
Trace code flow
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Menü
Trace code flow
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Create a GitHub PR for completed work, then run coderabbit-resolver through review, CI, merge, and cleanup. Use when: the user asks for PR creation followed by CodeRabbit resolution. Keywords: create PR, CodeRabbit, merge.
Secure pnpm GitHub Actions CI
Live onboarding tour of newly implemented code. Combines /deep-trace, the vscode-debug-mcp bridge, and playwright-cli to run the target app in a debug session, drive the UI, pause at curated breakpoints inside the new code, and narrate "this modal is the newly created one" — mapping every UI moment to the exact file:line. Use when the user wants to understand where and how AI-written feature code executes in the running application ("どの UI / どのロジックで動くのか分からない", "オンボーディングして", "/feature-tour").
Screenshot UI defect lint
Debug Claude Code plugins
Record a web or Electron-renderer flow as an annotated video with playwright-cli, then extract frames to confirm how it actually looks. Use when the user points at a flow to capture — "record that part", "あそこの部分", "この一連の動作", "動作確認して録画して", QA-ing a screen's motion/behavior, or proving a web / Electron-renderer interaction works on video. For analyzing a clip you were handed or generic cross-surface motion verification, use the `video` skill; for native macOS chrome (menu / tray / dock / traffic-lights) use computer-use — playwright cannot see those.
| name | code-trace |
| description | Trace code flow |
When running this skill in Codex, translate Claude Code-only primitives before acting: AskUserQuestion -> chat/request_user_input, TodoWrite -> update_plan, Task/TaskCreate/TeamCreate/SendMessage -> spawn_agent/send_input/wait_agent when available and allowed, and EnterPlanMode/ExitPlanMode -> a concise chat plan plus explicit approval.
Resolve Read/Write/Edit/Bash/WebSearch/WebFetch to Codex file/shell/web tools, and map ~/.claude/... paths to ~/.agents/... or ~/.codex/... unless the task explicitly targets Claude Code.
When running this skill in Cursor Agent, translate Claude Code-only primitives before acting: AskUserQuestion -> AskQuestion; TodoWrite -> Cursor TodoWrite or an equivalent checklist; Task/TaskCreate/TeamCreate/SendMessage/multi-agent flows -> Cursor Task (subagents), parallel Tasks, or run_in_background when allowed (TeamCreate/SendMessage may have no exact match); EnterPlanMode/ExitPlanMode -> Plan mode (SwitchMode / CreatePlan) plus explicit user approval.
Resolve Read/Write/Edit/StrReplace/Bash/web/search/MCP via Cursor Composer or Agent equivalents. MCP names written as mcp__server__tool typically map to call_mcp_tool with configured server identifiers. Map ~/.claude/... to ~/.cursor/skills/, .cursor/skills/, and .cursor/rules/ unless the task explicitly targets Claude Code.
<essential_principles>
This skill traces code execution paths interactively, letting you navigate through the codebase like a debugger stepping through code - but with rich explanations at each step.
Trace ONLY application code. External dependencies (node_modules, vendor/) receive:
Why: External libraries can be 100K+ lines. Tracing into them wastes context and obscures the actual application logic. The goal is understanding YOUR code, not library internals.
Every conditional branch becomes a user choice:
| Code Pattern | Presentation |
|---|---|
if/else | "Path A: condition true" vs "Path B: condition false" |
switch | One choice per case |
try/catch | "Success path" vs "Error path" |
async/await | Option to trace into called functions |
Why: Linear traces miss important paths. Interactive navigation lets users explore exactly what they're interested in.
Each step includes:
Use thinking markers (🤔🎯⚡📊💡🔐) for clarity.
Trace state is stored in Serena Memory to enable:
Please provide additional context:
Wait for response before proceeding.
| Response | Workflow | |----------|----------| | 1, "request", "HTTP", "route", "API", "endpoint", "POST", "GET" | `workflows/trace-request.md` | | 2, "function", "call", specific function name | `workflows/trace-function.md` | | 3, "resume", "continue", "previous" | Read Serena memory for `trace_session_*` |Detect Framework: Run scripts/detect-framework.sh to identify:
Load Framework Patterns: Read references/framework-patterns.md section for detected framework
Prepare Serena: Ensure Serena MCP is available for:
find_symbol() - Locate functions/handlersfind_referencing_symbols() - Find callersget_symbols_overview() - Map module structurewrite_memory() / read_memory() - State persistenceAfter determining intent and framework, read the appropriate workflow and follow it.
<reference_index>
All in references/:
| File | Content |
|---|---|
| framework-patterns.md | Entry point detection and request flow for Express, Next.js, Fastify, etc. |
| control-flow-types.md | How to present if/switch/try/loops as interactive choices |
| explanation-style.md | Thinking markers, step format, summary format |
| mermaid-templates.md | Mermaid.js flowchart generation from trace path_history |
| </reference_index> |
<workflows_index>
All in workflows/:
| Workflow | Purpose |
|---|---|
| trace-request.md | Trace HTTP request from entry to response |
| trace-function.md | Trace a specific function's call chain |
| </workflows_index> |
<scripts_index>
| Script | Purpose |
|---|---|
| detect-framework.sh | Auto-detect project framework from package.json |
Usage:
./scripts/detect-framework.sh /path/to/project
# Output: express | nextjs-app | nextjs-pages | fastify | hono | nestjs | koa | generic
</scripts_index>
<success_criteria> A successful code trace:
Will:
Will Not: