원클릭으로
code-trace
Trace code flow
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Trace code flow
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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: