# Visual Edit

Open and collaboratively edit a running local app in Design, with shared fallback...

- Repository: https://github.com/BuilderIO/agent-native (7579 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add BuilderIO/agent-native --skill visual-edit -g -a claude-code -y`
Codex: `npx skills add BuilderIO/agent-native --skill visual-edit -g -a codex -y`
Cursor: `npx skills add BuilderIO/agent-native --skill visual-edit -g -a cursor -y`
Gemini CLI: `npx skills add BuilderIO/agent-native --skill visual-edit -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add BuilderIO/agent-native`

## Description

Open and collaboratively edit a running local app in Design, with shared fallback previews and source handoff. Use when the user asks to inspect, share, or edit a real local app in Design.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Visual Edit

Use `/visual-edit` when the user wants to inspect or edit a real local app
visually instead of generating standalone Alpine HTML. The source of truth is
the running localhost app plus its route URLs. Design shows those routes as
iframe-backed screens on the infinite canvas.

The editor is hosted at `https://design.agent-native.com`. Never start local
Design; only the target app and bridge run locally.

See the [Visual Edit guide](https://github.com/BuilderIO/agent-native/blob/main/skills/visual-edit/README.md)
for a worked onboarding-flow example.

## Fast local startup

- Do not install this skill into the target app or start a local Design server.
  The skill belongs to the coding host; Design is always the hosted app above.
- If you need to start an Agent-Native framework app yourself, use
  `AUTH_DISABLED=1` with its normal dev command. This is local-only and gives
  the visual editor the framework's dev identity without a user login.
- If an agent-owned local server redirects a requested screen to `/sign-in`,
  restart that server with `AUTH_DISABLED=1` and probe the route again before
  opening Design. Never present a sign-in page as the requested screen.
- Before calling `open-visual-edit`, verify the target URL responds. Start an
  agent-owned dev server with its normal command when it is down, and wait for
  the requested routes to respond before opening Design. Never leave a dead
  localhost URL in the canvas.
- Preserve a server you did not start; use its existing authenticated browser
  session or explain that the target app, rather than Design, requires login.
- When the user gives explicit paths, skip route inventory and place those
  paths directly. Discover routes only when paths were not supplied.

## Installation

The rest: https://github.com/BuilderIO/agent-native/blob/HEAD/.agents/plugins/agent-native-design/skills/visual-edit/SKILL.md