Skip to content
Back to skills

Plan Browser Editing

ASecurity

Which browser surfaces are directly editable and which patch op each one autosaves through — inline prose, local plan folders, review annotation mode, canvas/design elements, and branding. Use when changing plan prose, styles, or wireframe/prototype HTML.

  • 6,969 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added September 3, 2026
ai-agentsdatabase

Works with

  • cli

Security analysis

A100/100

Scanned September 3, 2026

npx -y skills add BuilderIO/agent-native --skill plan-browser-editing --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Plan Browser Editing?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Plan Browser Editing
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/builderio-plan-browser-editing/badge)](https://www.skillsdirectory.com/skills/builderio-plan-browser-editing)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: plan-browser-editing
description: >-
  Which browser surfaces are directly editable and which patch op each one
  autosaves through — inline prose, local plan folders, review annotation mode,
  canvas/design elements, and branding. Use when changing plan prose, styles, or
  wireframe/prototype HTML.
---

# Browser Editing

- Prose in `rich-text` blocks is edited inline with the shared
  `RichMarkdownEditor`, autosaved through `update-visual-plan` with
  `contentPatches: [{ op: "update-rich-text", blockId, markdown }]`.
- Local `/local-plans/:slug` folders opened from `PLAN_LOCAL_DIR` or a
  repo-relative `?path=...` use the same Notion-style browser editor, but
  autosave through `update-local-plan-folder` so changes are written to
  `plan.mdx`, `canvas.mdx`, and `prototype.mdx` without touching the Plan
  database.
- Review annotation mode makes prose temporarily read-only so clicks can pin
  feedback. Leaving review mode restores inline prose editing.
- Canvas, artboard, wireframe, diagram, and custom visual edits remain driven by
  comments, source patches, or structured content patches rather than direct
  rich-text editing.
- Design-mode artboards can be element-edited with `update-visual-plan`
  `contentPatches: [{ op: "update-design-element-style", frameId, blockId,
elementId, styles }]`. Elements must have `data-design-id` or
  `data-plan-design-id`; use `patch-wireframe-html` / `patch-prototype-html` for
  structural or text changes.

## Branding

- The sidebar brand header has a `Customize branding` popover. Treat it as a
  source-code request, not plan data: local Code mode edits `templates/plan`
  source directly, while hosted/live surfaces route people to Desktop or
  Builder for code customization.

## Related Skills

- **plan-comments-and-feedback** — the review/annotation side of these surfaces.
- **plan-source-sync** — the MDX files local folder autosave writes to.
- **plan-hosted-writes** — verification required after each hosted write.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…