generate-project-plan

What this skill does

# generate-project-plan

Turn a PRD (plus optional codebase grounding) into a FigJam project plan board. Section set is not fixed — the skill proposes candidates from the research and the user picks which to include. For each picked section, the skill proposes content + rendering shape (block) and the user confirms.

## Mandatory prerequisites

**Foundation skills** (load by name; available in `figma/mcp-server-guide`):

- `figma-use` — **Load once per session.** Stays in context for all `use_figma` calls.
- `figma-use-figjam` — **Re-load before every `use_figma` call.**
- `figma-generate-diagram` — **Re-load before every `generate_diagram` call.**

**Foundation references** (in this plugin):

- [`foundation/palette.md`](references/foundation/palette.md) — section + sticky + text palette constants (`hex/255`).
- [`foundation/layout.md`](references/foundation/layout.md) — canvas geometry, sizing rules, placeholder lifecycle.
- [`foundation/plugin-api-traps.md`](references/foundation/plugin-api-traps.md) — documented traps for FigJam `use_figma`.
- [`foundation/codebase-grounding.md`](references/foundation/codebase-grounding.md) — Step 1 expansion rules.

**Section catalog**:

- [`section-catalog.md`](references/section-catalog.md) — the ~10 candidate sections with default blocks and palette.

**Block subskills** (one per content type — re-load the one(s) you need before each `use_figma` fill call):

| Block | File | When to load |
|---|---|---|
| Top-level section | [`blocks/section.md`](references/blocks/section.md) | Skeleton pass (Step 6) and every fill call (Step 7) |
| Nested section | [`blocks/nested-section.md`](references/blocks/nested-section.md) | Fills that group sub-content (e.g. "Design Decisions 1/2/3") |
| Intro callout | [`blocks/intro-callout.md`](references/blocks/intro-callout.md) | Fills that open with a highlighted intro (e.g. Motivation) |
| Text primitives | [`blocks/text-primitives.md`](references/blocks/text-primitives.md) | Any fill that uses body paragraphs, H3 subheaders, or bulleted lists |
| Table | [`blocks/table.md`](references/blocks/table.md) | Fills with structured data (Resources, Goals, Dependencies, Rollout, Milestones) |
| Multi-column text | [`blocks/multi-column-text.md`](references/blocks/multi-column-text.md) | Fills with 2–4 option columns (Design Decisions alternatives) |
| Sticky column | [`blocks/sticky-column.md`](references/blocks/sticky-column.md) | Fills with lists of stickies (Success Metrics, Risks, Open Questions) |
| Diagram section | [`blocks/diagram-section.md`](references/blocks/diagram-section.md) | Right-column diagram sections (Step 8) |
| Metadata strip | [`blocks/metadata-strip.md`](references/blocks/metadata-strip.md) | Skeleton pass — one metadata strip at top of board |

**Also pass** `skillNames: "figma-use,figma-use-figjam,generate-project-plan"` on `use_figma` calls (logging only).

## Visual UI conventions — STRICT, do not deviate

These are derived from a canonical reference board. Read the source-of-truth files for the full constants; this section is a single-place summary so an agent can answer "what color / size / font / padding?" without hunting.

### Colors (two-tone per section)

Every left-column section uses **two coordinated colors** of the same hue: a very-pale `ARCH_PALE` background, and a slightly-more-saturated FigJam-`SECTION` palette color for any table header inside that section. Right-column diagram sections are pure white.

| Section bg (`ARCH_PALE.X`) | Table header (`TABLE_HEADER.lightX`) | Hue |
|---|---|---|
| `#F8F5FF` | `#DCCCFF` | violet |
| `#EBFFEE` | `#CDF4D3` | green |
| `#DBF0FF` | `#C2E5FF` | blue |
| `#F5FBFF` (alt) | `#C2E5FF` | pale blue |
| `#FFF7F0` | `#FFE0C2` | orange |
| `#F1FEFD` | `#C6FAF6` | teal |
| `#FFFBF0` | `#FFEC BD` | yellow |
| `#FFEEF8` | `#FFC2EC` | pink |
| `#FFEEE8` | `#FFCDC2` | red |

Source: `references/foundation/palette.md`. Never use the dark-saturated palette (`#874FFF`, `#3DADFF`, etc.) for table headers — that's for FigJam's standalone tables, not project-plan boards.

Architecture-diagram subgraph colors are auto-applied by `generate_diagram` and **must not be overridden**. Their canonical values: `client #AFF4C6` rounded-rect, `gateway #FFFFFF` square (diamond if labeled "Load Balancer"/"ALB"/"LB"), `service #E4CCFF` square, `datastore #BDE3FF` cylinder, `external #FFFFFF` PREDEFINED_PROCESS, `async #BDE3FF` ENG_QUEUE.

### Typography (font sizes)

| Element | Size | Font | Color |
|---|---|---|---|
| H1 (board title) | **40** | Inter Medium | `#1E1E1E` |
| H2 (section title — first child of every section) | 40 | Inter Medium | `#1E1E1E` |
| H3 — full-width subhead (e.g. "Resources" inside Motivation) | **40** | Inter Medium | `#1E1E1E` |
| H3 — nested-section header (e.g. "Design Decision 1: …") | **32** | Inter Medium | `#1E1E1E` |
| H3 — column title in 2/3/4-col layouts (Risks col, Goals col) | **24** | Inter Medium | `#1E1E1E` |
| Body text | 16 | Inter Medium | `#1E1E1E` |
| Table cells (header AND body) | 16 | **Inter Bold** | `#1E1E1E` |

The three different H3 sizes are deliberate. 40 = matches H2 weight when subhead is alone in the section. 32 = sub-section header inside a child section (672px inner width). 24 = column title in narrow contexts (≤ 224px col width). Pick by **container width**, not by semantic depth.

Always load both `Inter Medium` AND `Inter Bold` at the top of any `use_figma` script that creates tables (Bold) plus any other text (Medium).

### Section properties

| Property | Value |
|---|---|
| `section.fills` | `[{ type: 'SOLID', color: ARCH_PALE.X }]` (left column) or `ARCH_PALE.white` (right column / diagrams) |
| `section.name` | `""` — empty string. NO FigJam title-bar label. The H2 inside is the only title. |
| Inner padding (all 4 sides) | 32 (current default; reference uses 40-50, kept at 32 for now) |
| First child position | `(32, 32)` |
| Width (left column) | 800 |
| Width (right column / diagram) | `max(1200, diag.width + 64)` after diagram is reparented |
| Vertical gap between sections (inside the wrapper) | **64** |
| Hug behavior | Manual: call `section.resizeWithoutConstraints(w, maxChildBottom + 32)` after appending children. Sections do NOT auto-grow. |
| Placeholder during build | `placeholder = true` in skeleton pass; `placeholder = false` at the end of the section's fill. |

### Outer wrapper + column alignment (STRICT defaults)

The board has **one outer wrapper** (unlabeled, white) plus the diagram column:

1. **Column wrapper** — an unlabeled white SECTION at `(_, 0)`. Contains, in order from top:
   - H1 project title (40px Inter Medium, charcoal) at `(64, 64)` (= section padding)
   - Body row of metadata: Owner / Status / Last updated / Source (16px Inter Medium, charcoal), at `(64, h1.y + h1.height + 16)` — 16px gap below H1; 32px gap between each body cell
   - 64px gap below the body row, then the 6 left-column sections stacked with 64px gutter
2. **Diagram column** at `(columnWrapperRight + 64, 0)`. Each diagram is its own un-wrapped white SECTION; the **top diagram's y aligns with the column wrapper's y (= 0)**. Diagrams stack with 64px gutter.

The metadata is **embedded** in the column wrapper (NOT a separate section). One column wrapper holds everything text-related.

**Constants:**
- Wrapper inner padding (all 4 sides): **64**
- Vertical gap between sections inside the wrapper: **64**
- Horizontal gap between wrapper right edge and diagram-column left edge: **64**
- Top of the diagram column aligns with `wrapper.y` (same horizontal axis as the wrapper top edge)
- Vertical gap between stacked diagram sections: **64** (matches the inner gutter)

```js
const PAD = 64;
const leftIds = [/* all left-column section ids in order */];
const sections = [];
for (const id of leftIds) sections.push(await figma.getNodeByIdAsync(id));

// Compute bbox of the column in page coords
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (const