mooboard-create-timeline

name	mooboard-create-timeline
description	Creates a new Mooboard / Moobird chronological timeline board on an infinite canvas. Use for project roadmaps, history, trip day-by-day plans, product launch sequences, and any ordered before→after story.
disable-model-invocation	true

Mooboard Create Timeline

Create a new board under the Mooboard library as a chronological timeline on an infinite board.

Core idea

Events progress clearly left→right (default) or top→bottom. Each event is a cluster: date/label + image or evidence + short note. Whitespace separates eras; the infinite canvas can extend as long as needed.

Do not rely on a layout script. Use multi-agent review.

Best use cases

• Project / product roadmaps
• Company or personal history
• Trip day-by-day sequences
• Launch plans
• Process narratives (research → build → ship)

Style rules

Usually includes:

• a title and time-range subtitle
• 4–12 event clusters along an axis
• optional era headers (“Q1”, “Day 2”, “Before / After”)
• short notes and 0–1 image per event
• optional todo for next milestones
• sparse arrows only to show sequence when helpful

It should not look like a collage, masonry wall, or comparison matrix.

Layout character

Desired feel

• Readable chronology
• Even rhythm along the axis
• Clear event clusters
• Room to add future events further along the canvas

Default pattern

Horizontal timeline

1. Title at top-left
2. Baseline / axis implied by aligned event tops (y shared) or a thin geo line
3. Event clusters at increasing x
4. Optional summary / next steps at the far right

Spacing expectations

• Gap between event clusters: 160–280px
• Gap within an event cluster: 60–120px
• Hard minimum gap between substantial boxes: 60px

Required multi-agent workflow

Agent 1 — Narrative Planner

Orders events and chooses horizontal vs vertical.

Agent 2 — Region Planner

Assigns x/y zones per event and title/summary regions.

Agent 3 — Layout Planner

Sizes images/notes and stacks each event cluster.

Agent 4 — Collision Auditor

Checks no overlaps and that chronology reads unambiguously.

Agent 5 — Story Critic

Checks whether a stranger can follow the sequence in under 10 seconds.

Final Manifest Reviewer

Checks the written .mooboard.json:

• coordinates match the approved plan
• every image is presentation: "interactive"
• every link is previewMode: "card" with previewImage
• folder media matches referenced paths exactly

Workflow

Timeline Progress:
- [ ] 1. Confirm theme, board name, destination
- [ ] 2. Gather ordered events + media/links
- [ ] 3. Choose horizontal vs vertical
- [ ] 4. Place title + event clusters in order
- [ ] 5. Add notes / images / links per event
- [ ] 6. Multi-agent spacing + story review
- [ ] 7. Write .mooboard.json (interactive images, card links)
- [ ] 8. Remove orphan media; final review

Images and media (hard rules)

For every image on the canvas:

• use type: "image"
• store media at the board root
• include naturalWidth and naturalHeight
• preserve aspect ratio
• MUST set presentation: "interactive" (preview tiles)

Never use presentation: "file" for images meant to be seen as previews.

Link cards must use:

• previewMode: "card"
• a real previewImage URL

Audio / PDF / other attachments use type: "file" with presentation: "interactive" when the user should open/play them.

No orphan media. Every media file in the board folder must be referenced by a canvas object. Extra loose files get auto-imported as file cards and can destroy the layout.

Bounding boxes

Maintain a placement table of (id, type, x, y, width, height, region). Treat images, links, todos, native text, geo, and file cards as blocking boxes. Arrows may cross freely and are not blockers. Never allow accidental overlap between blocking boxes.

Anti-patterns

• Events out of order without labeling
• Overlapping clusters
• Turning the timeline into a mood collage
• Packing all events into one viewport when the story needs length
• presentation: "file" images or orphan media

Camera and envelope

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

Use epoch-ms timestamps. Object IDs: UUIDs for moobard objects; shape:<id> for native shapes.

Output to the user

Report:

1. Absolute board path
2. Layout pattern used and key region counts
3. Counts of images, links, notes/todos, and other objects
4. Any skipped URLs or assets
5. That they should open or refresh the folder in Mooboard to see it

Do not claim the app rendered the board unless that was observed.