menu-image-assets - SKILL.md Agent Skill

name: menu-image-assets description: Generate Saizeriya-style generic menu item image assets for Betterzeriya. Use when the agent needs to create or refresh menu item thumbnails from apps/betterzeriya/src/lib/assets/data/menu.json using 4x4 generated contact sheets, split them into per-code WebP files, and update imageUrl values. This skill must use generic casual Italian restaurant food imagery only: no Saizeriya logos, trademarks, signage, text, labels, or brand marks.

Menu Image Assets

Generate menu thumbnails by asking the image generation tool for 4x4 contact sheets, then split each sheet into per-menu-item images.

Outputs

Final item images: apps/betterzeriya/src/lib/assets/image/{code}.webp
UI references: apps/betterzeriya/src/routes/sessions/[id]/+page.svelte loads images with import.meta.glob('../../../lib/assets/image/*.webp', { eager: true, query: '?url', import: 'default' })
Menu data: keep apps/betterzeriya/src/lib/assets/data/menu.json free of generated public URLs; use imageUrl only for explicit external/official image URLs.
Temporary sheet files: tmp/menu-image-sheets/sheet-001.webp, etc.

Do not reference images directly from $CODEX_HOME/generated_images. Copy or convert them into the workspace first.

Workflow

Read apps/betterzeriya/src/lib/assets/data/menu.json.
Chunk menu entries into groups of 16 in file order.
For each chunk, call the built-in image generation tool once with the prompt template below.
Find the newly generated files under $CODEX_HOME/generated_images/<thread-id>/.
Copy or convert the generated sheets to tmp/menu-image-sheets/sheet-001.webp, sheet-002.webp, and so on in generation order.
Split every sheet into a 4x4 grid in left-to-right, top-to-bottom order.
Save each crop as apps/betterzeriya/src/lib/assets/image/{code}.webp, preferably 512x512 WebP.
Ensure the UI maps each menu code to its generated asset through import.meta.glob.
Run bun check:fix and bun run test.

Prompt Template

Use this prompt once per 16-item chunk. Normalize half-width kana in menu names with NFKC before inserting them.

Create one square contact-sheet image divided into an exact 4x4 grid of equal square cells.
Each cell is a realistic, appetizing food photo for one menu item from a generic Japanese casual Italian family restaurant.
Order is strict: fill the grid left-to-right across the top row, then the second row, third row, and bottom row.

Menu items:
1. row 1, column 1: <item 1 name>
2. row 1, column 2: <item 2 name>
3. row 1, column 3: <item 3 name>
4. row 1, column 4: <item 4 name>
5. row 2, column 1: <item 5 name>
6. row 2, column 2: <item 6 name>
7. row 2, column 3: <item 7 name>
8. row 2, column 4: <item 8 name>
9. row 3, column 1: <item 9 name>
10. row 3, column 2: <item 10 name>
11. row 3, column 3: <item 11 name>
12. row 3, column 4: <item 12 name>
13. row 4, column 1: <item 13 name>
14. row 4, column 2: <item 14 name>
15. row 4, column 3: <item 15 name>
16. row 4, column 4: <item 16 name>

Style: clean menu photography, centered dish, natural restaurant table lighting, consistent camera angle, realistic plating, no people.
Layout: 4 columns by 4 rows, equal cell sizes, each dish fully contained in its own cell with enough padding for later cropping.
Constraints: no text, no labels, no numbers, no logos, no watermarks, no brand marks, no trademarks, no restaurant signage, no mascots, no Saizeriya branding.
For any empty unused cell, leave the cell as a plain neutral tabletop with no dish and no text.

Local Split Snippet

Use a local image tool available in the repo/environment. If sharp is not installed, use bunx sharp-cli, ImageMagick, Pillow, or another available image processor. Avoid adding runtime dependencies just for a one-off split.

The split must:

Center-crop each sheet to a square if needed.
Divide the square into four equal columns and four equal rows.
Map crop index 0..15 to the matching menu chunk item.
Resize each output to 512x512.
Save as WebP.

After splitting, verify:

find apps/betterzeriya/src/lib/assets/image -type f -name '*.webp' | wc -l
node -e "const menu=require('./apps/betterzeriya/src/lib/assets/data/menu.json'); console.log(menu.length, menu.filter((item)=>item.imageUrl).length)"

Safety Notes

These are generated approximations, not exact official product photos.
Never include Saizeriya logos, signage, trademarks, or in-image menu text.
Keep original generated files in $CODEX_HOME/generated_images; do not delete them unless explicitly asked.