graphic-recording Skill

Generate graphic recording style visual note illustrations from slide content. Reuses the nanobanana-image skill's generation scripts.

Prerequisites

• GEMINI_API_KEY set in .env.local

Workflow

Step 1: Identify Target Slide

Determine from user request:

1. Target deck: directory name under decks/
2. Source slide: which MDX file's content to visualize
3. Insertion target: same slide or a different one

Ask if unclear.

Step 2: Extract Slide Content

Method A: Text-based (preferred) Read the target MDX file and extract text content.

Method B: Screenshot-based If dev server is running, capture the slide and analyze visually:

bash
1npx tsx .claude/skills/nanobanana-image/scripts/capture-slide.ts \
2  --deck <deck-name> \
3  --slide <0-indexed> \
4  --output /tmp/slide-capture.png

Step 3: Extract Theme Colors

Read the deck's deck.config.ts and extract:

• primary — main color (headings, emphasis borders)
• accent — accent color (highlights, arrows)
• background — background color
• text — body text color
• surface — surface color (card backgrounds)

Step 4: Build Prompt

Combine slide text content and theme colors into a graphic recording style prompt.

See references/prompt-guide.md for prompt construction guidelines.

Always present the prompt to the user for confirmation before generating.

Step 5: Generate Image

Use the nanobanana-image generation script:

bash
1npx tsx .claude/skills/nanobanana-image/scripts/generate-image.ts \
2  --prompt "<constructed prompt>" \
3  --output "decks/<deck>/assets/<filename>.png" \
4  --aspect-ratio 16:9 \
5  --resolution 2K

• Default aspect ratio: 16:9 (full-width slide usage)
• Filename: graphic-recording-<topic>.png (kebab-case English)

Step 6: Insert into MDX

mdx
1<img src="./assets/<filename>.png" alt="..." style={{ width: "100%", borderRadius: "0.8rem" }} />

• Use relative path ./assets/ (resolveAssetPaths() auto-converts)
• Adjust width and placement based on slide layout

Step 7: Report Results

• Generated image file path
• Prompt used
• How to verify on dev server