@drunkcoding/agents-and-skills 0.0.44 → 0.0.46

package/plugins/tech-graph/skills/tech-graph/references/style-6-claude-official.md

@@ -1,209 +0,0 @@
-# Style 6: Claude Official
-
-Inspired by Anthropic's Claude blog technical diagrams — warm, approachable, professional.
-s
-
-```
-Background:     #f8f6f3  (warm cream)
-Box fill:       
-  - Blue tint:   #a8c5e6  (alert/input nodes)
-  - Green tint:  #9dd4c7  (agent nodes)
-  - Beige:       #f4e4c1  (infrastructure/bus)
-  - Gray tint:   #e8e6e3  (storage/state)
-Box stroke:     #4a4a4a  (dark gray)
-Box radius:     12px
-Text primary:   #1a1a1a  (near black)
-Text secondary: #6a6a6a  (medium gray)
-Text labels:    #5a5a5a  (arrow labels)
-
-Semanode colors:
-  Input/Source:    #a8c5e6  (soft blue)
-  Agent/Process:   #9dd4c7  (soft teal-green)
-  Infrastructure:  #f4e4c1  (warm beige)
-  Storage/State:   #e8e6e3  (light gray)
-  
-Arrow color:     #5a5a5a  (consistent dark gray)
-`ypography
-
-```
-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-             Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif
-font-size:   16px node labels, 14px descriptions, 13px arrow labels
-font-weight: 600 for node labels, 400 for descriptions, 700 for titles
-```
-
-## Box Shapes
-
-```xml
-<!-- Agent node (teal-green) -->
-<rect rx="12" ry="12" fill="#9dd4c7" stroke="#4a4a4a" stroke-width="2.5"/>
-
-<!-- Input/Source node (soft blue) -->
-<rect rx="12" ry="12" fill="#a8c5e6" stroke="#4a4a4a" stroke-width="2.5"/>
-
-<!-- Infrastructure node (warm beige) -->
-<rect rx="12" ry="12" fill="#f4e4c1" stroke="#4a4a4a" stroke-width="2.5"/>
-
-<!-- Storage/State node (light gray) -->
-<rect rx="12" ry="12" fill="#e8e6e3" stroke="#4a4a4a" stroke-width="2.5"/>
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-claude" markerWidth="8" markerHeight="8"
-          refX="7" refY="4" orient="auto">
-    <polygon points="0 0, 8 4, 0 8" fill="#5a5a5a"/>
-  </marker>
-</defs>
-
-<!-- Arrow line -->
-<line stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
-
-<!-- Or use simple line without arrowhead for cleaner look -->
-<line stroke="#5a5a5a" stroke-width="2"/>
-```
-
-## Arrow Semantics
-
-Use different arrow styles to convey meaning:
-
-| Flow Type | Color | Stroke | Dash | Usage |
-|-----------|-------|--------|------|-------|
-| Primary data flow | #5a5a5a | 2px solid | none | Main request/response path |
-| Memory write | #5a5a5a | 2px | `5,3` | Write/store operations |
-| Memory read | #5a5a5a | 2px solid | none | Retrieval from store |
-| Control/trigger | #5a5a5a | 1.5px | `3,2` | Event triggers |
-
-```xml
-<!-- Solid arrow for reads -->
-<line stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
-
-<!-- Dashed arrow for writes -->
-<line stroke="#5a5a5a" stroke-width="2" stroke-dasharray="5,3" marker-end="url(#arrow-claude)"/>
-```
-
-## Arrow Labels
-
-Arrow labels should be **technical and specific**, positioned mid-arrow:
-
-```xml
-<text x="..." y="..." fill="#5a5a5a" font-size="13" text-anchor="middle">
-  store(embedding)
-</text>
-```
-
-Good lls: `query(text)`, `retrieve(top_k=5)`, `embed(768d)`, `POST /api/search`
-Avoid vague labels: "Process", "Send", "Get"
-
-## Node Content Guidelines
-
-Node content should include **technical details**, not just concepts:
-
-**Good examples:**
-- "Vector Store" → "Vector Sne)" + "• 768-dim embeddings" + "• Cosine s"
-- "LLM" → "GPT-4" + "• 8K context" + "• Temperature: 0.7"
-- "Memory" → "Redis Cache" + "• TTL: 5min" + "• Max: 4K tokens"
-
-**Avoid vague descriptions:**
-- "Process data" → specify what processing
-- "Store information" → specify storage type and format
-- "Handle requests" → specify request type and method
-
-Use 2-3 lines per node:
-1. Component name (bold, 16px)
-2. Technical detail or implementation (14px)
-3. Key parameter or constraint (14px, optional)
-
-## Layer Labels
-
-For multi-layer architectures, add layer labels on the left side:
-
-```xml
-<text x="30" y="130" fill="#6a6a6a" font-size="14" font-weight="600">Input</text>
-<text x="30" y="290" fill="#6a6a6a" font-size="14" font-weight="600">Processing</text>
-<text x="30" y="490" fill="#6a6a6a" font-size="14" font-weight="600">Storage</text>
-```
-
-Position at the vertical center of each layer.
-
-## Legend Requirement
-
-When using 2+ arrow types or colors, include a legend in the bottom-right corner:
-
-```Legend box -->="720" y="520" width="220" height="8" ry="8" 
-      fill="#ffffff" stroke="#4a4a4a" stroke-width="1.5"/>
-<text x="735" y="540" fill="#1a1a1a" font-size="13" font-weight="600">Legend</text>
-
-<!-- Legend items -->
-<line x1="735" y1="555" x2="765" y2="555" stroke="#5a5a5a" stroke-width="2"/>
-<text x="775" y="560" fill="#6a6a6a" font-size="12">Read operation</text>
-
-<line x1="735" y1="570" x2="765" y2="570" stroke="#5a5a5a" stroke-width="2" stroke-dasharray="5,3"/>
-<text x="775" y="575" fill="#6a6a6a" font-size="12">Write operation</text>
-```
-
-Position: bottom-right, 20px margin from edges.
-
-## Layout Principles
-
-- **Generous spacing**: Minimum 80px between node edges
-- **Horizontal alignment same layer align perfectly
-- **Vertical flow**: Top-to-bottom preferred
-- **Symmetry**: Balaight composition
-- **Clean lines**: Orthogonal rotical then horizontal, or vice# SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" 
-     width="960" height="600">
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-                   'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif;
-    }
-  </style>
-  <defs>
-    <marker id="arrow-claude" markerWidth="8" markerHeight="8"
-            refX="7" refY="4" orient="auto">
-      <polygon points="0 0, 8 4, 0 8" fill="#5a5a5a"/>
-    </marker>
-    <filter id="shadow-soft">
-      <feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#00000008"/>
-    </filter>
-  </defs>
-  
-  <!-- Warm cream background -->
-  <rect width="960" height="600" fill="#f8f6f3"/>
-  
-  <!-- Title (optional) -->
-  <text x="480" y="40" text-anchor="middle" fill="#1a1a1a" 
-        font-size="20" font-weight="700">Diagram Title</text>
-  
-  <!-- Nodes -->
-  <!-- Agent node example -->
-  <rect x="100" y=" width="180" height="80" rx="12" ry="12"
-        fill="#9dd4c7" stroke="#4a4a4a" stroke-width="2.5" 
-        filter="url(#shadow-soft)"/>
-  <text x="190" y="145" text-anchor="middle" fill="#1a1a1a" 
-        16" font-weight="600">Agent name</text>
-  
-  <!-- Edges -->
-  <line x1="190" y1="180" x2="190" y2="240" 
-        stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
-  <text x="210" y="215" fill="#5a5a5a" font-size="13">Publish</text>
-</svg>
-```
-
-## Design Philosophy
-
-Claude's official style emphasizes:
-- **Warmth**: Cream background, ls
-- ty**: High contrast text, generous spacing
-- **Professionalism**: Consistent stroke weights, aligned elements
-- **Approachability**: Rounded corners, friendly colors
-
-Avoid:
-- Harsh shadows or gradients
-- Overly saturated colors
-- Thin stroke weights (< 2px)
-- Cluttered layouts

package/plugins/tech-graph/skills/tech-graph/references/style-7-openai.md

@@ -1,215 +0,0 @@
-# Style 7: OpenAI Official
-
-Clean, modern aesthetic matching OpenAI's documentation and research diagrams — minimal but precise.
-
-## Color Palette
-
-```
-Background:     #ffffff  (pure white)
-Primary text:   #0d0d0d  (near black)
-Secondary text: #6e6e80  (muted gray)
-Border:         #e5e5e5  (light gray)
-
-Accent colors (reserved):
-Green accent:   #10a37f  (OpenAI brand green)
-Blue accent:    #1d4ed8  (links, actions)
-Orange accent:  #f97316  (highlights, warnings)
-Gray accent:    #71717a  (secondary elements)
-```
-
-## Typography
-
-```
-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif
-font-size:   16px node labels, 13px descriptions, 12px arrow labels
-font-weight: 600 for titles, 500 for labels, 400 for descriptions
-letter-spacing: -0.01em (tight)
-```
-
-No custom fonts. System font stack only for maximum compatibility.
-
-## Node Boxes
-
-Clean, minimal boxes with subtle borders:
-
-```xml
-<!-- Standard node -->
-<rect x="100" y="100" width="180" height="80" rx="8" ry="8"
-      fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-
-<!-- Accent node (with green left border) -->
-<rect x="100" y="100" width="180" height="80" rx="8" ry="8"
-      fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-<rect x="100" y="100" width="4" height="80" rx="2" ry="2"
-      fill="#10a37f"/>
-```
-
-**Key techniques:**
-1. White fill with light gray border (no shadows)
-2. Optional colored left-border accent strip (4px wide)
-3. `rx="8"` for subtle rounding
-4. `stroke-width: 1.5` — thin, precise borders
-5. No gradients, no shadows, no decorative elements
-
-## Arrows
-
-Thin, precise arrows with subtle colors:
-
-```xml
-<defs>
-  <!-- Default arrow (gray) -->
-  <marker id="arrow-oai" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#71717a"/>
-  </marker>
-
-  <!-- Accent arrow (green) -->
-  <marker id="arrow-oai-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#10a37f"/>
-  </marker>
-</defs>
-
-<!-- Default connection -->
-<line x1="280" y1="140" x2="400" y2="140"
-      stroke="#71717a" stroke-width="1.5" marker-end="url(#arrow-oai)"/>
-
-<!-- Accent connection -->
-<line x1="280" y1="140" x2="400" y2="140"
-      stroke="#10a37f" stroke-width="1.5" marker-end="url(#arrow-oai-green)"/>
-```
-
-**Arrow guidelines:**
-- Prefer straight lines (orthogonal routing with right angles)
-- `stroke-width: 1.5` — thin and precise
-- Filled polygon arrowheads (not stroke-based)
-- Gray for default, green for primary/accent flows
-- Dashed (`stroke-dasharray="4,3"`) for optional/async flows
-
-## Arrow Labels
-
-Minimal, small labels:
-
-```xml
-<text x="340" y="133" text-anchor="middle" fill="#6e6e80" font-size="12">
-  label
-</text>
-```
-
-Labels should be:
-- 12px, gray color (`#6e6e80`)
-- No background rect (white background is default)
-- Short, technical language
-- Midpoint of arrow
-
-## Database Shapes
-
-Clean cylinders with thin borders:
-
-```xml
-<ellipse cx="200" cy="100" rx="50" ry="12" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-<path d="M 150,100 L 150,140 Q 200,155 250,140 L 250,100"
-      fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-<ellipse cx="200" cy="140" rx="50" ry="12" fill="none" stroke="#e5e5e5" stroke-width="1.5"/>
-```
-
-## Grouping Containers
-
-Dashed rect containers for logical grouping:
-
-```xml
-<rect x="80" y="80" width="400" height="200" rx="8" ry="8"
-      fill="none" stroke="#e5e5e5" stroke-width="1" stroke-dasharray="4,3"/>
-<text x="90" y="97" fill="#6e6e80" font-size="12" font-weight="500">
-  Group Label
-</text>
-```
-
-## Node Content
-
-Clean, minimal text layout:
-
-```xml
-<rect x="100" y="100" width="180" height="80" rx="8" ry="8"
-      fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-<text x="190" y="130" text-anchor="middle" fill="#0d0d0d"
-      font-size="16" font-weight="600">
-  Component Name
-</text>
-<text x="190" y="150" text-anchor="middle" fill="#6e6e80"
-      font-size="13">
-  Brief description
-</text>
-```
-
-**Content guidelines:**
-- 1-2 lines per box
-- Main label: 16px, font-weight: 600, near-black
-- Description: 13px, font-weight: 400, gray
-- Center-aligned text within boxes
-
-## Layout Principles
-
-**Precise, grid-aligned layout:**
-- Snap all coordinates to 8px grid
-- Consistent 100px horizontal spacing
-- Consistent 120px vertical spacing
-- Generous whitespace (40px+ margins)
-- No decorative elements
-
-**OpenAI minimalism:**
-- Only use color when semantically meaningful (brand green for primary flow)
-- White boxes on white background — differentiation through border and label only
-- Avoid: shadows, gradients, patterns, icons, decorative elements
-- Prefer: straight lines, orthogonal routing, thin strokes
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" width="960" height="600">
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif; }
-  </style>
-  <defs>
-    <marker id="arrow-oai" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#71717a"/>
-    </marker>
-    <marker id="arrow-oai-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#10a37f"/>
-    </marker>
-  </defs>
-
-  <!-- White background -->
-  <rect width="960" height="600" fill="#ffffff"/>
-
-  <!-- Title -->
-  <text x="480" y="30" text-anchor="middle" fill="#0d0d0d"
-        font-size="20" font-weight="600">Diagram Title</text>
-
-  <!-- Standard node -->
-  <rect x="100" y="70" width="180" height="80" rx="8" ry="8"
-        fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>
-  <text x="190" y="100" text-anchor="middle" fill="#0d0d0d"
-        font-size="16" font-weight="600">Component</text>
-  <text x="190" y="120" text-anchor="middle" fill="#6e6e80"
-        font-size="13">Description</text>
-
-  <!-- Connection -->
-  <line x1="280" y1="110" x2="400" y2="110"
-        stroke="#71717a" stroke-width="1.5" marker-end="url(#arrow-oai)"/>
-  <text x="340" y="103" text-anchor="middle" fill="#6e6e80" font-size="12">label</text>
-</svg>
-```
-
-## Design Philosophy
-
-OpenAI Official style emphasizes:
-- **Minimalism**: White on white, only essential visual elements
-- **Precision**: Thin strokes, sharp corners (rx=8), grid-aligned
-- **Clarity**: Content-first, no visual noise
-- **Brand consistency**: `#10a37f` green used sparingly for primary flows
-
-Avoid:
-- Shadows and gradients
-- Colorful fills (white fill only)
-- Thick borders (>2px)
-- Decorative elements (icons, patterns, textures)
-- Custom fonts (system stack only)

package/plugins/tech-graph/skills/tech-graph/references/style-diagram-matrix.md

@@ -1,135 +0,0 @@
-# Style-to-Diagram-Type Adaptation Guide
-
-Not all styles work equally well for every diagram type. Use this guide to pick the best style.
-
-## Architecture Diagram
-| Style | Suitability | Notes |
-|-------|----------|
-| 1 Flat Icon | Excellent | Default choice; colorful node fills, clear layering |
-| 2 Dark Terminal | Excellent | Popular for dev blogs; use colored borders on dark bg |
-| 3 Blueprint | Excellent | Perfect for formal architecture docs |
-| 4 Notion Clean | Good | Minimal, works for inline docs |
-| 5 Glassmorphism | Good | Striking for presentations and product pages |
-| 6 Claude Official | Good | Warm aesthetic, Anthropic-style presentations |
-| 7 OpenAI Official | Good | Clean, precise; minimal borders, brand green accents |
-
-## Class Diagram / ER Diagram
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Good | Colored headers per class category |
-| 2 Dark Terminal | Good | High contrast for code-like diagrams |
-| 3 Blueprint | Excellent | Best for formal UML documentation |
-| 4 Notion Clean | Excellent | Clean, minimal; ideal for Notion-embedded diagrams |
-| 5 Glassmorphism | Poor | Glass effects distract from structural content |
-| 6 Claude Official | Excellent | Warm, readable; good for documentation |
-| 7 OpenAI Official | Excellent | Minimal aesthetic matches UML precision |
-
-## Sequence Diagram
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Good | Clear lifelines; activation boxes visible |
-| 2 Dark Terminal | Good | Good for dev articles; dashed lifelines visible |
-| 3 Blueprint | Excellent | Formal, technical documentation |
-| 4 Notion Clean | Excellent | Best for Notion-embedded sequence diagrams |
-| 5 Glassmorphism | Poor | Glass effects make lifelines hard to read |
-| 6 Claude Official | Excellent | Ward contrast |
-| 7 OpenAI Official | Excellent | Minimal, precise; ideal for API docs |
-
-## Flowchart / Process Flow
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Default; colorful decision diamonds |
-| 2 Dark Terminal | Good | Works well for dev workflow diagrams |
-| 3 Blueprint | Good | Formal process documentation |
-| 4 Notion Clean | Good | Clean for SOPs and inline docs |
-| 5 Glassmorphism | Good | Striking for product demos |
-| 6 Claude Official | Good | Warm aesthetic for presentations |
-| 7 OpenAI Official | Good | Clean and minimal |
-
-## Mind Map / Concept Map
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent branches, engaging |
-| 2 Dark Terminal | Good | Neon-like branches on dark bg |
-| 3 Blueprint | Poor | Blueprint grid conflicts with radial layout |
-| 4 Notion Clean | Excellent | Ideal for n brainstorming |
-| 5 Glassmorphism | Excellent | Stunning visual for presentations |
-| 6 Claude Official | Good | Warm, readable |
-| 7 OpenAI Official | Good | Clean and minimal |
-
-## Data Flow Diagram
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Color-coded arrows by data type |
-| 2 Dark Terminal | Excellent | Glowing data paths on dark bg |
-| 3 Blueprint | Excellent | Formal data flow documentation |
-| 4 Notion Clean | Good | Minimal, clean |
-| 5 Glassmorphism | Poor | Distracts from flow semantics |
-| 6 Claude Official | Good | Readable |
-| 7 OpenAI Official | Good | Precise, minimal |
-
-## Use Case Diagram
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Good | Colorful use case ellipses |
-| 2 Dark Terminal | Poor | Stick figures less visible on dark bg |
-| 3 rint | Excellent | Classic UML aesthetic |
-| 4 Notion Clean | Excellent | Perfect for product requirement docs |
-| 5 Glassmorphism | Poor | Unnecessary visual noise |
-| 6 Claude Official | Excellent | Warm, professional |
-| 7 OpenAI Official | Excellent | Clean, precise UML |
-
-## State Machine Diagram
-| Style | Suitability | Notes |
-|-------|------------|-------|
-Flat Icon | Good | Colorful states |
-| 2 Dark Terminal | Good | Glowing states and transitions |
-| 3 Blueprint | Excellent | Best for formal UML state machines |
-| 4 Notion Clean | Excellent | Clean for documentation |
-| 5 Glassmorphism | Poor | Distracts from state transitions |
-| 6 Claude Official | Excellent | Readable |
-| 7 OpenAI Official | Excellent | Minimal, precise |
-
-## Network Topology
-| Style | Suitabili |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Colorful device icons |
-| 2 Dark Terminal | Excellent | Cyberpunk-style network maps |
-| 3 Blueprint | Excellent | Ideal for infrastructure docs |
-| 4 Notion Clean | Good | Clean for IT documentation |
-| 5 Glassmorphism | Good | Striking for presentations |
-| 6 Claude Official | Good | Professional network diagrams |
-| 7 OpenAI Official | Good | Clean infrastructure diagrams |
-
-## Comparison / Feature Matrix
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Color-coded checkmarks |
-| 2 Dark Terminal | Good | Works for dev tool comparisons |
-| 3 Blor | Grid conflicts with table layout |
-| 4 Notion Clean | Excellent | Perfect for Notion-embedded tables |
-| 5 Glassmorphism | Poor | Distabular data |
-| 6 Claude Official | Excellent | Clean, warm |
-| 7 OpenAI Official | Excellent | Minimal, precise |
-
-## Timeline / Gantt
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Colorful bars by category |
-| 2 Dark Terminal | Good | Works for dev roadmaps |
-| 3 Blueprint | Good | Formal project plans |
-| 4 Notion Clean | Excellent | Ideal for Notion project docs |
-| 5 Glassmorphism | Good | Striking for keynote presentations |
-| 6 Claude Official | Good | Warm, professional |
-| 7 OpenAI Official | Good | Clean timeline |
-
-## Agent / Memory Architecture
-| Style | Suitability | Notes |
-|-------|------------|-------|
-| 1 Flat Icon | Excellent | Colorful layers, engaging |
-| 2 Dark Terminal | Excellent | Popular for AI/ML blog posts |
-| 3 Blueprint | Good | Formal AI system documentation |
-| 4 Notion Clean | Good | Clean for AI research notes |
-| 5 Glassmorphism | Excellent | Stunning for AI product presentations |
-| 6 Claude Official | Excellent | Anthropic AI aesthetic |
-| 7 OpenAI Official | Excellent | OpenAI AI aesthetic |

package/plugins/tech-graph/skills/tech-graph/references/svg-layout-best-practices.md

@@ -1,100 +0,0 @@
-# SVG Technical Diagram Layout Best Practices
-
-## Universal Layout Rules (Apply to All Styles)
-
-### 1. Component Spacing
-- **Minimum clearance between components**: 80px (edge to edge)
-- **Minimum clearance for arrow paths**: 60px from component edges
-- **Layer vertical spacing**: 120px between horizontal layers
-- **Same-layer horizontal spacing**: 100-120px between components
-
-### 2. Arrow Routing & Connection Points
-
-#### Connection Point Rules
-- **Never connect arrows to component corners** - use midpoints of edges
-- **Entry/exit points**: 
-  - Top edge: `cx ± offset` where offset = 0 for single arrow, ±30px for multiple
-  - Bottom edge: same rule
-  - Left/right edges: `cy ± offset`
-- **Clearance from corners**: minimum 20px
-
-#### Arrow Path Routing
-- **Avoid diagonal lines crossing components** - use orthogonal routing (L-shaped paths)
-- **For curved arrows**: 
-  - Control point should be at least 40px away from any component edge
-  - Use intermediate waypoints for complex routing: `M x1,y1 L x2,y2 Q cx,cy x3,y3`
-- **Multiple arrows between same layers**: stagger Y-coordinates by 15-20px to avoid overlap
-
-#### Arrow Overlap Prevention
-```svg
-<!-- Bad: diagonal arrow crosses component -->
-<path d="M 200,100 L 600,400"/>
-
-<!-- Good: orthogonal routing around component -->
-<path d="M 200,100 L 200,250 L 600,250 L 600,400"/>
-
-<!-- Good: curved with safe control point -->
-<path d="M 200,100 Q 400,200 600,400"/>
-<!-- Control point (400,200) is 50px+ away from any component -->
-```
-
-### 3. Arrow Label Placement
-- **Position**: midpoint of arrow path, offset by 5-10px perpendicular to arrow direction
-- **Background rect**: ALWAYS include, with:
-  - Padding: 4px horizontal, 2px vertical
-  - Fill: match ckground color
-  - Opacity: 0.9-0.95
-- **Safety distance**: 15px minimum from any component edge
-- **Multiple converging arrows**: stagger label positions vertically by 20px
-
-### 4. Component Overlap Detection
-Before finalizing SVG, check:
-- No component bounding boxes overlap px safety margin)
-- No arrow paths pass through component interiors (except intentional tunneling with dashed style)
-- No text labels overlap with components or other labels
-
-### 5. Z-Index Layering (SVG render order)
-```svg
-<!-- Render order (top to bot back to front): -->
-1. Background rect
-2. Grouping coners (dashed rects)
-3. Arrow paths
-4. Arrow label background rects
-5. Components (boxes, cylinders, etc.)
-6. Component text
-7. Arrow label text
-8. Legend
-```
-
-## Style-Specific Enhancements
-
-### Style-1: Flat Icon Clean- **Perfect alignment**: snap all coordinates to 8px grid
-- **Sharp corners**: rx="8" ry="8" for rounded rects (consistent)
-- **Arrows**: thin (1.5-2px), filled polygon markers
-- **No shadows**: flat design principle
-
-### Style-6: Claude Official Warm
-- **Soft shadows**: `<feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#00000008"/>`
-- **Rounded corners**: rx="12" ry="12" (more rounded than Style-1)
-- **Arrows**: medium weight (2px), subtle markers
-
-## Validation Checklist
-
-Before exporting PNG, verify:
-- [ ] No arrow-component overlaps (visual inspection)
-- [ ] All arrow labels have background rects
-- [ ] Minimum 60px clearance for all arrow paths
-- [ ] Component spacing ≥ 80px
-- [ ] Arrow connection points avoid corners (≥20px from corner)
-- [ ] Multiple arrows between layers are staggered
-- [ ] Legend is readable and doesn't overlap content
-- [ ] SVG renders cleanly via `cairosvg` (or `rsvg-convert` as fallback)
-
-## Common Anti-Patterns to Avoid
-
-| Anti-Pattern | Fix |
-|--------------|-----|
-| Arrow crosses component | Use orthogonal routingase control point distancelabel overlaps component | Add background rect + increase offset |
-| Components too close | Increase spacing to 80px minimum |
-| Arrow connects to corner | Move connection point to edge midpoint offset |
-| No z-index planning | Follow render order: arrows -> components -> text |