@haposoft/cafekit 0.13.4 → 0.14.0

package/src/claude/skills/generate-graph/fixtures/system-architecture-style6.json

@@ -1,48 +0,0 @@
-{
-  "template_type": "architecture",
-  "style": 6,
-  "width": 1120,
-  "height": 700,
-  "style_overrides": {
-    "title_align": "center"
-  },
-  "title": "System Architecture",
-  "subtitle": "Claude official style with warm structure, restrained hierarchy, and deployment clarity",
-  "containers": [
-    { "x": 44, "y": 118, "width": 1032, "height": 110, "label": "", "side_label": "Interface Layer", "side_label_x": 28, "side_label_anchor": "start", "subtitle": "", "stroke": "#ded8cf", "fill": "none" },
-    { "x": 44, "y": 262, "width": 1032, "height": 154, "label": "", "side_label": "Core Layer", "side_label_x": 28, "side_label_anchor": "start", "subtitle": "", "stroke": "#ded8cf", "fill": "none" },
-    { "x": 44, "y": 450, "width": 1032, "height": 178, "label": "", "side_label": "Foundation Layer", "side_label_x": 28, "side_label_anchor": "start", "subtitle": "", "stroke": "#ded8cf", "fill": "none" }
-  ],
-  "nodes": [
-    { "id": "entry", "kind": "rect", "x": 82, "y": 146, "width": 170, "height": 54, "label": "Client Surface", "type_label": "ENTRY", "fill": "#e9f1fb", "stroke": "#8c6f5a", "flat": true },
-    { "id": "gateway", "kind": "double_rect", "x": 340, "y": 142, "width": 196, "height": 62, "label": "Gateway", "type_label": "ROUTER", "fill": "#f7ecda", "stroke": "#d97757" },
-    { "id": "planner", "kind": "rect", "x": 144, "y": 306, "width": 188, "height": 60, "label": "Task Planner", "type_label": "ORCHESTRATION", "fill": "#f7ecda", "stroke": "#d0b893", "flat": true },
-    { "id": "runtime", "kind": "double_rect", "x": 430, "y": 298, "width": 244, "height": 76, "label": "Model Runtime", "type_label": "INFERENCE", "fill": "#c8e4db", "stroke": "#8c6f5a" },
-    { "id": "guard", "kind": "rect", "x": 782, "y": 306, "width": 200, "height": 60, "label": "Policy Guardrails", "type_label": "SAFETY", "fill": "#efe8de", "stroke": "#d0c3b3", "flat": true },
-    { "id": "memory", "kind": "cylinder", "x": 96, "y": 494, "width": 154, "height": 92, "label": "Memory Store", "sublabel": "context + recall", "fill": "#e5e8df", "stroke": "#7b8b5c" },
-    { "id": "tools", "kind": "rect", "x": 382, "y": 510, "width": 184, "height": 60, "label": "Tool Runtime", "type_label": "ACTION", "fill": "#f7ecda", "stroke": "#d0b893", "flat": true },
-    { "id": "obs", "kind": "rect", "x": 688, "y": 510, "width": 184, "height": 60, "label": "Observability", "type_label": "OPS", "fill": "#efe8de", "stroke": "#d0c3b3", "flat": true },
-    { "id": "registry", "kind": "rect", "x": 906, "y": 510, "width": 138, "height": 60, "label": "Registry", "type_label": "ROLL OUT", "fill": "#efe8de", "stroke": "#d0c3b3", "flat": true }
-  ],
-  "arrows": [
-    { "source": "entry", "target": "gateway", "source_port": "right", "target_port": "left", "flow": "read" },
-    { "source": "gateway", "target": "planner", "source_port": "bottom", "target_port": "top", "flow": "control", "label": "decompose", "route_points": [[370,224], [370,336], [332,336]] },
-    { "source": "gateway", "target": "runtime", "source_port": "bottom", "target_port": "top", "flow": "read", "route_points": [[438,224], [552,224], [552,298]] },
-    { "source": "runtime", "target": "guard", "source_port": "right", "target_port": "left", "flow": "data" },
-    { "source": "runtime", "target": "memory", "source_port": "bottom", "target_port": "top", "flow": "write", "dashed": true, "route_points": [[606,432], [218,432], [218,494]] },
-    { "source": "runtime", "target": "tools", "source_port": "bottom", "target_port": "top", "flow": "read" },
-    { "source": "runtime", "target": "obs", "source_port": "bottom", "target_port": "top", "flow": "feedback", "dashed": true, "route_points": [[730,432], [780,432], [780,510]] },
-    { "source": "obs", "target": "registry", "source_port": "right", "target_port": "left", "flow": "control" }
-  ],
-  "legend": [
-    { "flow": "read", "label": "Primary request path" },
-    { "flow": "control", "label": "Planning / rollout control" },
-    { "flow": "write", "label": "Memory writeback" },
-    { "flow": "feedback", "label": "Operational telemetry" }
-  ],
-  "legend_position": "bottom-right",
-  "legend_box": true,
-  "legend_box_fill": "#fffaf3",
-  "legend_y": 596,
-  "footer": ""
-}

package/src/claude/skills/generate-graph/fixtures/tool-call-style2.json

@@ -1,182 +0,0 @@
-{
-  "template_type": "agent",
-  "style": 2,
-  "width": 1200,
-  "height": 700,
-  "window_controls": true,
-  "meta_center": "AGENT TOOL CALL EXECUTION FLOW · v1.0",
-  "meta_right": "style-2-dark-terminal",
-  "meta_fill": "#64748b",
-  "title": "Tool Call Flow",
-  "subtitle": "Dark terminal style with semantic action, retrieval, and execution paths",
-  "containers": [
-    {
-      "x": 36,
-      "y": 96,
-      "width": 1128,
-      "height": 142,
-      "label": "REQUEST PATH",
-      "subtitle": "",
-      "stroke": "#334155",
-      "fill": "rgba(15,23,42,0.18)"
-    },
-    {
-      "x": 36,
-      "y": 280,
-      "width": 1128,
-      "height": 202,
-      "label": "TOOLING FABRIC",
-      "subtitle": "",
-      "stroke": "#334155",
-      "fill": "rgba(15,23,42,0.18)"
-    },
-    {
-      "x": 36,
-      "y": 522,
-      "width": 1128,
-      "height": 126,
-      "label": "KNOWLEDGE + RESPONSE",
-      "subtitle": "",
-      "stroke": "#334155",
-      "fill": "rgba(15,23,42,0.18)"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "query",
-      "kind": "speech",
-      "x": 64,
-      "y": 126,
-      "width": 132,
-      "height": 62,
-      "label": "User query",
-      "fill": "#0f172a",
-      "stroke": "#38bdf8",
-      "flat": true
-    },
-    {
-      "id": "planner",
-      "kind": "double_rect",
-      "x": 292,
-      "y": 122,
-      "width": 188,
-      "height": 66,
-      "label": "Retrieve chunks",
-      "fill": "#111827",
-      "stroke": "#a855f7",
-      "glow": "purple"
-    },
-    {
-      "id": "answer",
-      "kind": "rect",
-      "x": 570,
-      "y": 122,
-      "width": 208,
-      "height": 66,
-      "label": "Generate answer",
-      "fill": "#111827",
-      "stroke": "#f97316"
-    },
-    {
-      "id": "kb",
-      "kind": "cylinder",
-      "x": 948,
-      "y": 104,
-      "width": 158,
-      "height": 122,
-      "label": "Knowledge base",
-      "sublabel": "embeddings",
-      "fill": "#0f172a",
-      "stroke": "#38bdf8",
-      "glow": "blue"
-    },
-    {
-      "id": "agent",
-      "kind": "bot",
-      "x": 380,
-      "y": 316,
-      "width": 138,
-      "height": 118,
-      "label": "Agent",
-      "sublabel": "planner + tool policy",
-      "accent_fill": "#34d399"
-    },
-    {
-      "id": "terminal",
-      "kind": "terminal",
-      "x": 676,
-      "y": 334,
-      "width": 178,
-      "height": 108,
-      "label": "Terminal",
-      "fill": "#111111",
-      "stroke": "#475569",
-      "header_fill": "#222222"
-    },
-    {
-      "id": "docs",
-      "kind": "folder",
-      "x": 962,
-      "y": 350,
-      "width": 168,
-      "height": 96,
-      "label": "Source documents",
-      "fill": "#3f2a00",
-      "stroke": "#f59e0b",
-      "line_stroke": "#fcd34d"
-    },
-    {
-      "id": "reply",
-      "kind": "speech",
-      "x": 250,
-      "y": 560,
-      "width": 172,
-      "height": 64,
-      "label": "Grounded answer",
-      "fill": "#0f172a",
-      "stroke": "#34d399",
-      "flat": true,
-      "glow": "green"
-    }
-  ],
-  "arrows": [
-    { "source": "query", "target": "planner", "source_port": "right", "target_port": "left", "flow": "read" },
-    { "source": "planner", "target": "answer", "source_port": "right", "target_port": "left", "flow": "data" },
-    { "source": "planner", "target": "kb", "source_port": "right", "target_port": "left", "flow": "control", "route_points": [[520, 96], [918, 96], [918, 165]] },
-    { "source": "kb", "target": "answer", "source_port": "left", "target_port": "right", "flow": "control" },
-    { "source": "query", "target": "agent", "source_port": "bottom", "target_port": "top", "flow": "read" },
-    { "source": "agent", "target": "terminal", "source_port": "right", "target_port": "left", "flow": "read" },
-    { "source": "terminal", "target": "docs", "source_port": "right", "target_port": "left", "flow": "read", "label": "pdfgrep / rga", "label_dx": -8 },
-    {
-      "source": "docs",
-      "target": "kb",
-      "source_port": "top",
-      "target_port": "bottom",
-      "flow": "feedback",
-      "label": "embed",
-      "corridor_x": [1090],
-      "label_dx": 18,
-      "label_dy": -12
-    },
-    { "source": "agent", "target": "reply", "source_port": "bottom", "target_port": "top", "flow": "read", "route_points": [[320, 544], [320, 560]] },
-    {
-      "source": "terminal",
-      "target": "agent",
-      "source_port": "bottom",
-      "target_port": "bottom",
-      "flow": "control",
-      "route_points": [[760, 464], [760, 488], [456, 488], [456, 434]]
-    }
-  ],
-  "legend": [
-    { "flow": "read", "label": "Agent / tool path" },
-    { "flow": "control", "label": "Planner / retrieval path" },
-    { "flow": "data", "label": "Answer synthesis" },
-    { "flow": "feedback", "label": "Embedding update" }
-  ],
-  "legend_position": "bottom-right",
-  "legend_box": true,
-  "legend_box_fill": "rgba(15,23,42,0.72)",
-  "legend_y": 604,
-  "footer": "Agent loop iterates until grounded context is ready"
-}

package/src/claude/skills/generate-graph/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@haposoft/generate-graph",
-  "version": "1.0.4",
-  "description": "CafeKit bundled Claude Code skill for generating production-quality SVG technical diagrams with optional PNG export via rsvg-convert.",
-  "main": "SKILL.md",
-  "keywords": [
-    "claude-code",
-    "skill",
-    "diagram",
-    "svg",
-    "architecture",
-    "flowchart",
-    "uml",
-    "sequence-diagram",
-    "er-diagram",
-    "visualization"
-  ],
-  "author": "Haposoft",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/haposoft/cafekit.git",
-    "directory": "packages/spec/src/claude/skills/generate-graph"
-  },
-  "bugs": {
-    "url": "https://github.com/haposoft/cafekit/issues"
-  },
-  "homepage": "https://github.com/haposoft/cafekit/tree/main/packages/spec/src/claude/skills/generate-graph",
-  "files": [
-    "SKILL.md",
-    "README.md",
-    "LICENSE",
-    "references/",
-    "scripts/",
-    "fixtures/",
-    "templates/",
-    "assets/"
-  ],
-  "engines": {
-    "node": ">=14.0.0"
-  }
-}

package/src/claude/skills/generate-graph/references/icons.md

@@ -1,281 +0,0 @@
-# Icon Reference
-
-## Rules for rsvg-convert Compatibility
-
-**Never use** `@import url()` for icon fonts — rsvg-convert does not fetch external resources.
-**Always use** inline SVG `<path>`, `<circle>`, `<rect>`, `<text>` combinations.
-**Font fallback**: embed font-family in `<style>` using system fonts only.
-
----
-
-## Generic Semantic Shapes (No product — use these first)
-
-### Database / Vector Store (cylinder)
-```xml
-<!-- cx=center-x, top=top-y, w=width, h=height -->
-<!-- Typical: w=80, h=70 -->
-<ellipse cx="cx" cy="top" rx="w/2" ry="w/6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<rect x="cx-w/2" y="top" width="w" height="h" fill="fill" stroke="none"/>
-<line x1="cx-w/2" y1="top" x2="cx-w/2" y2="top+h" stroke="stroke" stroke-width="1.5"/>
-<line x1="cx+w/2" y1="top" x2="cx+w/2" y2="top+h" stroke="stroke" stroke-width="1.5"/>
-<!-- Optional inner rings for Vector Store -->
-<ellipse cx="cx" cy="top+h*0.33" rx="w/2" ry="w/6" fill="none" stroke="stroke" stroke-width="0.7" opacity="0.5"/>
-<ellipse cx="cx" cy="top+h*0.66" rx="w/2" ry="w/6" fill="none" stroke="stroke" stroke-width="0.7" opacity="0.5"/>
-<ellipse cx="cx" cy="top+h" rx="w/2" ry="w/6" fill="fill-dark" stroke="stroke" stroke-width="1.5"/>
-```
-
-### LLM / Model Node (rounded rect with spark)
-```xml
-<!-- Rounded rect with double border = "intelligent" signal -->
-<rect x="x" y="y" width="w" height="h" rx="10" fill="fill" stroke="stroke-outer" stroke-width="2.5"/>
-<rect x="x+3" y="y+3" width="w-6" height="h-6" rx="8" fill="none" stroke="stroke-inner" stroke-width="0.8" opacity="0.5"/>
-<!-- Spark icon (⚡) as text or small lightning path -->
-<text x="cx" y="cy-6" text-anchor="middle" font-size="14">⚡</text>
-<text x="cx" y="cy+10" text-anchor="middle" fill="text-color" font-size="13" font-weight="600">GPT-4o</text>
-```
-
-### Agent / Orchestrator (hexagon)
-```xml
-<!-- r = circumradius, cx/cy = center -->
-<!-- For r=36: points at 36,0  18,31.2  -18,31.2  -36,0  -18,-31.2  18,-31.2 -->
-<polygon points="cx,cy-r  cx+r*0.866,cy-r*0.5  cx+r*0.866,cy+r*0.5  cx,cy+r  cx-r*0.866,cy+r*0.5  cx-r*0.866,cy-r*0.5"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="12" font-weight="600">Agent</text>
-```
-
-### Memory Node (short-term, dashed border)
-```xml
-<rect x="x" y="y" width="w" height="h" rx="8"
-      fill="fill" stroke="stroke" stroke-width="1.5" stroke-dasharray="6,3"/>
-<text x="cx" y="cy-6" text-anchor="middle" fill="text" font-size="10" opacity="0.7">MEMORY</text>
-<text x="cx" y="cy+8" text-anchor="middle" fill="text" font-size="13">Short-term</text>
-```
-
-### Tool / Function Call (rect with gear symbol)
-```xml
-<rect x="x" y="y" width="w" height="h" rx="6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Gear: simplified as ⚙ unicode or small circle with lines -->
-<text x="cx" y="cy-4" text-anchor="middle" font-size="16">⚙</text>
-<text x="cx" y="cy+12" text-anchor="middle" fill="text" font-size="12">Tool Name</text>
-```
-
-### Queue / Stream (horizontal pipe)
-```xml
-<!-- Pipe tube: left cap ellipse + body + right cap ellipse -->
-<ellipse cx="x1" cy="cy" rx="ry*0.6" ry="ry" fill="fill-dark" stroke="stroke" stroke-width="1.5"/>
-<rect x="x1" y="cy-ry" width="x2-x1" height="ry*2" fill="fill" stroke="none"/>
-<line x1="x1" y1="cy-ry" x2="x2" y2="cy-ry" stroke="stroke" stroke-width="1.5"/>
-<line x1="x1" y1="cy+ry" x2="x2" y2="cy+ry" stroke="stroke" stroke-width="1.5"/>
-<ellipse cx="x2" cy="cy" rx="ry*0.6" ry="ry" fill="fill-light" stroke="stroke" stroke-width="1.5"/>
-```
-
-### User / Human Actor
-```xml
-<!-- Head -->
-<circle cx="cx" cy="cy-18" r="10" fill="fill" stroke="stroke" stroke-width="1.2"/>
-<!-- Body / shoulders -->
-<path d="M cx-14,cy+16 Q cx-14,cy-4 cx,cy-4 Q cx+14,cy-4 cx+14,cy+16"
-      fill="fill" stroke="stroke" stroke-width="1.2"/>
-<text x="cx" y="cy+30" text-anchor="middle" fill="text" font-size="12">User</text>
-```
-
-### API Gateway (hexagon, single border, smaller)
-```xml
-<polygon points="cx,cy-28  cx+24,cy-14  cx+24,cy+14  cx,cy+28  cx-24,cy+14  cx-24,cy-14"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="11">API</text>
-```
-
-### Browser / Web Client
-```xml
-<rect x="x" y="y" width="w" height="h" rx="6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Title bar -->
-<rect x="x" y="y" width="w" height="20" rx="6" fill="fill-dark" stroke="none"/>
-<rect x="x" y="y+14" width="w" height="6" fill="fill-dark"/>
-<!-- Traffic light dots -->
-<circle cx="x+12" cy="y+10" r="4" fill="#ef4444" opacity="0.8"/>
-<circle cx="x+24" cy="y+10" r="4" fill="#f59e0b" opacity="0.8"/>
-<circle cx="x+36" cy="y+10" r="4" fill="#10b981" opacity="0.8"/>
-```
-
-### Document / File
-```xml
-<!-- Folded corner rectangle -->
-<path d="M x,y L x+w-12,y L x+w,y+12 L x+w,y+h L x,y+h Z"
-      fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Fold -->
-<path d="M x+w-12,y L x+w-12,y+12 L x+w,y+12" fill="fill-dark" stroke="stroke" stroke-width="1"/>
-<!-- Lines inside -->
-<line x1="x+8" y1="y+h*0.45" x2="x+w-8" y2="y+h*0.45" stroke="stroke" stroke-width="1" opacity="0.5"/>
-<line x1="x+8" y1="y+h*0.6"  x2="x+w-8" y2="y+h*0.6"  stroke="stroke" stroke-width="1" opacity="0.5"/>
-<line x1="x+8" y1="y+h*0.75" x2="x+w-16" y2="y+h*0.75" stroke="stroke" stroke-width="1" opacity="0.5"/>
-```
-
-### Decision Diamond (flowcharts)
-```xml
-<!-- cx/cy = center, hw = half-width, hh = half-height -->
-<polygon points="cx,cy-hh  cx+hw,cy  cx,cy+hh  cx-hw,cy"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="12">Condition?</text>
-```
-
-### Swim Lane Container
-```xml
-<!-- Background band for a layer/group -->
-<rect x="x" y="y" width="w" height="h" rx="6"
-      fill="fill" fill-opacity="0.04" stroke="stroke" stroke-width="1" stroke-dasharray="6,4"/>
-<!-- Layer label top-left -->
-<text x="x+12" y="y+16" fill="label-color" font-size="10" font-weight="600" letter-spacing="0.06em">LAYER NAME</text>
-```
-
----
-
-## Product Icons (Brand Colors + Inline SVG)
-
-All use circle badge + text abbreviation pattern. Replace `cx`, `cy` with actual coordinates.
-
-### AI / ML Products
-
-| Product | Color | Badge Text |
-|---------|-------|-----------|
-| OpenAI / ChatGPT | `#10A37F` | `OAI` |
-| Anthropic / Claude | `#D97757` | `Claude` |
-| Google Gemini | `#4285F4` | `Gemini` |
-| Meta LLaMA | `#0467DF` | `LLaMA` |
-| Mistral | `#FF7000` | `Mistral` |
-| Cohere | `#39594D` | `Cohere` |
-| Groq | `#F55036` | `Groq` |
-| Together AI | `#6366F1` | `Together` |
-| Replicate | `#191919` | `Rep` |
-| Hugging Face | `#FFD21E` (text dark) | `HF` |
-
-**Template:**
-```xml
-<circle cx="cx" cy="cy" r="22" fill="BRAND_COLOR"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="white"
-      font-size="10" font-weight="700" font-family="Helvetica">BADGE_TEXT</text>
-<!-- Optional: outer ring for "AI" products -->
-<circle cx="cx" cy="cy" r="24" fill="none" stroke="BRAND_COLOR" stroke-width="1" opacity="0.4"/>
-```
-
-### AI Memory & RAG Products
-
-| Product | Color | Badge |
-|---------|-------|-------|
-| Mem0 | `#6366F1` | `mem0` |
-| LangChain | `#1C3C3C` | `🦜` or `LC` |
-| LlamaIndex | `#8B5CF6` | `LI` |
-| LangGraph | `#1C3C3C` | `LG` |
-| CrewAI | `#EF4444` | `Crew` |
-| AutoGen | `#0078D4` | `AG` |
-| Haystack | `#FF6D00` | `🌾` or `HS` |
-| DSPy | `#7C3AED` | `DSPy` |
-
-### Vector Databases
-
-| Product | Color | Badge |
-|---------|-------|-------|
-| Pinecone | `#1C1C2E` + green | `Pine` |
-| Weaviate | `#FA0050` | `Wea` |
-| Qdrant | `#DC244C` | `Qdrant` |
-| Chroma | `#FF6B35` | `Chr` |
-| Milvus | `#00A1EA` | `Milvus` |
-| pgvector | `#336791` | `pgv` |
-| Faiss | `#0467DF` | `FAISS` |
-
-**Vector DB template (cylinder + badge):**
-```xml
-<!-- Cylinder shape -->
-<ellipse cx="cx" cy="top" rx="40" ry="12" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
-<rect x="cx-40" y="top" width="80" height="50" fill="FILL" stroke="none"/>
-<line x1="cx-40" y1="top" x2="cx-40" y2="top+50" stroke="STROKE" stroke-width="1.5"/>
-<line x1="cx+40" y1="top" x2="cx+40" y2="top+50" stroke="STROKE" stroke-width="1.5"/>
-<ellipse cx="cx" cy="top+50" rx="40" ry="12" fill="FILL_DARK" stroke="STROKE" stroke-width="1.5"/>
-<!-- Product name -->
-<text x="cx" y="top+30" text-anchor="middle" fill="white"
-      font-size="11" font-weight="700">Pinecone</text>
-```
-
-### Classic Databases & Storage
-
-| Product | Color |
-|---------|-------|
-| PostgreSQL | `#336791` |
-| MySQL | `#4479A1` |
-| MongoDB | `#47A248` |
-| Redis | `#DC382D` |
-| Elasticsearch | `#005571` |
-| Cassandra | `#1287B1` |
-| Neo4j | `#008CC1` |
-| SQLite | `#003B57` |
-
-### Message Queues & Streaming
-
-| Product | Color |
-|---------|-------|
-| Apache Kafka | `#231F20` |
-| RabbitMQ | `#FF6600` |
-| AWS SQS | `#FF9900` |
-| NATS | `#27AAE1` |
-| Pulsar | `#188FFF` |
-
-### Cloud & Infra
-
-| Product | Color |
-|---------|-------|
-| AWS | `#FF9900` |
-| GCP | `#4285F4` |
-| Azure | `#0089D6` |
-| Cloudflare | `#F48120` |
-| Vercel | `#000000` |
-| Docker | `#2496ED` |
-| Kubernetes | `#326CE5` |
-| Terraform | `#7B42BC` |
-| Nginx | `#009639` |
-| FastAPI | `#009688` |
-
-### Observability
-
-| Product | Color |
-|---------|-------|
-| Grafana | `#F46800` |
-| Prometheus | `#E6522C` |
-| Datadog | `#632CA6` |
-| LangSmith | `#1C3C3C` |
-| Langfuse | `#6366F1` |
-| Arize | `#6B48FF` |
-
----
-
-## Icon Sizing Guide
-
-| Context | Recommended Size | Padding |
-|---------|-----------------|---------|
-| Node badge (inside box) | 28×28px circle | 10px |
-| Standalone icon node | 40×40px | 16px |
-| Hero / central node | 56×56px | 20px |
-| Small inline indicator | 16×16px | 6px |
-
-## Arrow Marker Templates
-
-```xml
-<defs>
-  <!-- Standard filled arrow -->
-  <marker id="arrow-COLORNAME" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="COLOR"/>
-  </marker>
-
-  <!-- Open arrow (outline only) -->
-  <marker id="arrow-open" markerWidth="10" markerHeight="8"
-          refX="9" refY="4" orient="auto">
-    <path d="M 0 0 L 10 4 L 0 8" fill="none" stroke="COLOR" stroke-width="1.5"/>
-  </marker>
-
-  <!-- Circle dot (for association lines) -->
-  <marker id="dot" markerWidth="8" markerHeight="8"
-          refX="4" refY="4" orient="auto">
-    <circle cx="4" cy="4" r="3" fill="COLOR"/>
-  </marker>
-</defs>
-```

package/src/claude/skills/generate-graph/references/style-1-flat-icon.md

@@ -1,108 +0,0 @@
-# Style 1: Flat Icon (Default)
-
-Inspired by draw.io defaults and Apple documentation style.
-
-## Colors
-
-```
-Background:     #ffffff
-Box fill:       #ffffff
-Box stroke:     #d1d5db  (gray-300)
-Box radius:     8px
-Text primary:   #111827  (gray-900)
-Text secondary: #6b7280  (gray-500)
-
-Semantic arrow colors (pick by flow type):
-  Flow A (main):   #2563eb  (blue-600)
-  Flow B (alt):    #dc2626  (red-600)
-  Flow C (data):   #16a34a  (green-600)
-  Flow D (async):  #9333ea  (purple-600)
-
-Icon accent backgrounds:
-  Blue tint:   #eff6ff / #dbeafe
-  Red tint:    #fef2f2 / #fee2e2
-  Green tint:  #f0fdf4 / #dcfce7
-  Purple tint: #faf5ff / #ede9fe
-  Orange tint: #fff7ed / #fed7aa
-  Teal tint:   #f0fdfa / #ccfbf1
-```
-
-## Typography
-
-```
-font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 
-             'Microsoft YaHei', sans-serif
-font-size:   14px labels, 12px sub-labels, 16px titles
-font-weight: 400 normal, 600 semi-bold for titles
-```
-
-## Box Shapes
-
-```xml
-<!-- Standard node box -->
-<rect rx="8" ry="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-
-<!-- Icon accent box (colored background) -->
-<rect rx="8" ry="8" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1.5"/>
-
-<!-- Database cylinder (use SVG path) -->
-<!-- Terminal box: rx=4, fill=#111827, stroke=#374151 -->
-<!-- User/actor: circle or rounded rect with icon -->
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-blue" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-  </marker>
-  <marker id="arrow-red" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626"/>
-  </marker>
-</defs>
-
-<!-- Line -->
-<line stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow-blue)"/>
-<!-- Or path for curved/orthogonal routing -->
-<path stroke="#2563eb" stroke-width="1.5" fill="none" marker-end="url(#arrow-blue)"/>
-```
-
-## Legend
-
-Always include a legend in the bottom-left if multiple arrow colors are used:
-
-```xml
-<g transform="translate(20, 560)">
-  <line x1="0" y1="8" x2="30" y2="8" stroke="#2563eb" stroke-width="1.5"
-        marker-end="url(#arrow-blue)"/>
-  <text x="36" y="12" fill="#6b7280" font-size="12">Agent flow</text>
-  <line x1="0" y1="24" x2="30" y2="24" stroke="#dc2626" stroke-width="1.5"
-        marker-end="url(#arrow-red)"/>
-  <text x="36" y="28" fill="#6b7280" font-size="12">RAG flow</text>
-</g>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" 
-     width="960" height="600">
-  <style>
-    /* NO @import — rsvg-convert cannot fetch external URLs */
-    text { font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
-  </style>
-  <defs>
-    <!-- arrow markers here -->
-    <!-- gradients/filters if needed -->
-  </defs>
-  <!-- white background -->
-  <rect width="960" height="600" fill="#ffffff"/>
-  <!-- diagram title (optional) -->
-  <!-- nodes -->
-  <!-- edges -->
-  <!-- legend -->
-</svg>
-```