name	generate-image
description	Generates images for slides via the research:generate-image skill (browser-driven Gemini/ChatGPT) and records the prompt to src/prompts/ for later regeneration. Use when asked to create, generate, or design images for slides, presentations, or visual content.
allowed-tools	Skill, Read, Write, Bash(cp:), Bash(mv:), Bash(ls:*)

Image Generation for Slides

Generate slide visuals using the shared research:generate-image skill, which drives Gemini or ChatGPT through a real browser (Claude in Chrome) using the user's existing logged-in session — no API key required.

This repo adds one convention on top: every generated image's prompt is saved to a JSON file in src/prompts/ so images can be referenced and regenerated later with the same (or a tweaked) prompt.

Workflow

Generate the image by invoking the shared skill:
```
Skill(research:generate-image)
```
Follow its workflow — pick the model (Gemini is a strong default for the text-heavy, label-rich diagrams in this deck), craft the prompt, show it to the user, generate, review, and iterate. For this deck's terminal aesthetic, keep the palette on dark #0a0e14 with white #e2e8f0, orange #f0883e, and green #7ee787, and remember all labels in the EN deck must be in English.
Place the image in public/. The shared skill delivers the file to the browser's Downloads folder (or you can use its JS canvas-extraction download). Move/copy it into public/ with the final filename, e.g.:
```
cp ~/Downloads/output.png public/llm-theory-infographic.png
```
In slide components, import it with the ?url suffix (required for GitHub Pages): import img from '/llm-theory-infographic.png?url';
Save the prompt to src/prompts/<name>.json (same base name as the image). This is the key convention to preserve. The record format:
```
{
  "filename": "llm-theory-infographic.png",
  "prompt": "<the exact prompt that was sent>",
  "ratio": "16:9",
  "timestamp": "2026-05-29T12:00:00.000Z",
  "model": "gemini (via research:generate-image, browser)"
}
```
- filename — output image filename in public/
- prompt — the exact prompt used (so the image can be regenerated)
- ratio — aspect ratio (16:9, 4:3, 1:1, 4:5)
- timestamp — ISO timestamp of generation
- model — which model/route produced it (e.g. gemini or chatgpt via research:generate-image)
If you're updating an existing image, overwrite its existing src/prompts/<name>.json so there's one source of truth per image.

Regenerating an existing image

Read the existing src/prompts/<name>.json for the previous prompt.
Tweak the prompt as needed (e.g. translate labels to English).
Run the workflow above, overwrite public/<name> and update src/prompts/<name>.json with the new prompt and timestamp.

Notes

Build-time PNG/JPEG compression is handled automatically by vite-plugin-imagemin, so no manual compression is needed.

Image Generation for Slides

Workflow

Generate the image by invoking the shared skill:

Skill(research:generate-image)

Follow its workflow — pick the model (Gemini is a strong default for the text-heavy, label-rich diagrams in this deck), craft the prompt, show it to the user, generate, review, and iterate. For this deck's terminal aesthetic, keep the palette on dark #0a0e14 with white #e2e8f0, orange #f0883e, and green #7ee787, and remember all labels in the EN deck must be in English.

Place the image in public/. The shared skill delivers the file to the browser's Downloads folder (or you can use its JS canvas-extraction download). Move/copy it into public/ with the final filename, e.g.:

cp ~/Downloads/output.png public/llm-theory-infographic.png

In slide components, import it with the ?url suffix (required for GitHub Pages): import img from '/llm-theory-infographic.png?url';

Save the prompt to src/prompts/<name>.json (same base name as the image). This is the key convention to preserve. The record format:

{
  "filename": "llm-theory-infographic.png",
  "prompt": "<the exact prompt that was sent>",
  "ratio": "16:9",
  "timestamp": "2026-05-29T12:00:00.000Z",
  "model": "gemini (via research:generate-image, browser)"
}

filename — output image filename in public/
prompt — the exact prompt used (so the image can be regenerated)
ratio — aspect ratio (16:9, 4:3, 1:1, 4:5)
timestamp — ISO timestamp of generation
model — which model/route produced it (e.g. gemini or chatgpt via research:generate-image)

If you're updating an existing image, overwrite its existing src/prompts/<name>.json so there's one source of truth per image.

Regenerating an existing image

Read the existing src/prompts/<name>.json for the previous prompt.

Tweak the prompt as needed (e.g. translate labels to English).

Run the workflow above, overwrite public/<name> and update src/prompts/<name>.json with the new prompt and timestamp.

Notes

Build-time PNG/JPEG compression is handled automatically by vite-plugin-imagemin, so no manual compression is needed.