메뉴
Pitfalls to avoid when writing Mermaid diagrams. Use whenever generating a `mermaid` code block, a `<pre class="mermaid">` block, or troubleshooting a Mermaid render error. Assumes you already know Mermaid syntax — this skill only covers the gotchas that silently break renders.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Entry point for the devflow workspace lifecycle. Load this first when the user asks to run a devflow stage, create or inspect devflow artifacts, decide what stage comes next, generate RFC/spec/plan/tasks, run a feature through AFK work, or finish/archive a feature.
Minimal tmux workflow for running long-lived commands in named sessions: create a session, send commands, inspect recent output, stop a process, kill a session, and keep names consistent for search and cleanup. Use when an agent needs a durable terminal session for servers, watchers, REPLs, or commands that may need later inspection.
Practical Codex session forensics quickstart. Use when the user wants to inspect Codex dialogue logs captured by this repo's harness Codex hooks, locate the current or recent Codex conversation, extract user/assistant dialogue, audit file/tool activity, or fall back to raw Codex rollout JSONL sessions when the stable dialogue log is missing.
Practical Pi session forensics quickstart. Use when the user wants to inspect Pi .jsonl session files, locate recent sessions, extract conversation text, audit tool usage, check costs, or debug this repo's subagent-session manifests. Defers to official Pi docs for authoritative session schema and lifecycle.
Practical Claude Code session forensics quickstart. Use when the user wants to inspect Claude Code .jsonl session transcripts, locate a session from a message they saw in the UI, extract user/assistant messages, audit tool calls (reads, edits, writes, bash), pull a tool result for a given request, or check session cost/usage (deferred to ccusage). Covers the on-disk session schema, the ~/.claude (or CLAUDE_CONFIG_DIR) layout, and the harness plugin's stable dialogue log for clean user/assistant Q&A extraction.
Render a long-form or visually-structured response as a single self-contained HTML file and open it in the browser, instead of printing >50 lines to the terminal. Use when the response would benefit from diagrams (Mermaid or Graphviz), wide tables, side-by-side comparisons, diffs, callouts, or collapsible detail. Triggers on phrases like "rich response", "open this in the browser", "render as HTML", "give me a doc", "diagram this", or whenever the response would otherwise exceed roughly 50 lines of terminal output.
| name | mermaid |
| description | Pitfalls to avoid when writing Mermaid diagrams. Use whenever generating a `mermaid` code block, a `<pre class="mermaid">` block, or troubleshooting a Mermaid render error. Assumes you already know Mermaid syntax — this skill only covers the gotchas that silently break renders. |
You already know Mermaid syntax. These are the things that break it.
A -->|no| B fails. A -->|no| B works. The parser treats extra whitespace as a token.end, subgraph, direction, class, classDef, style, click, linkStyle — case-insensitively in flowcharts. End, END, and end all collide with the subgraph … end keyword.A[foo: bar?] fails. A["foo: bar?"] works. Quote any label with :, ?, (, ), ,, -, or unicode.A -- text --> B when the label is anything beyond a single word — it tokenises more reliably than A -->|text| B.graph vs flowchart are aliases for the same diagram. Pick one and stick to it within a diagram.; between them: A --> B; B --> C works, A --> B B --> C doesn't.<pre class="mermaid">…</pre>. Do not wrap the <pre> in <code> — that prevents Mermaid from finding it.--> will render as text, not parse as an arrow. Write --> directly inside <pre>.file:// origins, Mermaid v10+ fails because it lazy-loads diagram modules via dynamic import. Serve over http:// (see rich-response skill).When a render fails, the console error includes a line number and a caret (^) pointing at the offending position. The line number references the diagram source (not the HTML file). Read the caret position, not the expected-token list — the expected list is usually misleading.
| Type | First line |
|---|---|
| Flowchart | flowchart TD / LR |
| Sequence | sequenceDiagram |
| Class | classDiagram |
| State | stateDiagram-v2 |
| ER | erDiagram |
| Gantt | gantt |
| Pie | pie title … |
| Mindmap | mindmap |
| Timeline | timeline |
| Quadrant | quadrantChart |
| User journey | journey |
| Git graph | gitGraph |