feat(skills): bundle reference PNG/JPG assets into Gemini App skill zips with Step 0 attachment rule

Author: codercatdev

scripts/bundle-gemini-skills.ts

@@ -71,8 +71,12 @@ function zipSkill(skillName: string): void {
 	const skillPath = join(SKILLS_DIR, skillName);
 	const zipOutFile = join(OUT_DIR, `${skillName}.skill.zip`);
 	rmSync(zipOutFile, { force: true });
+	const entries = ["SKILL.md", "references"];
+	if (statSync(join(skillPath, "assets"), { throwIfNoEntry: false })?.isDirectory()) {
+		entries.push("assets");
+	}
 	try {
-		execFileSync("zip", ["-rq", zipOutFile, "SKILL.md", "references"], {
+		execFileSync("zip", ["-rq", zipOutFile, ...entries], {
 			cwd: skillPath,
 		});
 		console.log(`[bundle-gemini-skills] Wrote ${zipOutFile}`);

skills/codingcat-excalidraw-diagrams/SKILL.md

@@ -15,7 +15,14 @@ You MUST follow this **3-Step Execution Protocol** before calling your image gen
 
 ---
 
-## Mandatory 3-Step Execution Protocol
+## Mandatory 4-Step Execution Protocol
+
+### Step 0: Attach Bundled Reference Images (`assets/*`) to the Image Generator Tool Call
+**CRITICAL**: Never call the image generator with text alone when generating thumbnails, presenter cutouts, or vendor logos!
+Before calling your image generation tool, you **MUST** load and pass the actual image files from this skill's `assets/` directory (and from any `@`-mentioned skill such as `@sanity-brand-guidelines`, `@sanitybrand`, `@alex.patterson`, or `@codingcatthumbnails`) as **input reference images** to the image generation tool call on the **very first attempt**:
+- **Whiteboard Diagram Style & Layout Reference**: Attach `assets/excalidraw-thumbnail-left-pose.png` or `assets/excalidraw-thumbnail-right-pose.png` so the image generator copies the exact Rough.js double-stroked white boxes, 45-degree diagonal hachure fills, sketchy Coral Red `X`, and green checkmark (NEVER generate a macOS window with red/yellow/green dots or circular UI icons).
+- **Sanity Official Logo Files**: Whenever Sanity is mentioned, attach `assets/Sanity-Full_logo--white_on_black.png` (stepped diagonal 3-line geometric symbol + bold serif `Sanity` wordmark) and/or `assets/Sanity-Symbol--white_on_black.png` directly to the image generation tool call. **NEVER** invent a red square `"S"` app icon or sans-serif `"SANITY"` text on the shirt.
+- **Alex Patterson Likeness Cutouts**: Attach `assets/alex_pointing_left.jpg` or `assets/alex_mind_blown.jpg` (or the `@alex.patterson` avatar images) directly to the image generation tool call.
 
 ### 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):

skills/codingcat-excalidraw-diagrams/assets/Sanity-Full_logo--white_on_black.png

@@ -7,9 +7,15 @@ 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.
+## 0. Mandatory Pre-Tool Prompt Compiler & Reference Attachment Rule
+
+1. **Always Attach Bundled Reference Images (`assets/*`) on the First Tool Call**:
+   Before calling your image generation tool, you **MUST** load and pass the actual PNG/JPG files from `assets/` (and from any `@`-mentioned skill like `@sanity-brand-guidelines`, `@sanitybrand`, `@alex.patterson`, or `@codingcatthumbnails`) as **input reference images** to the image generation tool call:
+   - `assets/excalidraw-thumbnail-left-pose.png` or `assets/excalidraw-thumbnail-right-pose.png` (authentic Rough.js double-stroked white boxes, 45-degree diagonal hachure fills, Coral `X`, and green checkmark; **NEVER** draw a macOS window with red/yellow/green dots or circular UI icons).
+   - `assets/Sanity-Full_logo--white_on_black.png` and `assets/Sanity-Symbol--white_on_black.png` (official stepped diagonal 3-line geometric symbol + bold serif `Sanity` wordmark; **NEVER** invent a red square `"S"` app icon).
+   - `assets/alex_pointing_left.jpg` or `assets/alex_mind_blown.jpg` (photorealistic studio cutout of `@alex.patterson`).
+2. **Compile Any 1-Sentence Request into the Full 6-Part Prompt**:
+   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)