/visual-planSAFE
Skills for agents
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
Turn ordinary implementation plans into rich interactive visual review surfaces.
/visual-plan turns the plan an agent would normally write in chat into a human-optimized MDX document. In local-files mode, it writes and serves the MDX locally rather than publishing to the hosted Plan database. Instead of a long wall of prose, reviewers get custom components built for understanding: architecture diagrams, wireframes, interactive prototypes, file maps, annotated code, OpenAPI-style API specs, visual schema maps, open questions, and comments.
It solves for plans that are too important to bury in chat. The output is scannable, commentable, and intuitive enough for a human to approve before code changes start.
Visual plans are MDX, customizable with your own components, and viewed with the Agent-Native plans app. The hosted app is 100% free and open source; local-files mode writes MDX locally, starts a localhost bridge, and opens the hosted Plan UI with no sharing. Source here.
What It Does
- Grounds plans in real repo files, schemas, actions, and symbols.
- Chooses the right visual surface: document-only, wireframe canvas, prototype,
design direction, or visual intake.
- Uses MDX and custom components for diagrams, UI flows, API specs, schema maps,
diffs, code annotations, and reviewer questions.
- Publishes the result as an interactive review document instead of inline chat Markdown.
- Keeps the plan as the approval gate before source edits begin.
When To Use It
Use it for multi-file, ambiguous, risky, architecture-heavy, data-heavy, or UI-heavy work where the wrong direction would be expensive. It is also useful when a pasted text plan needs a richer review surface.
Skip it for trivial fixes, single-line changes, or anything whose diff is easi
fb822f174542OBSERVED · 2026-10-23Host compatibility
What the documentation claims. We have not run a compatibility test.
| Host | Status | Notes |
|---|---|---|
| claude-code | mentioned | |
| codex | mentioned | |
| cursor | mentioned |
What it tells the agent
The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.
--- name: visual-plan description: >- Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful. metadata: visibility: exported --- # Agent-Native Plans Agent-Native Plans is structured visual planning mode for coding agents. Build the plan you would normally write in Markdown, but as a scannable document with editable blocks mixed in: inline diagrams, code snippets, open questions, and an optional top visual review area (wireframe canvas, live prototype, or both in tabs). Architecture and backend plans stay document-only; UI and product plans start with the top canvas/prototype (the Visual Surface Choice section owns that rule). `/visual-plan` is the packaged command and main entry point. Choose the review mode from the task: UI-first when the work is primarily product UI and review should start with screens, prototype-first when review should start with a functional live prototype, design-first when review needs full-fidelity branded screens, or visual-intake when the user explicitly wants a questionnaire before planning. When a Codex, Claude Code, Markdown, or pasted plan already exists, `/visual-plan` uses that source plan as the starting point and builds the review surface from it instead of starting over. ## When To Use Create or adapt a visual plan whenever the plan would be better as a reviewable artifact than a chat paragraph. This includes modest work such as a single UI surface with states, a small workflow, a before/after product change, or a component/API/data-shape decision that needs alignment, plus larger multi-file, ambiguous, long-running, risky, or UI-heavy work. Use it when architecture / data flow / UI direction / options / open questions would benefit from inline diagrams or structured blocks, when the user needs to react to a direction before you implement, or when an existing text plan needs a richer review surface. ## Plan Discipline - **Gate thoughtfully.** A visual plan is a richer review surface, not only a tool for giant projects. Use it when the user needs to see, compare, comment on, or approve a direction before code, even for a modest UI/state/workflow change. Skip it for truly trivial, unambiguous work — typos, one-line fixes, a single well-specified function, anything whose diff you could describe in one sentence — and just make the change. Never pad a plan with filler and never ship a single-step plan. - **Research before you draft.** Read the real files, actions, schema, and patterns first; name actual files, symbols, and data shapes instead of inventing them. Check existing `actions/` before proposing endpoints and prefer named client helpers over raw fetch. Delegate wide exploration to a sub-agent. Lead with reuse: for each step, name what it reuses — existing actions, schema, components, helpers — before what it adds, so the plan explains the genuinely new delta instead of redescribing what already exists. - **Decide the hard-to-reverse bets first.** For non-trivial backend, data, or API work, sketch where the feature is headed, then call out the decisions that are expensive to undo once data or callers depend on them — wire format, public ids, data-model shape, auth and ownership boundaries — and get those right in the plan even if most of the feature ships later. Then scope to the smallest first cut that proves the approach without foreclosing it, stating both what is in and what is explicitly deferred. - **Keep examples at the right altitude.** When the user's idea is a broad framework, product, or operating-model change, do not collapse it into the first concrete example, provider, or sync path they mention. Separate the core abstraction from motivating examples and app/provider adapters. Use examples to make the plan legible, but label them as examples unless they are the whole requested scope. - **Publish standalone plans.** If the user pasted, referenced, or already has a Codex / Claude Code / Markdown plan, treat it as source material, but rewrite the published plan as a clean standalone proposal. Preserve the source plan's useful intent and codebase facts, label inferred visuals as inferred, and avoid revision language such as "preserve the prior plan", "do not drop the old idea", "unlike the previous version", or "this revision changes...". A reader who never saw the chat or earlier drafts should understand the plan. - **Make the first read concrete.** If the plan is meant to be shared with someone outside the chat, or if the concept is abstract, lead near the top with one concrete product example before mode tables, architecture, or roadmaps. For UI-capable concepts, that usually means a top-canvas app state that shows the real user workflow in product terms. Do not rely on phrases that only make sense in conversation, and do not frame the plan as "not the old idea"; state the positive model directly. - **Planning is read-only.** Make no source edits while building or reviewing the plan. Start editing only after the user approves the direction. - **Clarify vs. assume.** Do not ask how to build it — explore and present the approach and options in the plan. Ask a clarifying question only when an ambiguity would change the design and you cannot resolve it from the code; use the host agent's normal ask-user-question flow and batch 2-4 high-leverage questions before finalizing. Do not call `create-visual-questions` for ordinary clarification or preflight; reserve it for the visual-intake mode when the user explicitly asks for a visual intake questionnaire. Otherwise state the assumption explicitly and proceed, and keep anything unresolved in the plan's single bottom `question-form` Open Questions block. For complex plans, do a final open-question pass before handoff: if a decision would affect architecture, scope, UX, data shape, or rollout, e
Trust audit
SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | NA |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- none-observed
- Network
- none-observed
- Shell
- none-observed
- Dependencies
- pinned
- Secrets in source
- none-found
Findings (1)
"html": "<div style=\"display:flex;flex-direction:column;gap:10px;padding:16px;height:100%\"><h1>Sign in</h1><p class=\"wf-muted\">Use your work email to continue.</p><div class=\"wf-card\" style=\"di
Gates applied: no_behavioural_pass.
fb822f174542full audit observations/trust-audit/skill/builderio__visual-plan.json · Report an issue / request a re-scanAudit history
Every audit this skill has had.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-23 | fb822f174542 | SAFE | B | 89 | first audit |
Questions
What does the visual-plan — builderio/skills skill do?
Skills for agents
Is visual-plan — builderio/skills safe to install?
The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean skill reads B.
What can visual-plan — builderio/skills access on my machine?
The audit observed no filesystem, network or shell use at all in its source.
Which assistants does visual-plan — builderio/skills work with?
Its documentation mentions claude-code, codex and cursor. That is what the text claims, not a compatibility test we ran.
How current is this page?
The grade is for one exact copy of the source (fb822f174542), read on 2026-10-23. The repository is watched, and a new audit runs when it changes — this is the first audit.
Add this badge to your README
Shows this page's audit result and links back to it. It updates when the audit does.
[](https://modelsatlas.com/skills/builderio/visual-plan/)
Not your listing, or something out of date? Claim or update your listing.