mooboard-create-masonry-grid

name	mooboard-create-masonry-grid
description	Creates a new Mooboard / Moobird board in a Pinterest-style masonry grid. Use for large reference sets, outfit collections, products, recipes, interiors, photography, and browseable image libraries.
disable-model-invocation	true

Mooboard Create Masonry Grid

Create a new board under the Mooboard library in a clean, Pinterest-style masonry grid layout on an infinite board.

This style is for scanning a larger number of items quickly. It should feel organised, tidy, and browseable.

Core idea

The canvas is infinite, so the grid may extend as far down or across as needed. You are not constrained to a fixed page.

However, the layout must be intentionally organised:

• choose a clear column system
• choose a consistent display width for items in the same lane
• preserve image aspect ratios
• calculate display height from display width
• maintain consistent gutters
• avoid overlaps entirely

Do not rely on a layout script. Use agent review to check the masonry plan.

Best use cases

• Large image collections
• Fashion references
• Interior ideas
• Recipes
• Product browsing
• Outfit ideas
• Photo references
• Inspiration boards where browsing matters more than annotation

Style rules

A masonry grid board should usually include:

• 12–100+ images
• Optional small captions or links
• Optional light section headers
• Little or no arrow use
• Minimal expressive annotation

It should not look like:

• a loose collage
• a formal comparison dashboard
• a random scatter
• a single aligned table row

Layout character

Desired feel

• Clean
• Repeatable
• Easy to scan
• Balanced columns
• Predictable spacing
• Good use of the infinite vertical canvas

Spacing expectations

• Horizontal gutter between columns: 80–140px
• Vertical gap between cards within a column: 60–100px
• Hard minimum gap: 50px

Required multi-agent workflow

Agent 1 — Content Planner

Determines:

• number of items
• whether grouping or sectioning is needed
• whether there should be 1 grid or multiple grouped grids

Agent 2 — Grid Planner

Determines:

• number of columns
• shared display width for tiles
• section header regions if needed
• initial x positions for each column

Agent 3 — Placement Planner

Places items:

• calculate each image height from its width
• place each image in the currently shortest appropriate column
• reserve caption or link space if required

Agent 4 — Collision Auditor

Checks:

• no overlaps
• consistent gutters
• aspect-ratio correctness
• column discipline
• that captions do not crash into the next tile

Agent 5 — Visual Critic

Checks:

• whether columns feel balanced
• whether there are awkward large holes
• whether the result still feels like masonry rather than a broken list

Agent 6 — Final Manifest Reviewer

Checks the final written coordinates and sizes again.

Workflow

Masonry Grid Progress:
- [ ] 1. Confirm theme, board name, and destination folder
- [ ] 2. Gather images and optional links/captions
- [ ] 3. Measure natural image sizes
- [ ] 4. Choose column count and tile width
- [ ] 5. Calculate tile heights from aspect ratios
- [ ] 6. Place each tile into the shortest column
- [ ] 7. Add captions/headers if needed
- [ ] 8. Multi-agent collision and balance review
- [ ] 9. Write .mooboard.json — every tile `presentation: "interactive"`
- [ ] 10. Remove orphan media; confirm no `presentation: "file"`
- [ ] 11. Final manifest review

Column planning

Pick columns based on item count and desired density.

General guidance:

• 8–15 items: 3–4 columns
• 16–30 items: 4–5 columns
• 30+ items: 5–7 columns

If the user requests a very airy editorial layout, prefer fewer columns. If the user wants dense browsing, prefer more columns.

Images

For every image on the canvas:

• use type: "image"
• store it at the board root
• include naturalWidth and naturalHeight
• MUST use presentation: "interactive" — full image preview mode
• preserve aspect ratio exactly

Critical: interactive vs file mode

Value	What the user sees	When to use
"interactive"	Full image preview tile in the grid	Always for masonry tiles
"file"	Generic file card, not a preview	Never

Hard rules:

1. Every masonry tile must be "presentation": "interactive".
2. Never write "presentation": "file".
3. Only keep media files that appear as interactive tiles. Orphan files get auto-imported as file cards and break the grid.
4. If links are used, set previewMode: "card" with a real previewImage.

Masonry sizing rule

Choose a shared display width per tile in a section or column set. Then compute:

displayHeight = round(displayWidth * naturalHeight / naturalWidth)

This is the core rule of the masonry layout.

Optional variants

Standard masonry

• all tiles share the same width
• heights vary by aspect ratio

Editorial masonry

• most tiles share the same width
• occasional hero tile may span two columns
• only use this when clearly beneficial

Placement method

Standard method

1. Create the list of columns with current bottom y-values
2. Sort or iterate images in intended order
3. Place each image into the column with the smallest current bottom
4. Update that column’s bottom y-value
5. Repeat

Reserve extra vertical space if a caption or small source card will sit below the image.

Grouped method

If there are sections, create a local masonry grid within each section. Leave generous vertical space between sections.

Titles and captions

Use minimal text. Typical elements:

• a board title near top-left
• optional section headers
• optional short caption below a tile
• optional small link card under a tile or at end of a section

Avoid excessive handwritten notes or many arrows.

Links

If links are included, keep them secondary. Good patterns:

• small card below a tile
• one shared source card for a cluster
• source title below image

Do not let link cards overwhelm the grid.

Camera and envelope

Use a camera that frames the first screenful well. The user can scroll through the larger board.

Typical envelope:

{
  "version": 1,
  "createdAt": 0,
  "lastOpenedAt": 0,
  "objects": [],
  "camera": { "x": 300, "y": 200, "zoom": 0.5 },
  "background": "default",
  "showGrid": true
}

Output to the user

Report:

1. Absolute board path
2. Number of images and any supporting objects
3. Number of columns used
4. Any skipped assets
5. That they should open or refresh the board in Mooboard

Anti-patterns

• Mixing many arbitrary widths without reason
• Breaking aspect ratio
• Overlapping captions and tiles
• Huge inconsistent gutters
• Making it feel like a random collage
• Using lots of arrows
• Allowing one dense column and one nearly empty column without good reason
• Relying on scripts instead of agent review
• Writing tiles with presentation: "file" (file cards instead of image previews)
• Leaving unused media in the board folder (auto-imports as file cards)