Skip to content

Commit c936e63

Browse files
committed
feat(skills): embed 1376x768 rlRjDV5itQ2U template JPEGs and anti-cartoon rule
1 parent 9069d77 commit c936e63

12 files changed

Lines changed: 23 additions & 27 deletions

‎skills/codingcat-excalidraw-diagrams/SKILL.md‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ You MUST follow this **3-Step Execution Protocol** before calling your image gen
1717

1818
## Mandatory 4-Step Execution Protocol
1919

20-
### Step 0: Attach Bundled Reference Images (`assets/*`) to the Image Generator Tool Call
21-
**CRITICAL**: Never call the image generator with text alone when generating thumbnails, presenter cutouts, or vendor logos!
22-
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**:
23-
- **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).
24-
- **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.
25-
- **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.
20+
### Step 0: Use `assets/sanity-thumbnail-template-left.jpg` (or `sanity-thumbnail-template-right.jpg`) as the Base Image for `image_generation`
21+
**CRITICAL**: Never call the image generator with text alone, and **NEVER write the word `"Excalidraw"` in the prompt sent to the image generator** when a presenter is included (writing `"Excalidraw"` causes the image rewriter to turn the presenter into a cartoon drawing instead of a realistic photograph!).
22+
Before calling your image generation tool, you **MUST** load and pass the bundled `1376x768` template files from `assets/` as **input reference images** to the image generation tool call on the **very first attempt**:
23+
- **`assets/sanity-thumbnail-template-left.jpg`** (`1376x768`): Full-resolution finished template with the photorealistic mind-blown cutout of Alex Patterson on the bottom-left (wearing a black t-shirt with `Sanity-Symbol--white_on_black.png` and a round black Pixel Watch), `Sanity-Full_logo--white_on_black.png` at the top center, bold white + OrangeRed (`#FF5500`) title text, and the 2D double-stroked white diagram on the right.
24+
- **`assets/sanity-thumbnail-template-right.jpg`** (`1376x768`): Full-resolution finished template with the photorealistic smiling/gesturing cutout of Alex Patterson on the right third (with OrangeRed `#FF5500` rim outline) and the 2D double-stroked white diagram with 45-degree diagonal hachure fills on the left two-thirds.
25+
- **`assets/diagram-base-purple-green.jpg`** (`1376x768`): Full-resolution template with Royal Purple (`#4B2E83`), Soft Lavender (`#B4A7D6`), and Electric Lime (`#C5E86C`) hachure diagram + photorealistic Alex Patterson cutout on the right.
26+
- **`assets/Sanity-Full_logo--white_on_black.png`** & **`assets/Sanity-Symbol--white_on_black.png`**: Official white-on-black Sanity logo files.
27+
- **`assets/alex_pointing_left.jpg`** & **`assets/alex_mind_blown.jpg`**: Photorealistic studio cutouts of Alex Patterson.
2628

2729
### Step 1: Extract the 3-Stage Architecture Model from the User's Topic
2830
Automatically map the user's short topic into three concrete columns (using **1 to 3 words max per box** so text is 100% legible):
@@ -66,26 +68,19 @@ Flat 2D hand-drawn dark-mode whiteboard software architecture diagram (16:9 aspe
6668
- Use all color values strictly as visual rendering guidelines; never render hex codes, UI toolbars, or watermarks as text on the canvas.
6769
```
6870

69-
#### Mode B: 16:9 YouTube Thumbnail with `@alex.patterson` (When user mentions thumbnail, `@alex.patterson`, or `@codingcatthumbnails`)
71+
#### Mode B: 16:9 YouTube Thumbnail with Photorealistic Alex Patterson Cutout (Pass `assets/sanity-thumbnail-template-left.jpg` or `assets/sanity-thumbnail-template-right.jpg` as Input Image 0!)
7072
```text
71-
High-contrast 16:9 YouTube thumbnail on a pure black (#000000) background with a faint dark gray (#212121) 20px technical gridline pattern.
72-
73-
1. Left Third (Presenter Cutout - @alex.patterson):
74-
- 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.
75-
- 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.
76-
77-
2. Top Center-Right (Brand Lockup & 2-Word Headline):
78-
- Centered near the top above the diagram is the official white brand logo lockup.
79-
- 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).
80-
81-
3. Right Two-Thirds (Flat 2D Hand-Drawn Dark-Mode Whiteboard Diagram):
82-
- Authentic flat 2D whiteboard sketch aesthetic (Rough.js / Excalidraw style) with zero 3D perspective.
83-
- Every box is drawn with TWO slightly offset, overlapping, hand-drawn sketchy white (#FFFFFF) marker strokes and 45-degree diagonal hachure hatch fills.
84-
- 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.
85-
- 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]".
86-
- 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]".
87-
- 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.
88-
- 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.
73+
Edit `assets/sanity-thumbnail-template-left.jpg` (16:9 aspect ratio): keep the exact PHOTOREALISTIC STUDIO PHOTOGRAPH CUTOUT of Alex Patterson on the bottom-left (preserving 100% of his real photographic skin texture, facial likeness, short light-brown hair, blue-green eyes, trimmed salt-and-pepper beard, round black smartwatch on his left wrist, bare hands with no rings, and his black #0B0B0B crew-neck t-shirt with the white stepped Sanity symbol from `assets/Sanity-Symbol--white_on_black.png` printed on the chest; NEVER turn the presenter into a drawing, sketch, or cartoon illustration).
74+
75+
Keep the official white-on-black Sanity logo lockup (`assets/Sanity-Full_logo--white_on_black.png`, stepped diagonal zig-zag symbol on the left + bold serif 'Sanity' wordmark on the right) centered at the top.
76+
77+
Directly below the top Sanity logo, change the 2-word headline text to "[HEADLINE_WORD_1] [HEADLINE_WORD_2]" in the exact same heavy geometric grotesque font, with "[HEADLINE_WORD_1]" in crisp white (#FFFFFF) and "[HEADLINE_WORD_2]" in vibrant Sanity OrangeRed (#FF5500), ensuring Alex Patterson's head and hands do not overlap or cover the title text.
78+
79+
On the right side on the pure black (#000000) background, keep the exact same 2D hand-drawn white (#FFFFFF) double-stroked diagram box style and layout, updating only the text labels inside the boxes for this topic:
80+
- Left diagram cluster: Double-stroked sketchy boundary box labeled "[LEFT_ALL_CAPS_CAPTION]" at top and bottom in white Virgil hand-drawn marker font, containing three stacked cards ("[BAD_NODE_1]", "[BAD_NODE_2]", "[BAD_NODE_3]") crossed out with a large Coral Red (#FCA5A5) hand-drawn "X" mark.
81+
- Center diagram card: Connected by sketchy white arrows to a single central document card (with folded top-right corner) labeled "[CENTER_CORE_NODE]".
82+
- Right diagram cluster: Two sketchy white arrows branching from "[CENTER_CORE_NODE]" to two double-stroked boxes on the far right labeled "[GOOD_NODE_1]" and "[GOOD_NODE_2]", topped with a bright green (#C5E86C / #86EFAC) hand-drawn checkmark and "[RIGHT_ALL_CAPS_CAPTION]" label in white Virgil marker font.
83+
The hex codes are color values only. Do not render them as text in the image.
8984
```
9085

9186
### Step 3: Call the Image Generator Immediately + Output a Markdown Comparison Table
176 KB
Loading
Binary file not shown.
Binary file not shown.
214 KB
Loading
270 KB
Loading

‎skills/codingcat-media-studio/SKILL.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ This skill governs all visual media, mascot illustration prompts, hand-drawn dar
99

1010
## 0. Mandatory Pre-Tool Prompt Compiler & Reference Attachment Rule
1111

12-
1. **Always Attach Bundled Reference Images (`assets/*`) on the First Tool Call**:
12+
1. **Always Attach Bundled `1376x768` Template Images (`assets/*`) on the First Tool Call**:
1313
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:
14-
- `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).
14+
- `assets/sanity-thumbnail-template-left.jpg` or `assets/sanity-thumbnail-template-right.jpg` or `assets/diagram-base-purple-green.jpg` (full-resolution `1376x768` templates featuring the 100% photorealistic cutout of Alex Patterson, official Sanity logos, 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, and **NEVER** turn the presenter into a cartoon drawing or sketch).
1515
- `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).
1616
- `assets/alex_pointing_left.jpg` or `assets/alex_mind_blown.jpg` (photorealistic studio cutout of `@alex.patterson`).
17+
- **CRITICAL ANTI-CARTOON RULE**: Never write the word `"Excalidraw"` in the prompt sent to `image_generation` when a presenter is included (writing `"Excalidraw"` causes the image rewriter to turn the presenter into a cartoon sketch). Instead, pass `assets/sanity-thumbnail-template-left.jpg` as Input Image 0 and instruct the tool to keep the **photorealistic studio photograph cutout** of Alex Patterson 100% unchanged while updating the title text and 2D double-stroked diagram node labels.
1718
2. **Compile Any 1-Sentence Request into the Full 6-Part Prompt**:
1819
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.
1920

176 KB
Loading
Binary file not shown.
Binary file not shown.

0 commit comments

Comments
 (0)