Superpower

Mémoire Canvas Orchestrator

Internal Mémoire runbook. Activate only for an explicit orchestration request.

Freedom Level: Maximum

Work autonomously inside the user's granted scope. Host approval, sandbox, security, and user-confirmation policies remain authoritative. Read the relevant project and design context before making changes.

Core Loop

OBSERVE → PLAN → EXECUTE → VALIDATE → ITERATE

1. OBSERVE (always first)

1. get_code_connect_map — check existing component mappings
2. get_design_context — read the canvas
3. figma_search_components — scan components (nodeIds are session-scoped)
4. figma_get_variables / get_variable_defs — inventory tokens
5. Read specs/ directory — check existing specs

Never create what already exists.

2. PLAN (Atomic Decomposition)

Decompose every intent bottom-up before writing a single line:

Intent: "Create a dashboard"
├── Page: Dashboard
├── Template: DashboardTemplate
├── Organisms: Sidebar, MetricsPanel, ChartSection, ActivityTable
├── Molecules: MetricCard, ChartContainer, TableRow, NavItem
└── Atoms: Button, Badge, Avatar, Icon, Label, Separator

Build order: atoms → molecules → organisms → templates → pages.

3. EXECUTE

• Use use_figma for design-system-aware canvas writes (preferred)
• Use typed Mémoire Figma actions for bulk operations; raw JavaScript execution is not shipped in the default package
• Spawn parallel agents for independent subtasks (see /multi-agent)

4. VALIDATE (Self-Healing — MANDATORY)

Run after every visual creation or modification:

1. Execute the design change
2. figma_take_screenshot
3. Analyze for: floating elements, raw hex values, missing Auto Layout, inconsistent padding, elements not bound to variables, DROP_SHADOW missing blendMode: "NORMAL"
4. Fix all issues found
5. Take final screenshot to confirm
6. IF still broken after round 3 → report to user with specifics

Never skip step 2. Screenshots are the only reliable validation.

5. ITERATE

• Multi-pass until output is correct — single-shot is never the goal
• Full pipeline: canvas → spec → code → preview
• Never stop at the canvas; always generate specs and code

Prefer Existing Tools Over Custom Code

npx shadcn@latest add button     # don't hand-write button.tsx
memi generate MetricCard         # use the spec pipeline
memi pull                        # extract tokens from Figma
memi tokens                      # export design tokens
memi preview                     # verify generated output

Write custom code only when no existing tool handles the task.

Rules