grim:media:image-review-flow-workbench

Files (13)

• SKILL.md
• openai.yaml · agents/
• app.js · artifact/
• index.html · artifact/
• state.json · artifact/
• styles.css · artifact/
• image-review-flow-workbench-icon-large.png · assets/
• image-review-flow-workbench-icon-med.png · assets/
• image-review-flow-workbench-icon-small.png · assets/
• icon-frame-unification-2026-08-24.md · assets/prompts/
• icon-generation-2026-08-22.md · assets/prompts/
• icon-hairline-frame-2026-08-22.md · assets/prompts/
• workbench-contract.md · references/

SKILL.md (first lines)

# Image Review Flow Workbench

## Purpose
Use Image Review Flow Workbench when the user wants to explore image or asset concepts through a fast design QA review loop:
- generate four variants at a time;
- show them in the Image Review Flow Workbench artifact;
- let the user heart/select, keep, revise, reject, or mark final images;
- use those selections to make variations, combinations, or refined batches;
- keep exact prompts, critique, QA notes, and batch metadata readable for future agent turns.

Image Review Flow Workbench is the image-generation and candidate-review board for design QA loops.

Video review support:
- The artifact can also display local `.mp4`, `.webm`, `.mov`, and `.m4v` review assets in the same four-up board.
- Store video candidates in `items[].image` with the artifact-relative video path.
- Use this for short trailer, ad, motion, and transition review batches when the review workflow is otherwise the same as image selection.
- Video cards lazily attach their media source and autoplay muted/looped when they are visible or near the viewport, so large boards do not try to load every clip at once.
- Keep every explicit review row to four cards or fewer so Browser annotations, hearts, and fullscreen controls stay easy to target.
- Do not pad a row to four cards. If there is only one unique clip, create a one-card row. If multiple filenames point to the same generated clip or visually identical output, keep one representative item instead of duplicating it.
- Video controls stay hidden until hover or keyboard focus:
  - click the video surface to play or pause;
  - use the center icon to play or pause;
  - use the thin bottom timeline to scrub;
  - use the top-left fullscreen icon to open the full-viewport modal viewer;
  - the fullscreen modal keeps a thin scrubber, current/duration time, and play/pause control available for video review.

## Canonical Paths
App code (in this repo):
- Artifact page: `skills/artifacts/image-review-flow-workbench/artifact/index.html`
- Default state template: `skills/artifacts/image-review-flow-workbench/artifact/state.json`
- Artifact server: `artifacts/server.js`
- Skill source: `skills/artifacts/image-review-flow-workbench/SKILL.md`

Per-project data (in the project the server points at):
- State: `<project-root>/workbench/image-review-flow-workbench/state.json`
- Media: `<project-root>/workbench/image-review-flow-workbench/` — flat, no nested folders

Start and open:
- `node artifacts/server.js --root <project-root>` (run from this repo)
- `http://127.0.0.1:8765/image-review-flow-workbench/`

## Sync Contract
This skill follows the shared Workbench Skill standard in `skills/artifacts/relic-artifacts/references/workbench-skills.md`.

Keep the artifact simple:
- `index.html`
- `styles.css`
- `app.js`
- one tiny server route in `artifacts/server.js`
- one JSON state file at `<project-root>/workbench/image-review-flow-workbench/state.json`

The browser and agents both treat `state.json` as the source of truth.

Required behavior:
- Browser clicks write state immediately through `/api/workbenches/image-review-flow-workbench/state`.
- The artifact polls `state.json` and auto-reloads when an agent edits the file.
- The artifact also scans the flat `workbench/image-review-flow-workbench/` folder and appends untracked media as asset-only rows. Batches and rows are metadata in `state.json`, never folder structure.
- New agent-created review batches should append to the bottom of `state.json` by default, preserving the user's existing review order.
- Keep review batches to a maximum of four items per row. When a review set has more than four assets, split it into multiple bottom-appended rows with clear row labels.
- Review rows should contain the number of unique assets being reviewed, not a fixed count. One unique clip means one item; two unique clips means two items.
- The asset scanner includes images and short video files: `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif`, `.mp4`, `.webm`, `.mov`, and `.m4v`.
- Agents may update `state.json` directly with generated batches, critique, tags, and image paths.
- Do not add a heavyweight database, build pipeline, framework, or import/export subsystem for this workflow.
- Do not make users press a save or reload button for ordinary state sync.

## Language Contract
Use these meanings when the user asks for image work:

- `make a batch for <concept>` or `do a run for <concept>`:
  - Generate four fresh images for that concept.
  - Treat this as prompt-first concept exploration.
  - Make the four outputs meaningfully different enough to help the user discover what they want.
  - Store the row with `intent: "run"` unless a narrower intent is clearly better.
- `make variations of <concept/image/row>`:
  - Generate four divergent directions.
  - Widen the search space instead of preserving the source tightly.
  - Re-prompt, reinterpret, change style/composition, or move into new territory.
  - Store the row with `intent: "diverge"`.
- `vary image <number>` or `take this image and vary it`:
  - Use the referenced image as the seed/reference.
  - Preserve the core image and make small-to-medium changes.
  - Treat this as image-first iteration, not a totally new prompt exploration.
  - Store the row with `intent: "vary-image"` and include `source_images`.
- `refine image <number>`:
  - Preserve the core image and fix specific critique.
  - Make narrower changes than `vary image`.
  - Use this for cleaner text, less clutter, stronger composition, better contrast, or more product-like polish.
  - Store the row with `intent: "refine"` and include `source_images`.
- `show these videos`, `review these clips`, or `make a trailer review board`:
  - Copy the video files into the project's `workbench/image-review-flow-workbench/` folder.
  - Store each clip in `items[].image` just like an image asset.
  - Use one item per clip, with a maximum of four items per row; split larger clip sets into multiple clearly labeled rows.
  - Do not duplicate a single clip just to fill a row. De-duplicate exact repeats and keep one card when there is only one unique clip to inspect.
  - Use `intent: "video-review"` unless the clips are direct implementation evidence, in which case use `intent: "implementation"`.
  - Keep timing, aspect ratio, model/source, and shot role in `qa_notes` or `tags`.
- `review this full cut`, `compose a trailer iteration`, or `add full video variants`:
  - Add the full composed videos as their own review batch.
  - Also add a companion individual-clips batch for the same iteration whenever clip diagnosis matters.
  - Put new full-cut and individual-clip batches at the bottom of the board.
  - Label every individual clip with:
    - shot number or role;
    - source time range;
    - what the clip is testing;
    - known issues such as cursor baseline, size jump, bad morph, or CTA timing.
  - Put these labels in `prompt_delta`, `critique`, `qa_notes`, and `tags` so they appear in the side metadata.

Do not add UI for these workflow modes by default.

Prefer natural language plus copied image references such as `image 3`, `row 2 image 7`, and persisted `state.json` metadata.

## Annotation Contract
When the user annotates or comments on a gallery image or video in Browser, identify the asset from artifact metadata, not screenshot position.

The artifact should expose these attributes on each `.image-card`, `.image-open`, `img`, and `video`:
- `data-testid="flow-image-<number>"`
- `data-flow-ref="image-<number>"`
- `data-flow-number`
- `data-flow-batch-id`
- `data-flow-batch-index`

From MindGoblinStudios/grim-tome, MIT.

More from MindGoblinStudios/grim-tome