القائمة
[Utilities] Use when the user wants to visualize workflows, architectures, or concepts as Excalidraw diagram JSON files.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
[Architecture] Use when designing solution architecture across backend, frontend, deployment, monitoring, testing, and code quality.
[Utilities] Use when you need to answer technical and architectural questions.
[Content] Use when you need to brainstorm as a PO/BA — structured ideation for problem-solving, new product creation, or feature enhancement.
[Git] Use when the user asks to compare branches, analyze git diffs, review changes between branches, update specifications based on code changes, or analyze what changed.
[Project Management] Use when creating user stories, writing acceptance criteria, analyzing requirements, or mapping business processes.
[Content] Use when you need to evaluate business idea viability: Business Model Canvas, financial projections, risk matrix, go-to-market, execution plan.
| name | excalidraw-diagram |
| description | [Utilities] Use when the user wants to visualize workflows, architectures, or concepts as Excalidraw diagram JSON files. |
Codex compatibility note:
- Invoke repository skills with
$skill-namein Codex; this mirrored copy rewrites legacy Claude/skill-namereferences.- Task tracker mandate: BEFORE executing any workflow or skill step, create/update task tracking for all steps and keep it synchronized as progress changes.
- User-question prompts mean to ask the user directly in Codex.
- Ignore Claude-specific mode-switch instructions when they appear.
- Strict execution contract: when a user explicitly invokes a skill, execute that skill protocol as written.
- Subagent authorization: when a skill is user-invoked or AI-detected and its protocol requires subagents, that skill activation authorizes use of the required
spawn_agentsubagent(s) for that task.- Do not skip, reorder, or merge protocol steps unless the user explicitly approves the deviation first.
- For workflow skills, execute each listed child-skill step explicitly and report step-by-step evidence.
- If a required step/tool cannot run in this environment, stop and ask the user before adapting.
Codex uses static project-reference loading instead of runtime-injected project docs. When coding, planning, debugging, testing, or reviewing, open project docs explicitly using this routing.
Always read:
docs/project-config.json (project-specific paths, commands, modules, and workflow/test settings)docs/project-reference/docs-index-reference.md (routes to the full docs/project-reference/* catalog)docs/project-reference/lessons.md (always-on guardrails and anti-patterns)Missing/stale context route: If docs/project-config.json, the docs index, lessons.md, CLAUDE.md, AGENTS.md, or any task-required reference doc is missing or stale, auto-run $project-init or the narrow setup route ($project-config, $docs-init, $scan-all, $scan --target=<key>, $claude-md-init) before ordinary project-specific work. If Codex mirrors or AGENTS.md are missing/stale, ask the user to run $sync-codex; do not auto-run it.
Situation-based docs:
backend-patterns-reference.md, domain-entities-reference.md, project-structure-reference.mdfrontend-patterns-reference.md, scss-styling-guide.md, design-system/README.mddocs/specs/ pathing, or TC format: feature-spec-reference.md, spec-system-reference.md, spec-principles.mdworkflow-spec-test-code-cycle-reference.md plus the spec docs abovespec-system-reference.md and source Feature Specs under docs/specs/integration-test-reference.mde2e-test-reference.mdcode-review-rules.md plus domain docs above based on changed filesDo not read all docs blindly. Start from docs-index-reference.md, then open only relevant files for the task.
[BLOCKING] Execute skill steps in declared order. NEVER skip, reorder, or merge steps without explicit user approval. [BLOCKING] Before each step or sub-skill call, update task tracking: set
in_progresswhen step starts, setcompletedwhen step ends. [BLOCKING] Every completed/skipped step MUST include brief evidence or explicit skip reason. [BLOCKING] If Task tools are unavailable, create and maintain an equivalent step-by-step plan tracker with the same status transitions.
Goal: Produce .excalidraw JSON diagrams that visualize workflows, architectures, or concepts and visually ARGUE a concept — where the structure itself carries the meaning and (for technical diagrams) concrete evidence artifacts teach — validated through the render-view-fix loop until the rendered image matches the conceptual design.
Summary:
boundElements as you go; pull all colors from references/color-palette.md and never invent new ones.render_excalidraw.py, Read the image, audit against your planned vision plus visual defects (clipping, overlaps, arrows crossing shapes), fix, and re-render — typically 2-4 iterations until it matches the conceptual design.Workflow:
Key Rules:
file:line) with confidence >80% to act.All colors and brand-specific styles live in one file: references/color-palette.md. Read it before generating any diagram; use it as single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything.
To produce diagrams in your own brand style, edit color-palette.md. Everything else in this file is universal design methodology and Excalidraw best practices.
Diagrams should ARGUE, not DISPLAY.
A diagram isn't formatted text. It's a visual argument showing relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.
The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.
Before designing, determine what level of detail this diagram needs:
Use abstract shapes when:
Use concrete examples when:
For technical diagrams, you MUST ATTENTION include evidence artifacts (see below).
Before drawing anything technical, research the actual specifications.
If you're diagramming a protocol, API, or framework:
Bad: "Protocol" → "Frontend" Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"
Research makes diagrams accurate AND educational.
Evidence artifacts are concrete examples that prove your diagram is accurate and help viewers learn. Include them in technical diagrams.
Types of evidence artifacts (choose what's relevant to your diagram):
| Artifact Type | When to Use | How to Render |
|---|---|---|
| Code snippets | APIs, integrations, implementation details | Dark rectangle + syntax-colored text (see color palette for evidence artifact colors) |
| Data/JSON examples | Data formats, schemas, payloads | Dark rectangle + colored text (see color palette) |
| Event/step sequences | Protocols, workflows, lifecycles | Timeline pattern (line + dots + labels) |
| UI mockups | Showing actual output/results | Nested rectangles mimicking real UI |
| Real input content | Showing what goes IN to a system | Rectangle with sample content visible |
| API/method names | Real function calls, endpoints | Use actual names from docs, not placeholders |
Example: For a diagram about a streaming protocol, you might show:
Example: For a diagram about a data transformation pipeline:
The key principle: show what things actually look like, not just what they're called.
Comprehensive diagrams operate at multiple zoom levels simultaneously. Think of it like a map that shows both the country borders AND the street names.
A simplified overview showing the full pipeline or process at a glance. Often placed at the top or bottom of the diagram.
Example: Input → Processing → Output or Client → Server → Database
Labeled regions that group related components. These create visual "rooms" that help viewers understand what belongs together.
Example: Grouping by responsibility (Backend / Frontend), by phase (Setup / Execution / Cleanup), or by team (User / System / External)
Evidence artifacts, code snippets, and concrete examples within each section. This is where the educational value lives.
Example: Inside a "Backend" section, you might show the actual API response format, not just a box labeled "API Response"
For comprehensive diagrams, aim to include all three levels. The summary gives context, the sections organize, and the details teach.
| Bad (Displaying) | Good (Arguing) |
|---|---|
| 5 equal boxes with labels | Each concept has a shape that mirrors its behavior |
| Card grid layout | Visual structure matches conceptual structure |
| Icons decorating text | Shapes that ARE the meaning |
| Same container for everything | Distinct visual vocabulary per concept |
| Everything in a box | Free-floating text with selective containers |
| Simple Diagram | Comprehensive Diagram |
|---|---|
| Generic labels: "Input" → "Process" → "Output" | Specific: shows what the input/output actually looks like |
| Named boxes: "API", "Database", "Client" | Named boxes + examples of actual requests/responses |
| "Events" or "Messages" label | Timeline with real event/message names from the spec |
| "UI" or "Dashboard" rectangle | Mockup showing actual UI elements and content |
| ~30 seconds to explain | ~2-3 minutes of teaching content |
| Viewer learns the structure | Viewer learns the structure AND the details |
Simple diagrams are fine for abstract concepts, quick overviews, or when the audience already knows the details. Comprehensive diagrams are needed for technical architectures, tutorials, educational content, or when you want the diagram itself to teach.
Not every piece of text needs a shape around it. Default to free-floating text. Add containers only when they serve a purpose.
| Use a Container When... | Use Free-Floating Text When... |
|---|---|
| It's the focal point of a section | It's a label or description |
| It needs visual grouping with other elements | It's supporting detail or metadata |
| Arrows need to connect to it | It describes something nearby |
| The shape itself carries meaning (decision diamond, etc.) | Typography alone creates sufficient hierarchy |
| It represents a distinct "thing" in the system | It's a section title, subtitle, or annotation |
Typography as hierarchy: Use font size, weight, and color to create visual hierarchy without boxes. A 28px title doesn't need a rectangle around it.
The container test: For each boxed element, ask "Would this work as free-floating text?" If yes, remove the container.
Before anything else, determine if this needs to be:
If comprehensive: Do research first. Look up actual specs, formats, event names, APIs.
Read the content. For each concept, ask:
For each concept, find the visual pattern that mirrors its behavior:
| If the concept... | Use this pattern |
|---|---|
| Spawns multiple outputs | Fan-out (radial arrows from center) |
| Combines inputs into one | Convergence (funnel, arrows merging) |
| Has hierarchy/nesting | Tree (lines + free-floating text) |
| Is a sequence of steps | Timeline (line + dots + free-floating labels) |
| Loops or improves continuously | Spiral/Cycle (arrow returning to start) |
| Is an abstract state or context | Cloud (overlapping ellipses) |
| Transforms input to output | Assembly line (before → process → after) |
| Compares two things | Side-by-side (parallel with contrast) |
| Separates into phases | Gap/Break (visual separation between sections) |
For multi-concept diagrams: each major concept must use a different visual pattern. No uniform cards or grids.
Before JSON, mentally trace how the eye moves through the diagram. There should be a clear visual story.
Only now create the Excalidraw elements. See below for how to handle large diagrams.
After generating the JSON, you MUST ATTENTION run the render-view-fix loop until the diagram looks right. This is not optional — see the Render & Validate section below for the full process.
For comprehensive or technical diagrams, you MUST ATTENTION build the JSON one section at a time. Do NOT attempt to generate the entire file in a single pass. This is a hard constraint — Claude Code has a ~32,000 token output limit per response, and a comprehensive diagram easily exceeds that in one shot. Even if it didn't, generating everything at once leads to worse quality. Section-by-section is better in every way.
Phase 1: Build each section
type, version, appState, files) and the first section of elements."trigger_rect", "arrow_fan_left") so cross-section references are readable.boundElements array at the same time.Phase 2: Review the whole
After all sections are in place, read through the complete JSON and check:
Fix any alignment or binding issues before rendering.
Phase 3: Render & validate
Now run the render-view-fix loop from the Render & Validate section. This is where you'll catch visual issues that aren't obvious from JSON — overlaps, clipping, imbalanced composition.
Plan your sections around natural visual groupings from the diagram plan. A typical large diagram might split into:
Each section should be independently understandable: its elements, internal arrows, and any cross-references to adjacent sections.
Central element with arrows radiating to multiple targets. Use for: sources, PRDs, root causes, central hubs.
○
↗
□ → ○
↘
○
Multiple inputs merging through arrows to single output. Use for: aggregation, funnels, synthesis.
○ ↘
○ → □
○ ↗
Parent-child branching with connecting lines and free-floating text (no boxes needed). Use for: file systems, org charts, taxonomies.
label
├── label
│ ├── label
│ └── label
└── label
Use line elements for the trunk and branches, free-floating text for labels.
Elements in sequence with arrow returning to start. Use for: feedback loops, iterative processes, evolution.
□ → □
↑ ↓
□ ← □
Overlapping ellipses with varied sizes. Use for: context, memory, conversations, mental states.
Input → Process Box → Output with clear before/after. Use for: transformations, processing, conversion.
○○○ → [PROCESS] → □□□
chaos order
Two parallel structures with visual contrast. Use for: before/after, options, trade-offs.
Visual whitespace or barrier between sections. Use for: phase changes, context resets, boundaries.
Use lines (type: line, not arrows) as primary structural elements instead of boxes:
Timeline: Tree:
●─── Label 1 │
│ ├── item
●─── Label 2 │ ├── sub
│ │ └── sub
●─── Label 3 └── item
Lines + free-floating text often creates a cleaner result than boxes + contained text.
Choose shape based on what it represents—or use no shape at all:
| Concept Type | Shape | Why |
|---|---|---|
| Labels, descriptions, details | none (free-floating text) | Typography creates hierarchy |
| Section titles, annotations | none (free-floating text) | Font size/weight is enough |
| Markers on a timeline | small ellipse (10-20px) | Visual anchor, not container |
| Start, trigger, input | ellipse | Soft, origin-like |
| End, output, result | ellipse | Completion, destination |
| Decision, condition | diamond | Classic decision symbol |
| Process, action, step | rectangle | Contained action |
| Abstract state, context | overlapping ellipse | Fuzzy, cloud-like |
| Hierarchy node | lines + text (no boxes) | Structure through lines |
Rule: Default to no container. Add shapes only when they carry meaning. Aim for <30% of text elements to be inside containers.
Colors encode information, not decoration. Every color choice should come from references/color-palette.md — the semantic shape colors, text hierarchy colors, and evidence artifact colors are all defined there.
Key principles:
Do not invent new colors. If a concept doesn't fit an existing semantic category, use Primary/Neutral or Secondary.
For clean, professional diagrams:
roughness: 0 — Clean, crisp edges. Use for modern/technical diagrams.roughness: 1 — Hand-drawn, organic feel. Use for brainstorming/informal diagrams.Default to 0 for most professional use cases.
strokeWidth: 1 — Thin, elegant. Good for lines, dividers, subtle connections.strokeWidth: 2 — Standard. Good for shapes and primary arrows.strokeWidth: 3 — Bold. Use sparingly for emphasis (main flow line, key connections).Always use opacity: 100 for all elements. Use color, size, and stroke width to create hierarchy instead of transparency.
Instead of full shapes, use small dots (10-20px ellipses) as:
The most important element has the most empty space around it (200px+).
Guide the eye: typically left→right or top→bottom for sequences, radial for hub-and-spoke.
Position alone doesn't show relationships. If A relates to B, there must be an arrow.
Straight arrows are the default, but they cause overlaps in dense diagrams. When arrows cross through other elements, use curved or elbowed routing to clear obstacles. This is especially critical in ERDs, architecture diagrams, and any layout with many connections.
Straight — Only for direct neighbors with a clear, unobstructed path between them. Use 2 points: [[0,0], [dx, dy]].
Curved (primary overlap fix) — Use when a straight arrow would cross through other elements. Add "roundness": {"type": 2} and a 3-point arc: [[0,0], [midX, -arcHeight], [endX, endY]]. The midpoint's Y offset creates a smooth parabola that clears obstacles. Use 15-30px offset for short arrows, 30-50px for long ones. Negative Y = arc above, positive Y = arc below.
Elbowed — Use when curved isn't enough (same-row entities with many obstacles between). Set "elbowed": true with a 4-point right-angle path: [[0,0], [0, -offset], [targetX, -offset], [targetX, 0]]. Add "fixedSegments" to pin the horizontal segment.
Use the modern binding format with mode and fixedPoint (not the legacy focus/gap format):
"orbit" — Arrow attaches to shape's outer edge. Best for most connections. fixedPoint: [xRatio, yRatio] where [0,0.5] = left, [1,0.5] = right, [0.5,0] = top, [0.5,1] = bottom."inside" — Arrow starts/ends from inside the shape. Use for vertical drops within a column.See references/element-templates.md for full JSON templates of each arrow type.
During the render-view-fix loop, specifically check:
CRITICAL: The JSON text property contains ONLY readable words.
{
"id": "myElement1",
"text": "Start",
"originalText": "Start"
}
Settings: fontSize: 16, fontFamily: 3, textAlign: "center", verticalAlign: "middle"
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": 20
},
"files": {}
}
See references/element-templates.md for copy-paste JSON templates for each element type (text, line, dot, rectangle, arrow). Pull colors from references/color-palette.md based on each element's semantic purpose.
You cannot judge a diagram from JSON alone. After generating or editing the Excalidraw JSON, you MUST ATTENTION render it to PNG, view the image, and fix what you see — in a loop until it's right. This is a core part of the workflow, not a final check.
cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
This outputs a PNG next to the .excalidraw file. Then use the Read tool on the PNG to actually view it.
After generating the initial JSON, run this cycle:
1. Render & View — Run the render script, then Read the PNG.
2. Audit against your original vision — Before looking for bugs, compare the rendered result to what you designed in Steps 1-4. Ask:
3. Check for visual defects:
4. Fix — Edit the JSON to address everything you found. Common fixes:
x/y coordinates to fix spacing and alignmentroundness: {"type": 2} + 3-point arc) or elbowed (elbowed: true + 4-point path) — see Arrow Routing section5. Re-render & re-view — Run the render script again and Read the new PNG.
6. Repeat — Keep cycling until the diagram passes both the vision check (Step 2) and the defect check (Step 3). Typically takes 2-4 iterations. Don't stop after one pass just because no critical bugs — if the composition could be better, improve it.
The loop is done when:
If the render script hasn't been set up yet:
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
text contains only readable wordsfontFamily: 3roughness: 0 for clean/modern (unless hand-drawn style requested)opacity: 100 for all elements (no transparency)Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).
Generate .excalidraw JSON files that argue visually, not just display information.
Output directory: Save generated .excalidraw files to docs/diagrams/. Create the directory if it doesn't exist. Use kebab-case filenames that describe the diagram's subject (e.g., docs/diagrams/cqrs-command-flow.excalidraw, docs/diagrams/cross-service-messaging.excalidraw). If the user specifies a different path, use that instead.
Setup: If the user asks you to set up this skill (renderer, dependencies, etc.), see README.md for instructions.
AI Mistake Prevention — Failure modes to avoid on every task:
Re-read files after context changes. Context compaction, resume, or long-running work can make memory stale; verify current files before acting. Verify generated content against source evidence. AI hallucinates APIs, names, claims, and document facts. Check the relevant source before documenting or referencing. Check downstream references before deleting or renaming. Removing an artifact can stale docs, generated mirrors, configs, and callers; map references first. Trace the full impact chain after edits. Changing a definition can miss derived outputs and consumers. Follow the affected chain before declaring done. Verify ALL affected outputs, not just the first. One green check is not all green checks; validate every output surface the change can affect. Assume existing values are intentional — ask WHY before changing. Before changing a constant, limit, flag, wording, or pattern, read nearby context and history. Surface ambiguity before acting — don't pick silently. Multiple valid interpretations require an explicit question or stated assumption with risk. Keep shared guidance role-relevant. Universal guidance must help every receiving skill or agent; code-specific obligations belong only in code-specific protocols.
Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.
MUST ATTENTION apply critical + sequential thinking — every claim needs appropriate traced evidence (file:line for repo/code claims; source URL or artifact section for research, product, content, and docs claims); confidence >80% to act, <60% DO NOT recommend. Anti-hallucination: never present guess as fact, admit uncertainty freely, cross-reference independently, stay skeptical of own confidence.
MUST ATTENTION apply AI mistake prevention — verify generated content against evidence, trace downstream references before deleting or renaming, verify all affected outputs, re-read files after context loss, and surface ambiguity before acting.
IMPORTANT MUST ATTENTION follow declared step order for this skill; NEVER skip, reorder, or merge steps without explicit user approval
IMPORTANT MUST ATTENTION for every step/sub-skill call: set in_progress before execution, set completed after execution
IMPORTANT MUST ATTENTION every skipped step MUST include explicit reason; every completed step MUST include concise evidence
IMPORTANT MUST ATTENTION if Task tools unavailable, maintain an equivalent step-by-step plan tracker with synchronized statuses
IMPORTANT MUST ATTENTION Goal: Produce .excalidraw JSON diagrams that visually ARGUE a concept — where the structure itself carries the meaning and (for technical diagrams) concrete evidence artifacts teach — validated through the render-view-fix loop until the rendered image matches the conceptual design.
Protocols in force (concise digest of the SYNC/shared blocks this skill carries) — MUST ATTENTION honor each canonical body:
IMPORTANT MUST ATTENTION diagrams must ARGUE not DISPLAY — pass the Isomorphism Test (structure alone communicates the concept); NEVER ship a card grid or equal-box layout — map each concept to a DIFFERENT visual pattern (fan-out, convergence, timeline, tree, cycle) — why: uniform containers display labels, they do not argue meaning
IMPORTANT MUST ATTENTION the Render & Validate loop is MANDATORY — NEVER ship JSON without rendering to PNG via render_excalidraw.py, Reading the image, and fixing visual defects (clipping, overlaps, arrows crossing shapes) across 2-4 iterations — why: you cannot judge a diagram from JSON alone
IMPORTANT MUST ATTENTION cite file:line evidence for every claim with confidence >80% to act (<60% DO NOT recommend) — why: speculation produces wrong diagrams that pass silent review
IMPORTANT MUST ATTENTION break work into small todo tasks using task tracking BEFORE starting, keep exactly one in_progress, mark completed immediately, add a final review todo — why: context loss without a task list silently drops findings
IMPORTANT MUST ATTENTION assess depth FIRST (simple/conceptual vs comprehensive/technical) — technical diagrams MUST research real specs (actual event names, JSON formats, API/method names), search 3+ existing patterns before inventing, and embed evidence artifacts at all three zoom levels — why: closest example ≠ matching preconditions, and generic placeholders teach nothing
IMPORTANT MUST ATTENTION build comprehensive JSON section-by-section, NEVER in one pass — pass it through the ~32k-token output limit, use descriptive string IDs, namespace seeds per section (100xxx, 200xxx), update cross-section boundElements as you go — why: a single pass produces truncated, broken JSON
IMPORTANT MUST ATTENTION pull ALL colors from references/color-palette.md and NEVER invent new ones — use Primary/Neutral or Secondary when no semantic category fits — why: color encodes meaning, invented colors break the encoding
IMPORTANT MUST ATTENTION default text to free-floating (<30% inside containers) — for each boxed element ask "Would this work as free-floating text?" and remove the container if yes — why: typography creates hierarchy without boxes
Anti-Rationalization:
| Evasion | Rebuttal |
|---|---|
| "JSON looks correct, skip rendering" | You cannot judge a diagram from JSON — render to PNG, Read it, fix what you see. |
| "One render pass, no critical bugs, done" | Vision check ≠ defect check. Keep cycling until composition is balanced (2-4 passes). |
| "Generate the whole diagram in one response" | You will hit the ~32k output limit and produce broken JSON. Build section-by-section. |
| "Generic labels are enough for this" | Technical diagrams must show actual specs/formats/names — placeholders teach nothing. |
| "This color looks better" | Pull only from references/color-palette.md; invented colors break the meaning code. |
| "Box everything for consistency" | Default to free-floating text (<30% boxed); typography is the hierarchy, not borders. |
IMPORTANT MUST ATTENTION diagrams must ARGUE not DISPLAY — Render & Validate loop is MANDATORY (render → Read PNG → fix → repeat)
IMPORTANT MUST ATTENTION assess depth FIRST, research real specs for technical diagrams, build comprehensive JSON section-by-section
IMPORTANT MUST ATTENTION cite file:line evidence (confidence >80% to act); break work into small task tracking todos before starting and add a final review todo
[IMPORTANT] Analyze how big the task is and break it into many small todo tasks systematically before starting — this is very important.
Source: .claude/.ck.json + .claude/skills/shared/sync-inline-versions.md (:full blocks) + .claude/scripts/lib/hookless-prompt-protocol.cjs
Generic portability boundary: Reusable skills and protocol text stay project-neutral; project-specific conventions are discovered from docs/project-config.json and docs/project-reference/. Apply shared AI-SDD from shared/sdd-artifact-contract.md. Read docs/project-config.json and docs/project-reference/docs-index-reference.md, then open the project reference docs named there. For spec, test-case, behavior-change, public-contract, or docs/specs/ work, route through the local spec docs named by the docs index: feature-spec-reference.md, spec-system-reference.md, spec-principles.md, and workflow-spec-test-code-cycle-reference.md when specs/tests/code must stay synchronized. If either file or a required reference doc is missing or stale, auto-run $project-init (or the narrow lower-level route such as $project-config, $docs-init, $scan-all, or $scan --target=<key>) before ordinary project-specific work. Any supported AI tool may execute when this shared context and local docs are available.
$start-workflow <workflowId>; for a selected skill, invoke that skill; for a custom workflow, sequence custom steps directly; for direct execution, proceed with the task.Source: .claude/skills/shared/sync-inline-versions.md
AI-SDD Artifact Contract — Shared spec-driven development rules stay portable and source-owned.
- Keep reusable AI-SDD principles in
.claude; put repository-specific paths, commands, owners, products, and formats in project config/reference docs.- Preserve cycle:
spec -> plan -> tasks -> implement -> verify -> update spec/docs.- Trace every requirement or invariant through decision, task, TC/test, source evidence, and docs/spec update.
- Treat code-to-spec extraction as reference-only until accepted by the canonical spec owner.
- Any supported AI tool may plan, implement, review, or verify with synced context; using multiple tools is optional.
- Update
.claudesource first, then sync generated mirrors; do not manually edit.agents,.codex, orAGENTS.md. — why: mirrors are generated artifacts; hand-edits are overwritten on the next sync- If
docs/project-config.json, root instruction files, or a required project-reference doc is missing or stale, auto-run$project-initor the narrow lower-level route before ordinary project-specific work.Active reference:
shared/sdd-artifact-contract.mdin the active skills root.
shared/sdd-artifact-contract.md; keep reusable AI-SDD in .claude and local rules in project docs..claude source before syncing generated mirrors; do not manually edit .agents, .codex, or AGENTS.md.$project-init or the narrow setup route automatically.
[TASK-PLANNING] [MANDATORY] BEFORE executing any workflow or skill step, create/update task tracking for all planned steps, then keep it synchronized as each step starts/completes.Break work into small tasks (task tracking) before starting. Add final task: "Analyze AI mistakes & lessons learned".
Extract lessons — ROOT CAUSE ONLY, not symptom fixes:
$learn.$code-review/$code-simplifier/$security-review/$lint catch this?" — Yes → improve review skill instead.$learn.
[CRITICAL-THINKING-MINDSET] Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act.
Anti-hallucination principle: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.
AI Attention principle (Primacy-Recency): Put the 3 most critical rules at both top and bottom of long prompts/protocols so instruction adherence survives long context windows.
Goal-driven execution: Define success criteria first, loop until verified, and stop only when observable checks pass.
Tests verify intent: Tests must protect business rules/invariants and fail when the protected intent breaks, not only mirror current behavior.$start-workflow <workflowId>. NEVER answer or write code before checking. Skip = protocol violation.