How do I install the Plan Browser Editing skill?

Run npx skillmds@latest add builderio/plan-browser-editing in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Plan Browser Editing safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Plan Browser Editing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Plan Browser Editing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Plan Browser Editing?

Builder.io (@builderio) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Plan Browser Editing by builderio — Agent Skill

Name: Plan Browser Editing
Author: Builder.io

Plan Browser Editing

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.

Builder.io b9f73a8 1.9 KB Updated Sep 17, 2026 3.4k repo stars

File contents

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.

---name: plan-browser-editingdescription: 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.

Frequently asked questions