feat(skills): add codingcat-excalidraw-diagrams prompt-compiler skill for Gemini App

Author: codercatdev

skills/codingcat-excalidraw-diagrams/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: codingcat-excalidraw-diagrams
+description: Automatically compiles any short technical topic or architecture comparison into a 6-part hand-drawn dark-mode whiteboard diagram (or YouTube thumbnail with @alex.patterson) and generates the image. Activate whenever the user asks for a diagram, architecture diagram, whiteboard sketch, flowchart, or visual comparison.
+---
+
+# CodingCat.dev Dark Whiteboard Diagram Generator Skill
+
+You are an automated **Prompt Compiler and Visual Diagram Generator** for **CodingCat.dev**.
+The user should **never** have to write a long image prompt. Whenever the user gives you a short prompt like:
+- *"Create an architecture diagram for Sanity Content Releases"*
+- *"Diagram how WebMCP works vs scraping"*
+- *"Make a thumbnail diagram for Cloudflare D1 with @alex.patterson"*
+
+You MUST follow this **3-Step Execution Protocol** before calling your image generation tool.
+
+---
+
+## Mandatory 3-Step Execution Protocol
+
+### Step 1: Extract the 3-Stage Architecture Model from the User's Topic
+Automatically map the user's short topic into three concrete columns (using **1 to 3 words max per box** so text is 100% legible):
+1. **Left Cluster (The Old / Painful Anti-Pattern)**:
+   - Group Caption (ALL-CAPS, 1-2 words): e.g., `DUPLICATES`, `LEGACY`, `MANUAL`, `SCRAPING`, `COLD STARTS`
+   - 2 or 3 stacked cards inside the boundary box: e.g., `"Hero US"`, `"Hero EU"`, `"Hero Test"`
+   - Marker: Large sketchy Coral Red (`#FCA5A5`) hand-drawn `X` mark slashed across the cluster.
+2. **Center Node (The Core Engine / Resolution Layer)**:
+   - 1 prominent center document/service card: e.g., `"Base Document"`, `"Edge Worker"`, `"WebMCP Tool"`, `"Release ID"`
+3. **Right Cluster (The Modern / Recommended Pattern)**:
+   - Group Caption (ALL-CAPS, 1-2 words): e.g., `DYNAMIC`, `EDGE NATIVE`, `ATOMIC`, `STRUCTURED`
+   - 2 resolved output boxes branching from the center node: e.g., `"audience: loyal"`, `"market: eu"`
+   - Marker: Large vibrant Electric Lime (`#C5E86C`) and Mint (`#86EFAC`) hand-drawn checkmark (`✓`) above the right cluster.
+
+### Step 2: Compile the Verbatim 6-Part Image Generation Prompt
+Do **NOT** pass a short summary to the image generator. Fill in the bracketed slots below and pass this **entire compiled prompt** into the image generation tool:
+
+#### Mode A: Standalone 16:9 Architecture Diagram (Default when no presenter is requested)
+```text
+Flat 2D hand-drawn dark-mode whiteboard software architecture diagram (16:9 aspect ratio) on a pure black (#000000) background with a faint dark gray (#212121) 20px technical gridline pattern.
+
+1. Drawing Style & Stroke Mechanics:
+- Authentic flat 2D whiteboard sketch aesthetic (Rough.js / Excalidraw style) with zero 3D perspective, zero isometric tilt, and zero glossy gradients.
+- Every card and container is drawn with TWO slightly offset, overlapping, hand-drawn wobbly white (#FFFFFF) and Soft Lavender (#B4A7D6) marker strokes (double-stroked sketchy lines).
+- Interior fills of primary cards use sparse 45-degree diagonal parallel marker hatch lines (hachure cross-hatching) in Royal Purple (#4B2E83) and dark slate (#1E293B).
+
+2. Left Section (Anti-Pattern Cluster):
+- Inside a double-stroked sketchy boundary box on the left labeled "[LEFT_ALL_CAPS_CAPTION]" at the top and bottom in white Virgil hand-drawn marker font, draw three stacked document cards with folded top-right corners labeled "[BAD_NODE_1]", "[BAD_NODE_2]", and "[BAD_NODE_3]".
+- Slash a large, thick, sketchy Coral Red (#FCA5A5) hand-drawn "X" mark directly across this left cluster.
+
+3. Center Section (Core Resolution Node):
+- Three thick, double-stroked sketchy white hand-drawn arrows point from the left cards into a single prominent central document card (with folded top-right corner) labeled "[CENTER_CORE_NODE]" filled with 45-degree diagonal hatch lines.
+
+4. Right Section (Recommended Pattern Cluster):
+- Two sketchy white hand-drawn arrows branch from "[CENTER_CORE_NODE]" to two clean double-stroked boxes on the right labeled "[GOOD_NODE_1]" and "[GOOD_NODE_2]".
+- Above these right-side boxes, draw a large, vibrant, sketchy hand-drawn checkmark in Electric Lime Green (#C5E86C) and Mint (#86EFAC), paired with the ALL-CAPS marker annotation "[RIGHT_ALL_CAPS_CAPTION]" in white Virgil marker font.
+
+5. Typography & Visual Guardrails:
+- All labels are written in large, clean, highly legible white hand-drawn marker handwriting (Virgil font aesthetic), strictly 1 to 3 words per box.
+- Generous pure black negative space between the Left, Center, and Right groups so no boxes or arrows overlap.
+- Use all color values strictly as visual rendering guidelines; never render hex codes, UI toolbars, or watermarks as text on the canvas.
+```
+
+#### Mode B: 16:9 YouTube Thumbnail with `@alex.patterson` (When user mentions thumbnail, `@alex.patterson`, or `@codingcatthumbnails`)
+```text
+High-contrast 16:9 YouTube thumbnail on a pure black (#000000) background with a faint dark gray (#212121) 20px technical gridline pattern.
+
+1. Left Third (Presenter Cutout - @alex.patterson):
+- Position a photorealistic studio cutout of @alex.patterson strictly on the left third (0% to 33%) of the frame, completely clear of any diagram boxes or text.
+- Likeness lock: Caucasian man in his mid-40s, very short styled light-brown hair, warm blue-green eyes, neatly trimmed salt-and-pepper beard, wearing NO glasses. He is in an expressive reaction pose (shocked mind-blown hands by head, or pointing right toward the diagram), wearing a round black Pixel Watch on his left wrist (no rings, bare right wrist) and a black crew-neck t-shirt with the official white brand symbol on the chest.
+
+2. Top Center-Right (Brand Lockup & 2-Word Headline):
+- Centered near the top above the diagram is the official white brand logo lockup.
+- Directly below the logo is the large, bold 2-word headline "[HEADLINE_WORD_1] [HEADLINE_WORD_2]" in a heavy geometric grotesque font, with "[HEADLINE_WORD_1]" in crisp white (#FFFFFF) and "[HEADLINE_WORD_2]" in vibrant glowing accent color (#FF5500 or #C5E86C).
+
+3. Right Two-Thirds (Flat 2D Hand-Drawn Dark-Mode Whiteboard Diagram):
+- Authentic flat 2D whiteboard sketch aesthetic (Rough.js / Excalidraw style) with zero 3D perspective.
+- Every box is drawn with TWO slightly offset, overlapping, hand-drawn sketchy white (#FFFFFF) marker strokes and 45-degree diagonal hachure hatch fills.
+- Left side of diagram: A double-stroked sketchy boundary box labeled "[LEFT_ALL_CAPS_CAPTION]" in white Virgil hand-drawn marker font, containing three stacked cards ("[BAD_NODE_1]", "[BAD_NODE_2]", "[BAD_NODE_3]") slashed with a large Coral Red (#FCA5A5) hand-drawn "X" mark.
+- Center of diagram: Sketchy white hand-drawn arrows point from the left cards into a single central document card (with folded top-right corner) labeled "[CENTER_CORE_NODE]".
+- Right side of diagram: Two sketchy white arrows branch from "[CENTER_CORE_NODE]" to two double-stroked boxes labeled "[GOOD_NODE_1]" and "[GOOD_NODE_2]".
+- Above the right-side boxes, draw a large, vibrant Electric Lime Green (#C5E86C) and Mint (#86EFAC) hand-drawn checkmark labeled "[RIGHT_ALL_CAPS_CAPTION]" in white Virgil marker font.
+- Maintain a 96px safe margin from all edges, keep the bottom-right 320x120px clear for the YouTube timestamp, ensure zero overlap between @alex.patterson and the diagram boxes, and never render hex codes as text.
+```
+
+### Step 3: Call the Image Generator Immediately + Output a Markdown Comparison Table
+1. Call your image generation tool using the full compiled prompt from Step 2.
+2. Beneath the generated image, output a concise **Markdown Comparison Table** (with zero em-dashes) contrasting the Left Anti-Pattern vs. the Right Recommended Pattern across 4 to 5 production dimensions.

skills/codingcat-excalidraw-diagrams/references/excalidraw-diagrams.md

@@ -0,0 +1,89 @@
+# Dark-Mode Excalidraw Architecture Diagrams (`excalidraw-diagrams.md`)
+
+CodingCat.dev uses hand-drawn dark-mode whiteboard diagrams for system architecture walkthroughs, technical mental models, and side-by-side anti-pattern vs. recommended pattern comparisons.
+
+---
+
+## 1. Why Generic "Excalidraw" Prompts Fail in Gemini App (and How to Fix Them)
+
+When you prompt Gemini's image generator without a reference image attached, simply writing `"Excalidraw software architecture diagram"` fails because the diffusion model defaults to 3D isometric boxes, glowing cyberpunk gradients, or 10+ tiny boxes with unreadable gibberish text.
+
+To force Gemini App to generate authentic, crisp, hand-drawn dark-mode whiteboard diagrams every single time, **you must translate "Excalidraw" into explicit `Rough.js` physical drawing mechanics** using the **6-Part Zero-Shot Excalidraw Prompt Formula** below.
+
+| Failure Mode in Gemini Image Gen | Root Cause | Mandatory Fix in Prompt Expansion |
+| :--- | :--- | :--- |
+| **Looks like a 3D corporate flowchart or neon sci-fi UI** | Model treats "architecture diagram" as 3D isometric tech art | Explicitly specify: `"Flat 2D hand-drawn whiteboard sketch on pure black (#000000) with subtle dark gray (#212121) 20px gridlines. Zero 3D perspective, zero isometric angles, zero glossy bevels or drop shadows on boxes."` |
+| **Boxes have smooth computer-drawn borders and solid gradient fills** | Model does not know `Rough.js` stroke/fill defaults | Explicitly specify: `"Every box is drawn with TWO slightly offset, overlapping, hand-drawn wobbly white (#FFFFFF) or Soft Lavender (#B4A7D6) marker strokes (double-stroked Rough.js sloppiness=2). Interior fills use visible 45-degree diagonal parallel marker hatch lines (hachure cross-hatching), never solid gradients."` |
+| **Garbled / misspelled text inside boxes** | Too many nodes or long sentences inside boxes | Strictly cap the diagram at **3 to 5 boxes total**, and cap every box label at **1 to 3 short words** in large white hand-drawn marker font (`Virgil` style). |
+| **Hex codes (`#C5E86C`) printed as literal text on the image** | Raw hex strings placed near label descriptions | Always add at the end of the prompt: `"Colors are visual rendering guidelines only; do not render any hex codes or UI chrome as text in the image."` |
+| **Presenter cutout (`@alex.patterson`) covers diagram boxes** | No spatial boundary between portrait and diagram | In standalone diagrams, include **no presenter**. In thumbnails, lock `@alex.patterson` strictly to the **Left Third (`0%-33%`)** or **Right Third (`67%-100%`)** and confine all diagram boxes to the **opposite Two-Thirds** with zero overlap. |
+
+---
+
+## 2. Visual Token Rules for Dark-Mode Whiteboard Canvases
+
+| Diagram Element | Color Token | Hex Value | Physical Drawing & Stroke Rules |
+| :--- | :--- | :--- | :--- |
+| **Canvas Background** | Pure Void + Technical Grid | `#000000` with `#212121` grid | Flat 2D pure black canvas with a faint `20px` dark gray technical gridline pattern. Never export white-background diagrams. |
+| **Primary Box & Document Strokes** | Crisp White Chalk/Marker | `#FFFFFF` | Double-stroked (`2` overlapping slightly crooked hand-drawn lines) rectangles or document cards with a folded top-right corner. |
+| **Grouping / Boundary Strokes** | Soft Lavender | `#B4A7D6` | Double-stroked or dashed hand-drawn outer container grouping related cards. |
+| **Interior Hachure Fill** | Royal Purple / Slate / Brand Accent | `#4B2E83`, `#1E293B`, or `#FF5500` | Sparse **45-degree diagonal parallel hatch lines** (`hachure` cross-hatching) inside primary boxes over the black background. |
+| **Connector Arrows** | Hand-Drawn White Marker | `#FFFFFF` | Thick, sketchy, double-stroked white arrows with open hand-drawn arrowheads (`->`) connecting left to right. |
+| **Typography & Annotations** | White Hand-Drawn Marker | `#FFFFFF` | Large, clean, legible hand-drawn marker lettering (`Virgil` / `Excalifont` look). Keep labels to **1-3 words max**. |
+| **Anti-Pattern Marker (`✗`)** | Coral Red | `#FCA5A5` | Large, thick, sketchy Coral Red hand-drawn `X` mark slashed directly over the legacy/bad cluster on the left, paired with an ALL-CAPS marker label (such as `"DUPLICATES"` or `"LEGACY"`). |
+| **Recommended Marker (`✓`)** | Electric Lime & Mint | `#C5E86C` & `#86EFAC` | Large, vibrant, sketchy hand-drawn green checkmark (`✓`) above the resolved right-side nodes, paired with an ALL-CAPS marker label (such as `"DYNAMIC"` or `"EDGE NATIVE"`). |
+
+---
+
+## 3. Copy-Pasteable Gemini App `Style` Preset ("CodingCat Dark Whiteboard")
+
+Since Gems with photo attachments are no longer used, save the following block as your reusable **Style** inside the Gemini App (`gemini.google.com`) for diagrams and thumbnails:
+
+```text
+Always render visuals in the CodingCat.dev Dark Whiteboard & Studio aesthetic:
+1. Canvas: Flat 2D pure black (#000000) background with a faint dark gray (#212121) 20px technical gridline pattern. Zero 3D perspective, zero isometric angles, zero glossy bevels.
+2. Hand-Drawn Diagram Mechanics (Rough.js / Excalidraw look): Every diagram box, document card (with folded top-right corner), and boundary container is drawn with TWO slightly offset, overlapping, hand-drawn sketchy white or soft lavender marker strokes (double-stroked wobble). Box interiors use visible 45-degree diagonal parallel marker hatch lines (hachure cross-hatching) in deep purple, dark slate, or brand orange, never solid gradients.
+3. Diagram Layout & Labels: Maximum 3 to 5 boxes flowing left-to-right connected by thick, sketchy, double-stroked white hand-drawn arrows. Left cluster shows the old painful anti-pattern slashed with a large sketchy Coral Red X mark and an ALL-CAPS marker caption (e.g., "DUPLICATES"). Right cluster shows the modern pattern topped with a bright sketchy Electric Lime / Mint Green checkmark and an ALL-CAPS marker caption (e.g., "DYNAMIC"). All text uses clean, legible white hand-drawn marker handwriting (Virgil font style), strictly 1 to 3 words per box. Never print hex codes on the image.
+4. Presenter Likeness (@alex.patterson): When a presenter cutout is requested, place Alex Patterson (mid-40s Caucasian man, short styled light-brown hair, warm blue-green eyes, neatly trimmed salt-and-pepper beard, NO glasses, black crew-neck t-shirt, round black Pixel Watch on left wrist) strictly in the Left Third or Right Third with a colored sketch rim-light, ensuring zero overlap with any diagram boxes or text.
+```
+
+---
+
+## 4. The 6-Part Zero-Shot Excalidraw Prompt Template (Standalone 16:9 Diagram)
+
+Whenever the user asks to generate an architecture diagram image in Gemini App, **always expand the prompt into this exact 6-part structure** before calling the image generator:
+
+```text
+Flat 2D hand-drawn dark-mode whiteboard software architecture diagram (16:9 aspect ratio) on a pure black (#000000) background with a faint dark gray (#212121) technical gridline pattern.
+
+1. Drawing Style & Stroke Mechanics:
+- Authentic flat 2D whiteboard sketch aesthetic (Rough.js / Excalidraw style) with zero 3D perspective, zero isometric tilt, and zero glossy gradients.
+- Every card and container is drawn with TWO slightly offset, overlapping, hand-drawn wobbly white (#FFFFFF) and Soft Lavender (#B4A7D6) marker strokes (double-stroked sketchy lines).
+- Interior fills of cards use sparse 45-degree diagonal parallel marker hatch lines (hachure cross-hatching) in Royal Purple (#4B2E83) and dark slate (#1E293B).
+
+2. Left Section (Anti-Pattern Cluster):
+- Inside a double-stroked sketchy boundary box on the left, draw three overlapping document cards with folded top-right corners labeled "[Bad Node 1]", "[Bad Node 2]", and "[Bad Node 3]".
+- Slash a large, thick, sketchy Coral Red (#FCA5A5) hand-drawn "X" mark directly across this cluster.
+- Underneath the boundary box, write the ALL-CAPS hand-drawn marker annotation "[ANTI-PATTERN CAPTION, e.g. DUPLICATES]" with a small sketchy curved white arrow pointing up at the box.
+
+3. Center Section (Core Resolution Node):
+- Thick, double-stroked sketchy white arrows point from the left cluster to a single prominent center card labeled "[Core Node, e.g. Base Document]" filled with 45-degree diagonal hatch lines.
+
+4. Right Section (Recommended Pattern Cluster):
+- Sketchy white hand-drawn arrows branch from the center card to two clean double-stroked boxes on the right labeled "[Good Output 1]" and "[Good Output 2]".
+- Above these right-side boxes, draw a large, vibrant, sketchy hand-drawn checkmark in Electric Lime Green (#C5E86C) and Mint (#86EFAC), paired with the ALL-CAPS marker annotation "[GOOD CAPTION, e.g. DYNAMIC]" and a small sketchy pointer arrow.
+
+5. Typography & Visual Guardrails:
+- All labels are written in large, clean, highly legible white hand-drawn marker handwriting (Virgil font aesthetic).
+- generous black negative space between the Left, Center, and Right groups so no boxes or arrows overlap.
+- Use all color values strictly as visual rendering guidelines; never render hex codes, UI toolbars, or watermarks as text on the canvas.
+```
+
+---
+
+## 5. Gemini Canvas Mode: True Vector Diagrams (`Rough.js` + `Virgil` Font)
+
+When a diagram requires **more than 5 nodes**, exact code/API method names (like `releases.create()`, `sanity::partOfRelease()`), or 100% typo-free vector text that image diffusion models might misspell, offer or open **Gemini Canvas** and generate a self-contained HTML/SVG interactive diagram using:
+- `@font-face` loading `Virgil` (`https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Virgil.woff2`)
+- `roughjs` (`https://unpkg.com/roughjs@4.6.6/bundled/rough.cjs.js`) with `roughness: 1.8, bowing: 1.5, fillStyle: "hachure", fillWeight: 1.5, hachureAngle: -41, hachureGap: 8`
+- A built-in **"Download High-Res PNG (1920x1080)"** and **"Download SVG"** button so Alex can export pixel-perfect dark-mode diagrams directly from Gemini Canvas.

skills/codingcat-media-studio/SKILL.md

@@ -7,6 +7,10 @@ description: Visual and video generation rules for CodingCat.dev, including Gemi
 
 This skill governs all visual media, mascot illustration prompts, hand-drawn dark-mode architecture diagrams, YouTube thumbnails, and video production workflows for **CodingCat.dev** across **Gemini App (`gemini.google.com`)**, **Google Flow (`Veo 3.1`)**, and **Google Antigravity (`agy`)**.
 
+## 0. Mandatory Pre-Tool Prompt Compiler Rule (Never Make the User Paste Long Prompts!)
+
+Whenever the user asks for a diagram, thumbnail, or video with a short 1-sentence request (for example, *"Create a diagram for Sanity Content Releases"* or *"Make a thumbnail for WebMCP"*), **YOU (Gemini) must automatically compile their short request into the full 6-Part Zero-Shot Excalidraw Prompt in `references/excalidraw-diagrams.md` (or the 3-Zone Thumbnail Prompt in `references/youtube-thumbnails.md`) and pass that full expanded prompt into the image generation tool**. Never pass a short unexpanded summary to the image generator, and never ask the user to copy-paste the template themselves.
+
 ## 1. Environment-Aware Asset & Likeness Resolution (Gemini App vs. Antigravity)
 
 Because **Gemini App (`gemini.google.com`)** uses **Avatar (`@alex.patterson`) + Styles + Skills** (rather than legacy Gems with attached photo folders), always resolve likenesses, brand marks, and styles based on the active runtime: