Figma

Build me a single-player vector canvas editor, a weekend sketch of Figma's core
canvas. Requirements:

- A canvas editor with rectangles, ellipses, text, and frames; select, move,
  and resize with handles; fill, stroke, and corner-radius controls in a right
  panel.
- A layers list with drag-reorder.
- Export the current selection as SVG and PNG.
- Local-first: documents persist to IndexedDB, with import and export as JSON.
- Vanilla JS or Svelte on a single canvas element, pick the simpler to ship; no
  backend at all.
- No accounts, no telemetry, everything stays in the browser on my machine.
- Out of scope: multiplayer, comments, components, auto-layout, and plugins.
  Do not build any collaboration or sync layer.
- README: state that this is not a Figma replacement, the moat is real-time
  multiplayer plus the network of people already on it, and point to Penpot or
  Excalidraw for serious single-player use.

# AGENTS.md — Build guide for Figma

## Project scope
Build a simple canvas editor with rectangles/text/components and export, but expect it to be a toy compared with Figma.

Catalogue verdict: no. You can make a small drawing/prototyping tool, but Figma's moat is real-time multiplayer editing, plugin ecosystem, design-system workflows, performance, and enterprise trust.
Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope.

## Working agreement
- Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture.
- Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled.
- After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran.
- Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply.
- Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization.

## Prerequisites
- web canvas/WebGL/SVG expertise
- real-time collaboration backend
- file format
- permissions
- plugin model

## Stack and architecture
- Vanilla JS or Svelte on a single canvas element, pick the simpler to ship; no backend at all.
- Local-first: documents persist to IndexedDB, with import and export as JSON.
- Interface for this collaborative interface design workflow: a local web page with input, progress, review, and export views.

## Security and data integrity
- Keep the original media file untouched when decoding or rendering fails; show the failing job and allow retry.
- Validate imported records and file paths; keep user data within the storage location named in the prompt.
- State the practical limit: real-time multiplayer that just works.

## Agent implementation rules
- Project rule, data: Local-first: documents persist to IndexedDB, with import and export as JSON.
- Project rule, behavior: Export the current selection as SVG and PNG.
- Project rule, recovery: Keep the original media file untouched when decoding or rendering fails; show the failing job and allow retry.

## Optional agent skills and references
No installable skill is listed for this guide; use the project rules and the stack documentation.

Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism.

## Distribution ideas
These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone.
- Demonstrate this collaborative interface design operation with sample or user-owned data: Export the current selection as SVG and PNG.
- Show a concrete result or export: Export the current selection as SVG and PNG.
- State the practical limit: real-time multiplayer that just works.

## Engineering roadmap
1. Phase 1, architecture and data: Vanilla JS or Svelte on a single canvas element, pick the simpler to ship; no backend at all. Local-first: documents persist to IndexedDB, with import and export as JSON.
2. Phase 2, implement: Export the current selection as SVG and PNG.
3. Phase 3, implement: Build a simple canvas editor with rectangles/text/components and export, but expect it to be a toy compared with Figma.
4. Phase 4, review and output: Collaborative browser-based design and prototyping tool. Export the current selection as SVG and PNG.
5. Phase 5, recovery and acceptance: Keep the original media file untouched when decoding or rendering fails; show the failing job and allow retry. Verify this invariant with a saved fixture: Undo must restore the previous visual state; export dimensions and asset hash must match the saved project. State the practical limit: real-time multiplayer that just works.

## Paid-product capabilities outside this build
- real-time multiplayer that just works
- your team, who are all on Figma
- the plugin ecosystem
- ten years of canvas performance engineering

## Implementation prompt
Build me a single-player vector canvas editor, a weekend sketch of Figma's core
canvas. Requirements:

- A canvas editor with rectangles, ellipses, text, and frames; select, move,
  and resize with handles; fill, stroke, and corner-radius controls in a right
  panel.
- A layers list with drag-reorder.
- Export the current selection as SVG and PNG.
- Local-first: documents persist to IndexedDB, with import and export as JSON.
- Vanilla JS or Svelte on a single canvas element, pick the simpler to ship; no
  backend at all.
- No accounts, no telemetry, everything stays in the browser on my machine.
- Out of scope: multiplayer, comments, components, auto-layout, and plugins.
  Do not build any collaboration or sync layer.
- README: state that this is not a Figma replacement, the moat is real-time
  multiplayer plus the network of people already on it, and point to Penpot or
  Excalidraw for serious single-player use.

## Completion evidence
Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.