iframe-canvaslisted

Decide and build a pan/zoom canvas whose artboards are live `<iframe>` previews — the architecture behind AI site/app builders (Reweb, Sleek, Plasmic, Builder.io, Onlook), not the one behind Figma. Owns the decisions that fail late: how many live frames the tab can afford, same-origin vs cross-origin isolation, snapshot-vs-live per artboard, the interaction mode that gates pointer events, the camera and its two coordinate spaces, and the `postMessage` contract across the boundary. Use when the user says "infinite canvas", "canvas infinita", "tavolozza tipo Figma", "artboard", "live preview in an iframe", "visual editor", "click to select an element in the preview", "pan and zoom the workspace", or when a preview iframe gets slow, blurry, or stops receiving clicks. Refuses outside Next.js 16 web. Not for: WebGL/Konva canvas rendering (a different architecture — this skill says when to switch), React Native, or building the editor UI around the canvas.
lukedj78/dev-flow · ★ 6 · Web & Frontend · score 78

Install: claude install-skill lukedj78/dev-flow

# iframe-canvas — the frame budget comes before the feature A canvas of live `<iframe>` artboards is the architecture behind every AI site- and app-builder: Reweb, Sleek, Plasmic, Builder.io, Onlook, v0. It is **not** the architecture behind Figma, and starting from "like Figma" is how projects in this family go wrong. The failure mode is late and looks like polish debt: it works with three artboards, drags with twelve, and by then the camera, the protocol and the selection model all assume live frames everywhere. Every decision below is cheap on day one and structural by month two. ## When this skill applies - The user wants a workspace you can pan and zoom with more than one preview on it. - The user wants to click an element **inside** a preview and edit it. - A preview iframe went slow, blurry, or stopped receiving clicks. - The user says "like Figma" about a DOM-and-iframe product — read *The Figma trap* first. - The user is choosing between an iframe canvas and a rendered one (WebGL/Konva/2D). ## Contract Follows the dev-flow contract — see `references/contracts.md`. Key facts: - Reads `meta.json#stack.framework` and `stack.nextjs_version`. For monorepo, reads `stack.monorepo.web.*`. - **Refuses** if `stack.framework ∉ {"next", "monorepo"}`. The camera maths and the iframe process model are framework-agnostic, but the guidance here is written against App Router routes serving the renderer document, and mis-applying it is worse than refusing. - Records the cho