--- name: comic description: > Generates SVG explainer comics about the project for non-technical audiences. Supports technical reference and kawaii pastel pink themes, single or 4-panel layouts. argument-hint: "[--kawaii] [--panels 1|4] [topic]" allowed-tools: Read, Glob, Grep, Write, Bash(mkdir -p *) --- # SVG Explainer Comic Generator Generate visual explainer comics that communicate project concepts to a wide audience. Analyzes the codebase to produce accurate, engaging SVG comics using pre-built character symbols and a structured layout system. ## Arguments ``` /comic # Auto-pick topic, technical theme, single panel /comic --kawaii # Kawaii pastel pink theme /comic --panels 4 # 4-panel comic strip /comic --kawaii --panels 4 # 4-panel kawaii comic /comic "authentication flow" # Specific topic /comic --kawaii "how testing works" --panels 4 ``` **Defaults:** technical theme, 1 panel, auto-detected topic. ## Theme Palettes ### Technical Reference | Role | Value | |------|-------| | `bg` | `#1B2838` | | `panel` | `#FFFFFF` | | `border` | `#2C3E50` | | `accent` | `#3498DB` | | `accent2` | `#2980B9` | | `text` | `#2C3E50` | | `titleBg` | `#1B2838` | | `titleText` | `#FFFFFF` | | `captionText` | `#7F8C8D` | | `success` | `#2ECC71` | | `danger` | `#E74C3C` | | `warning` | `#F39C12` | | `font` | `monospace` | | `radius` | `0` (sharp corners on panels) | | `borderWidth` | `2` | | `borderStyle` | (solid — no stroke-dasharray) | ### Kawaii Pastel Pink | Role | Value | |------|-------| | `bg` | `#FFF0F5` | | `panel` | (use gradient `url(#panel-grad)` — white→soft pink radial) | | `panelStroke` | `#F48FB1` | | `border` | `#F48FB1` (softer than raw hot-pink) | | `accent` | `#E8508B` (deep rose — for bold text, command names, highlights) | | `accent2` | `#C9A6DE` (lavender — content line accents, list borders) | | `text` | `#C94077` (warm rose — primary readable text) | | `descText` | `#A888B5` (muted purple — secondary/description text) | | `headerBg` | `#F8E8FD` (light violet — card header bands) | | `headerText` | `#9C5BBF` (purple — card header text) | | `titleBg` | (use gradient `url(#kawaii-title-grad)`) | | `titleText` | `#FFFFFF` | | `captionText` | `#C94077` | | `bgCircle1` | `#F8E0EC` at opacity 0.35 (pink floating bg circles) | | `bgCircle2` | `#EDE0F5` at opacity 0.3 (lavender floating bg circles) | | `altRowBg` | `#FFF5F8` at opacity 0.6 (alternating row highlight) | | `mint` | `#8ECFA8` (for green content accents) | | `cream` | `#FFFDD0` | | `blush` | `#FF69B4` at opacity 0.4 | | `font` | `'Comic Sans MS', 'Chalkboard SE', cursive` | | `radius` | `15-18` (all corners generously rounded) | | `borderWidth` | `1.5-2` | | `borderStyle` | `stroke-dasharray="10 5"` | ## SVG Defs Block **Copy this entire `` block verbatim** into every generated SVG. Then reference characters with ``. All characters use `viewBox="0 0 100 150"` so they scale uniformly. Place them at any size — recommended: `width="100" height="150"` for single panel, `width="80" height="120"` for 4-panel. ```xml ``` ## Character Selection Guide | Topic | Tech Character | Kawaii Character | |-------|---------------|-----------------| | General / overview | `#robot-explainer` | `#pink-cat` | | Data, storage, files | `#server-rack` | `#potato-glasses` | | Network, API, requests | `#antenna-bot` | `#bunny-envelope` | | Testing, verification | `#clipboard-bot` | `#broccoli-magnifier` | | User, end-user | `#human-silhouette` | `#strawberry` | Use 1-2 characters per panel. In 4-panel comics, the main narrator appears in panels 1 and 4; supporting characters appear in panels 2-3. ## Layout Grid ### Single Panel (800 x 600) ``` ┌──────────────────────────────────────────────────┐ │ TITLE BAR y=0..60 │ ├──────────────────────────────────────────────────┤ │ PANEL x=20 y=70 w=760 h=470 │ │ │ │ ┌─CHAR─┐ ┌──────BUBBLE ZONE──────────────┐ │ │ │ zone │ │ x=220..750 y=80..230 │ │ │ │ x=40 │ │ (top bubble) │ │ │ │ ..200 │ └───────────────────────────────┘ │ │ │ y=100 │ │ │ │ ..460 │ ┌──────CONTENT ZONE─────────────┐ │ │ │ │ │ x=220..750 y=240..500 │ │ │ │ │ │ (diagram, second char, etc.) │ │ │ └───────┘ └───────────────────────────────┘ │ │ │ ├──────────────────────────────────────────────────┤ │ CAPTION BAR y=545..600 │ └──────────────────────────────────────────────────┘ ``` **Decoration zones** (kawaii: 12+ decorations, tech: 6+): - Corners: (30,80), (760,80), (30,530), (760,530) — 4 main positions - Left gutter: x=25..40, scattered along y - Right gutter: x=755..775, scattered along y - Near content: scatter hearts and sparkles adjacent to content blocks - Background layer: large faint stars behind panels (kawaii only) ### 4-Panel (800 x 1200) ``` ┌──────────────────────────────────────────────────┐ │ TITLE BAR y=0..60 │ ├────────────────────┬─────────────────────────────┤ │ PANEL 1 │ PANEL 2 │ │ x=20 y=70 │ x=410 y=70 │ │ w=370 h=520 │ w=370 h=520 │ │ │ │ │ char: x=30..140 │ char: x=30..140 │ │ y=250..490 rel. │ y=250..490 rel. │ │ │ │ │ bubble: x=20..350 │ bubble: x=20..350 │ │ y=20..230 rel. │ y=20..230 rel. │ ├────────────────────┼─────────────────────────────┤ │ PANEL 3 │ PANEL 4 │ │ x=20 y=610 │ x=410 y=610 │ │ w=370 h=520 │ w=370 h=520 │ │ │ │ │ (same zones) │ (same zones) │ ├────────────────────┴─────────────────────────────┤ │ CAPTION BAR y=1145..1200 │ └──────────────────────────────────────────────────┘ ``` **Panel-relative coordinates** — add panel's x,y to get absolute position. For example, Panel 2 character at relative (50, 300) → absolute (460, 370). ## Visual Depth Techniques These techniques add visual richness and depth. **Apply all of them for kawaii theme. Apply the tech-marked ones for technical theme.** ### Background Depth (kawaii) Layer these behind all content, immediately after the base ``: ```xml ``` ### Panel Inner Glow (kawaii) After the main panel ``, add a slightly inset rectangle for a soft inner border glow: ```xml ``` ### Card Elevation (kawaii) Content blocks (file illustrations, command lists, diagrams) should appear "lifted" with: 1. **Gradient fills** — use `url(#file-grad)`, `url(#cmd-grad)` instead of flat `#FFFFFF` 2. **Card shadow filter** — apply `filter="url(#card-shadow)"` to the content group 3. **Header bands** — add a soft-colored header `` inside cards with `#F8E8FD` fill 4. **Alternating row backgrounds** — for lists, add `` fills at `#FFF5F8` opacity 0.6 on odd rows 5. **Cute faces on objects** — add tiny dot eyes (r=2.5) and a smile path to file/document illustrations 6. **Slight rotation** — apply `transform="rotate(-2)"` or similar to cards for a playful tilt ### Title Bar Polish (kawaii) ```xml ``` ### Decoration Sizing (both themes) - **Corner sparkles:** 18-22px, apply `filter="url(#glow)"` to 2 of the 4 corner sparkles - **Scattered sparkles:** 12-15px, no filter - **Hearts:** 13-18px, scattered in gutters and near content - **Stars:** 18-50px, use in background layer and scattered areas, larger = more transparent - **Minimum total:** 12+ decoration elements for kawaii, 6+ for tech ### Speech Bubble Enhancement (kawaii) Use cloud-style bubbles instead of plain rectangles: ```xml ``` ## Text Containment Rules **CRITICAL: All text must fit inside its container. Use these formulas.** ### Bubble Sizing ``` Given: text = the speech bubble content string words = word count of text (MAXIMUM 15 per bubble) chars = character count of text font_size = 16 (default for bubbles) max_width = 480 (single panel) or 300 (4-panel) padding = 15 Compute: char_width = font_size * 0.6 (monospace) or font_size * 0.52 (cursive) line_width = chars * char_width lines = ceil(line_width / max_width) (minimum 1) bubble_w = min(line_width, max_width) + (padding * 2) bubble_h = (lines * font_size * 1.4) + (padding * 2) Text placement inside bubble: text_anchor = "middle" text_x = bubble_x + bubble_w / 2 first_line_y = bubble_y + padding + font_size next_line_y = previous_y + (font_size * 1.4) ``` ### Hard Rules - **NEVER** place `` with `y` outside its container ``'s y..y+height range - **NEVER** use `font-size` below 13px - **MAXIMUM** 15 words per speech bubble. If more, split into two bubbles - **ALWAYS** use `text-anchor="middle"` for bubble text and center it horizontally - For multi-line text: use separate `` elements or `` with explicit `dy` ## Process ### Step 1: Parse Arguments Extract from `${ARGUMENTS}`: - `--kawaii` flag → kawaii theme; otherwise technical - `--panels N` → N panels (1 or 4); default 1 - Remaining text → the topic (if empty, auto-detect) ### Step 2: Analyze the Codebase - Use Glob to find `*.py` files, config files, docs - Read `CLAUDE.md`, `README.md`, `pyproject.toml` for project context - Read `src/` structure and key source files - Build understanding of: purpose, architecture, workflows, audience ### Step 3: Choose Topic and Write Script **If topic specified:** use it. **Otherwise pick from:** project overview, architecture, a key workflow, or a standout feature. Write script for each panel: - Which character(s) from the Character Selection Guide - Speech bubble text (SHORT — under 15 words, plain language, no jargon) - Scene description (what's being shown) - Caption if needed **4-panel narrative arc:** 1. **Setup** — introduce the problem or question 2. **Explain** — show the core concept 3. **Detail** — dive into how it works 4. **Conclusion** — the takeaway or punchline ### Step 4: Assemble the SVG 1. Open `