@haposoft/cafekit 0.13.4 → 0.14.0

package/src/claude/skills/generate-graph/scripts/test-all-styles.sh

@@ -1,135 +0,0 @@
-#!/bin/bash
-# Batch Test Script
-# Renders regression fixtures, validates SVGs, and exports PNGs
-
-set -euo pipefail
-
-# Colors
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m'
-
-SKILL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
-TEST_DIR="${SKILL_DIR}/test-output"
-TIMESTAMP=$(date +%Y%m%d_%H%M%S)
-
-echo -e "${BLUE}=== Fireworks Tech Graph - Batch Test ===${NC}"
-echo "Test directory: $TEST_DIR"
-echo "Timestamp: $TIMESTAMP"
-echo ""
-
-# Create test directory
-mkdir -p "$TEST_DIR"
-
-# Test configuration
-STYLES=(1 2 3 4 5 6 7)
-STYLE_NAMES=("Flat Icon" "Dark Terminal" "Blueprint" "Notion Clean" "Glassmorphism" "Claude Official" "OpenAI Official")
-
-# Summary counters
-TOTAL=0
-PASSED=0
-FAILED=0
-
-FIXTURES_DIR="${SKILL_DIR}/fixtures"
-
-echo -e "${BLUE}Testing all styles...${NC}"
-echo "----------------------------------------"
-
-for i in "${!STYLES[@]}"; do
-    STYLE="${STYLES[$i]}"
-    STYLE_NAME="${STYLE_NAMES[$i]}"
-    
-    echo -e "\n${YELLOW}Style $STYLE: $STYLE_NAME${NC}"
-    
-    # Check if style reference exists
-    STYLE_FILE=$(find "${SKILL_DIR}/references" -maxdepth 1 -type f -name "style-${STYLE}-*.md" | head -n 1)
-    if [ -z "${STYLE_FILE:-}" ] || [ ! -f "$STYLE_FILE" ]; then
-        echo -e "${RED}✗ Style file not found: $STYLE_FILE${NC}"
-        FAILED=$((FAILED + 1))
-        TOTAL=$((TOTAL + 1))
-        continue
-    fi
-    
-    echo -e "${GREEN}✓ Style file found${NC}"
-    
-    if [ ! -d "$FIXTURES_DIR" ]; then
-        echo -e "${YELLOW}⚠ Fixtures directory not found: $FIXTURES_DIR${NC}"
-        continue
-    fi
-
-    FIXTURE_FILES=$(find "$FIXTURES_DIR" -maxdepth 1 -type f -name "*.json" | sort || true)
-    MATCHED_FIXTURES=()
-    for FIXTURE in $FIXTURE_FILES; do
-        FIXTURE_STYLE=$(python3 - "$FIXTURE" <<'PY'
-import json
-import sys
-from pathlib import Path
-data = json.loads(Path(sys.argv[1]).read_text(encoding='utf-8'))
-print(data.get("style", ""))
-PY
-)
-        if [ "$FIXTURE_STYLE" = "$STYLE" ]; then
-            MATCHED_FIXTURES+=("$FIXTURE")
-        fi
-    done
-
-    if [ "${#MATCHED_FIXTURES[@]}" -eq 0 ]; then
-        echo -e "${YELLOW}⚠ No regression fixtures found for style $STYLE${NC}"
-        continue
-    fi
-
-    # Render, validate, and export each fixture
-    for FIXTURE in "${MATCHED_FIXTURES[@]}"; do
-        BASENAME=$(basename "$FIXTURE" .json)
-        SVG_FILE="${TEST_DIR}/${BASENAME}_${TIMESTAMP}.svg"
-        PNG_FILE="${TEST_DIR}/${BASENAME}_${TIMESTAMP}.png"
-        TEMPLATE_TYPE=$(python3 - "$FIXTURE" <<'PY'
-import json
-import sys
-from pathlib import Path
-data = json.loads(Path(sys.argv[1]).read_text(encoding='utf-8'))
-print(data.get("template_type", "architecture"))
-PY
-)
-
-        echo -n "  Rendering $BASENAME... "
-        TOTAL=$((TOTAL + 1))
-
-        if python3 "${SKILL_DIR}/scripts/generate-from-template.py" "$TEMPLATE_TYPE" "$SVG_FILE" "$(cat "$FIXTURE")" > /dev/null 2>&1 \
-            && "${SKILL_DIR}/scripts/validate-svg.sh" "$SVG_FILE" > /dev/null 2>&1; then
-            if command -v rsvg-convert &> /dev/null \
-                && rsvg-convert -w 1920 "$SVG_FILE" -o "$PNG_FILE" 2>/dev/null; then
-                PNG_SIZE=$(du -h "$PNG_FILE" | cut -f1)
-                echo -e "${GREEN}✓ Pass${NC} (${PNG_SIZE})"
-            else
-                echo -e "${GREEN}✓ Pass${NC}"
-            fi
-            PASSED=$((PASSED + 1))
-        else
-            echo -e "${RED}✗ Fail${NC}"
-            FAILED=$((FAILED + 1))
-            if [ -f "$SVG_FILE" ]; then
-                "${SKILL_DIR}/scripts/validate-svg.sh" "$SVG_FILE" 2>&1 | grep -E "✗|Error" | sed 's/^/    /' || true
-            fi
-        fi
-    done
-done
-
-# Print summary
-echo ""
-echo "========================================"
-echo -e "${BLUE}Test Summary${NC}"
-echo "----------------------------------------"
-echo "Total tests: $TOTAL"
-echo -e "${GREEN}Passed: $PASSED${NC}"
-echo -e "${RED}Failed: $FAILED${NC}"
-
-if [ "$FAILED" -eq 0 ]; then
-    echo -e "\n${GREEN}✓ All tests passed!${NC}"
-    exit 0
-else
-    echo -e "\n${RED}✗ Some tests failed${NC}"
-    exit 1
-fi

package/src/claude/skills/generate-graph/scripts/validate-svg.sh

@@ -1,292 +0,0 @@
-#!/bin/bash
-# SVG Validation Script
-# Checks SVG syntax and reports detailed errors
-
-set -euo pipefail
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-NC='\033[0m' # No Color
-
-if [ $# -eq 0 ]; then
-    echo "Usage: $0 <svg-file>"
-    exit 1
-fi
-
-SVG_FILE="$1"
-
-if [ ! -f "$SVG_FILE" ]; then
-    echo -e "${RED}Error: File not found: $SVG_FILE${NC}"
-    exit 1
-fi
-
-echo "Validating SVG: $SVG_FILE"
-echo "----------------------------------------"
-
-FAILURES=0
-
-# Check 0: XML syntax
-echo -n "Checking XML syntax... "
-if command -v xmllint &> /dev/null; then
-    if xmllint --noout "$SVG_FILE" 2>/dev/null; then
-        echo -e "${GREEN}✓ Pass${NC}"
-    else
-        echo -e "${RED}✗ Fail${NC}"
-        xmllint --noout "$SVG_FILE" 2>&1 || true
-        FAILURES=$((FAILURES + 1))
-    fi
-else
-    echo -e "${YELLOW}⚠ Skipped${NC} (xmllint not found)"
-fi
-
-# Check 1: Tag balance
-echo -n "Checking tag balance... "
-OPEN_TAGS=$( { grep -o '<[A-Za-z][A-Za-z0-9:-]*' "$SVG_FILE" || true; } | { grep -v '</' || true; } | wc -l | tr -d ' ' )
-SELF_CLOSING=$( { grep -o '/>' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
-CLOSE_TAGS=$( { grep -o '</[A-Za-z][A-Za-z0-9:-]*>' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
-TOTAL_CLOSE=$((SELF_CLOSING + CLOSE_TAGS))
-
-if [ "$OPEN_TAGS" -eq "$TOTAL_CLOSE" ]; then
-    echo -e "${GREEN}✓ Pass${NC} (${OPEN_TAGS} tags)"
-else
-    echo -e "${RED}✗ Fail${NC} (${OPEN_TAGS} open, ${TOTAL_CLOSE} close)"
-    FAILURES=$((FAILURES + 1))
-fi
-
-# Check 2: Quote check
-echo -n "Checking attribute quotes... "
-UNQUOTED=$( { grep -oE '[a-z-]+=[^"'\''> ]' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
-if [ "$UNQUOTED" -eq 0 ]; then
-    echo -e "${GREEN}✓ Pass${NC}"
-else
-    echo -e "${RED}✗ Fail${NC} (${UNQUOTED} unquoted attributes)"
-    grep -n -oE '[a-z-]+=[^"'\''> ]' "$SVG_FILE" | head -5 || true
-    FAILURES=$((FAILURES + 1))
-fi
-
-# Check 3: Unescaped entities in text
-echo -n "Checking text entities... "
-SPECIAL=$(python3 - "$SVG_FILE" <<'PY'
-from pathlib import Path
-import re
-import sys
-
-text = Path(sys.argv[1]).read_text(encoding='utf-8')
-issues = 0
-for chunk in re.findall(r'>([^<]*)<', text, flags=re.S):
-    cleaned = re.sub(r'&(amp|lt|gt|quot|apos);', '', chunk)
-    if '&' in cleaned:
-        issues += 1
-print(issues)
-PY
-)
-if [ "$SPECIAL" -eq 0 ]; then
-    echo -e "${GREEN}✓ Pass${NC}"
-else
-    echo -e "${YELLOW}⚠ Warning${NC} (${SPECIAL} potential unescaped entities)"
-fi
-
-# Check 4: Marker references
-echo -n "Checking marker references... "
-MARKER_REFS=$( { grep -oE 'marker-end="url\(#[^)]+\)"' "$SVG_FILE" || true; } | { grep -oE '#[^)]+' || true; } | tr -d '#' | sort -u )
-MARKER_DEFS=$( { grep -oE '<marker id="[^"]+"' "$SVG_FILE" || true; } | { grep -oE 'id="[^"]+"' || true; } | tr -d 'id="' | sort -u )
-
-MISSING=0
-for ref in $MARKER_REFS; do
-    if ! echo "$MARKER_DEFS" | grep -q "^${ref}$"; then
-        echo -e "${RED}✗ Missing marker: $ref${NC}"
-        MISSING=$((MISSING + 1))
-    fi
-done
-
-if [ "$MISSING" -eq 0 ]; then
-    echo -e "${GREEN}✓ Pass${NC}"
-else
-    echo -e "${RED}✗ Fail${NC} (${MISSING} missing markers)"
-    FAILURES=$((FAILURES + 1))
-fi
-
-# Check 5: Arrow-component collision
-echo -n "Checking arrow collisions... "
-COLLISIONS=$(python3 - "$SVG_FILE" <<'PY'
-from pathlib import Path
-import re
-import sys
-import xml.etree.ElementTree as ET
-
-SVG_NS = {'svg': 'http://www.w3.org/2000/svg'}
-
-def strip(tag):
-    return tag.split('}', 1)[-1]
-
-def to_float(value, default=0.0):
-    try:
-        return float(value)
-    except (TypeError, ValueError):
-        return default
-
-def is_container_rect(el):
-    if el.get('stroke-dasharray'):
-        return True
-    width = to_float(el.get('width'))
-    height = to_float(el.get('height'))
-    if width > 700 or height > 500:
-        return True
-    if width < 70 or height < 30:
-        return True
-    return False
-
-def shape_bounds(el):
-    tag = strip(el.tag)
-    if tag == 'rect':
-        if is_container_rect(el):
-            return None
-        x = to_float(el.get('x'))
-        y = to_float(el.get('y'))
-        w = to_float(el.get('width'))
-        h = to_float(el.get('height'))
-        return (x, y, x + w, y + h)
-    if tag == 'circle':
-        r = to_float(el.get('r'))
-        if r < 20:
-            return None
-        cx = to_float(el.get('cx'))
-        cy = to_float(el.get('cy'))
-        return (cx - r, cy - r, cx + r, cy + r)
-    if tag == 'ellipse':
-        rx = to_float(el.get('rx'))
-        ry = to_float(el.get('ry'))
-        if rx < 20 or ry < 20:
-            return None
-        cx = to_float(el.get('cx'))
-        cy = to_float(el.get('cy'))
-        return (cx - rx, cy - ry, cx + rx, cy + ry)
-    return None
-
-def parse_path_points(d):
-    tokens = re.findall(r'[ML]|-?\d+(?:\.\d+)?', d or '')
-    if not tokens:
-        return []
-    points = []
-    command = None
-    index = 0
-    while index < len(tokens):
-        token = tokens[index]
-        if token in {'M', 'L'}:
-            command = token
-            index += 1
-            continue
-        if command not in {'M', 'L'} or index + 1 >= len(tokens):
-            return []
-        x = float(tokens[index])
-        y = float(tokens[index + 1])
-        points.append((x, y))
-        index += 2
-    return points
-
-def segment_hits_bounds(p1, p2, bounds):
-    x1, y1 = p1
-    x2, y2 = p2
-    left, top, right, bottom = bounds
-    eps = 1e-6
-
-    if abs(y1 - y2) < eps:
-        y = y1
-        if not (top + eps < y < bottom - eps):
-            return False
-        seg_left = min(x1, x2)
-        seg_right = max(x1, x2)
-        overlap_left = max(seg_left, left)
-        overlap_right = min(seg_right, right)
-        if overlap_right - overlap_left <= eps:
-            return False
-        if abs(overlap_left - x1) < eps or abs(overlap_right - x2) < eps:
-            return False
-        if abs(overlap_left - x2) < eps or abs(overlap_right - x1) < eps:
-            return False
-        return True
-
-    if abs(x1 - x2) < eps:
-        x = x1
-        if not (left + eps < x < right - eps):
-            return False
-        seg_top = min(y1, y2)
-        seg_bottom = max(y1, y2)
-        overlap_top = max(seg_top, top)
-        overlap_bottom = min(seg_bottom, bottom)
-        if overlap_bottom - overlap_top <= eps:
-            return False
-        if abs(overlap_top - y1) < eps or abs(overlap_bottom - y2) < eps:
-            return False
-        if abs(overlap_top - y2) < eps or abs(overlap_bottom - y1) < eps:
-            return False
-        return True
-
-    return False
-
-root = ET.fromstring(Path(sys.argv[1]).read_text(encoding='utf-8'))
-obstacles = [bounds for element in root.iter() if (bounds := shape_bounds(element)) is not None]
-
-collisions = 0
-for element in root.iter():
-    tag = strip(element.tag)
-    if tag == 'line' and element.get('marker-end'):
-        points = [
-            (to_float(element.get('x1')), to_float(element.get('y1'))),
-            (to_float(element.get('x2')), to_float(element.get('y2'))),
-        ]
-    elif tag == 'path' and element.get('marker-end'):
-        points = parse_path_points(element.get('d'))
-    else:
-        continue
-
-    for p1, p2 in zip(points, points[1:]):
-        if any(segment_hits_bounds(p1, p2, bounds) for bounds in obstacles):
-            collisions += 1
-            break
-
-print(collisions)
-PY
-)
-if [ "$COLLISIONS" -eq 0 ]; then
-    echo -e "${GREEN}✓ Pass${NC}"
-else
-    echo -e "${RED}✗ Fail${NC} (${COLLISIONS} arrow path collision(s))"
-    FAILURES=$((FAILURES + 1))
-fi
-
-# Check 6: Closing </svg> tag
-echo -n "Checking closing tag... "
-if grep -q '</svg>' "$SVG_FILE"; then
-    echo -e "${GREEN}✓ Pass${NC}"
-else
-    echo -e "${RED}✗ Fail${NC} (missing </svg>)"
-    FAILURES=$((FAILURES + 1))
-fi
-
-# Check 7: rsvg-convert validation
-echo -n "Running rsvg-convert validation... "
-if command -v rsvg-convert &> /dev/null; then
-    if rsvg-convert "$SVG_FILE" -o /tmp/test-output.png 2>/dev/null; then
-        echo -e "${GREEN}✓ Pass${NC}"
-        rm -f /tmp/test-output.png
-    else
-        echo -e "${RED}✗ Fail${NC}"
-        echo "rsvg-convert error:"
-        rsvg-convert "$SVG_FILE" -o /tmp/test-output.png 2>&1 || true
-        FAILURES=$((FAILURES + 1))
-    fi
-else
-    echo -e "${YELLOW}⚠ Skipped${NC} (rsvg-convert not found)"
-fi
-
-echo "----------------------------------------"
-if [ "$FAILURES" -eq 0 ]; then
-    echo "Validation complete"
-    exit 0
-fi
-
-echo -e "${RED}Validation failed (${FAILURES} error(s))${NC}"
-exit 1

package/src/claude/skills/generate-graph/templates/agent-architecture.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" 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="arrowPurple" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#7c3aed"/>
-    </marker>
-    <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
-    </marker>
-    <marker id="arrowOrange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#ea580c"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
-    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
-    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- NODES -->
-  <!-- ARROWS -->
-  <!-- LEGEND -->
-</svg>

package/src/claude/skills/generate-graph/templates/architecture.svg

@@ -1,23 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" 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="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .layer-label { font-size: 16px; font-weight: 600; fill: #475569; }
-    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
-    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
-    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- NODES -->
-  <!-- ARROWS -->
-  <!-- LEGEND -->
-</svg>

package/src/claude/skills/generate-graph/templates/comparison-matrix.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weifill: #1e293b; }
-    .header { font-size: 14px; font-weight: 600; fill: #1e293b; }
-    .row-label { font-size: 13px; font-weight: 500; fill: #475569; }
-    .cell-text { font-size: 13px; font-weight: 400; fill: #1e293b; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- HEADERS -->
-  <!-- ROWS -->
-  <!-- CELLS -->
-</svg>

package/src/claude/skills/generate-graph/templates/data-flow.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" 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="arrowPurple" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#7c3aed"/>
-    </marker>
-    <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
-    </marker>
-    <marker id="arrowOrange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#ea580c"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
-    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
-    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- NODES -->
-  <!-- ARROWS -->
-  <!-- LEGEND -->
-</svg>

package/src/claude/skills/generate-graph/templates/er-diagram.svg

@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .entity-name { font-size: 15px; font-weight: 700; fill: #1e293b; }
-    .attribute { font-size: 12px; font-weight: 400; fill: #475569; }
-    .primary-key { font-size: 12px; font-weight: 600; fill: #1e293b; text-decoration: underline; }
-    .relationship { font-size: 12px; font-weight: 500; fill: #64748b; }
-    .cardinality { font-size: 11px; font-weight: 400; fill: #64748b; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- ENTITIES -->
-  <!-- RELATIONSHIPS -->
-  <!-- CARDINALITY -->
-</svg>

package/src/claude/skills/generate-graph/templates/flowchart.svg

@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .node-label { font-size: 14px; font-weight: 500; fill: #1e293b; }
-    .decision-label { font-size: 13px; font-weight: 500; fill: #1e293b; }
-    .arrow-label { font-size: 11px; font-weight: 400; fill: #475569; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- START -->
-  <!-- PROCESSES -->
-  <!-- DECISIONS -->
-  <!-- ARROWS -->
-  <!-- END -->
-</svg>

package/src/claude/skills/generate-graph/templates/sequence.svg

@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 800">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .participant { font-size: 14px; font-weight: 600; fill: #1e293b; }
-    .message { font-size: 12px; font-weight: 400; fill: #475569; }
-    .lifeline { stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 5,3; }
-  </style>
-  <rect width="960" height="800" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- PARTICIPANTS -->
-  <!-- LIFELINES -->
-  <!-- MESSAGES -->
-  <!-- ACTIVATIONS -->
-</svg>

package/src/claude/skills/generate-graph/templates/state-machine.svg

@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .state-name { font-size: 14px; font-weight: 600; fill: #1e293b; }
-    .state-activity { font-size: 11px; font-weight: 400; fill: #64748b; }
-    . { font-size: 11px; font-weight: 400; fill: #475569; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- INITIAL_STATE -->
-  <!-- STATES -->
-  <!-- TRANSITIONS -->
-  <!-- FINAL_STATE -->
-</svg>

package/src/claude/skills/generate-graph/templates/timeline.svg

@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .period-label { font-size: 12px; font-weight: 500; fill: #475569; }
-    .task-label { font-size: 13px; font-weight: 500; fill: #1e293b; }
-    .milestone-label { font-size: 12px; font-weight: 600; fill: #1e293b; }
-  </style>
-  <rect width="1200" height="400" fill="#ffffff"/>
-  <text x="600" y="50" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- TIME_AXIS -->
-  <!-- TASKS -->
-  <!-- MILESTONES -->
-</svg>

package/src/claude/skills/generate-graph/templates/use-case.svg

@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
-  <defs>
-    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-    </marker>
-  </defs>
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
-    .actor-label { font-size: 13px; font-weight: 600; fill: #1e293b; }
-    .usecaseel { font-size: 13px; font-weight: 500; fill: #1e293b; }
-    .system-label { font-size: 16px; font-weight: 600; fill: #475569; }
-    .relationship { font-size: 11px; font-weight: 400; fill: #64748b; font-style: italic; }
-  </style>
-  <rect width="960" height="700" fill="#ffffff"/>
-  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
-  <!-- SYSTEM_BOUNDARY -->
-  <!-- ACTORS -->
-  <!-- USECASES -->
-  <!-- RELATIONSHIPS -->
-</svg>