RepoAI
Browse MCPs

Visual Edit

85TrustedInstructions only

Connect a running local server to an infinite canvas for direct site inspection.

What it does

Integrating this skill shifts the assistant from generating static HTML mockups to interacting directly with your live development environment. It interprets local URLs as dynamic, iframe-backed screens, allowing for real-time visual exploration, route-state testing, and layout adjustment directly on a canvas interface.

By leveraging the bridge between your active localhost and the design canvas, the assistant can perform modifications on the rendered output of your code. This facilitates a loop where the visual representation remains synchronized with the actual state of the application being developed.

When it earns its place

Reach for it when…

Use this when your development workflow requires verifying how specific route changes manifest in a browser without manual refreshing or when you need to perform layout adjustments on a live instance of your project.

Look elsewhere when…

Avoid this for static content generation or when you only require a quick code review without live rendering. It is not suitable for environments where you cannot maintain a stable localhost connection or when you need to persist changes to a cloud-based design account.

What to say to use it

You never invoke a skill directly — the assistant picks it up when your request matches what it covers. These are the kinds of things that do that.

  • open my local server in design mode
  • let me see the current app layout on the canvas
  • show these routes in visual editor
  • inspect the live version of this project visually

Install it

Install for all your projects

Copy the skill directory into your personal skills folder. Claude picks it up on its own the next time your request matches what it does — there is nothing to enable.

bash
git clone --depth 1 --branch main https://github.com/BuilderIO/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -r /tmp/skills/skills/visual-edit ~/.claude/skills/visual-edit

Install for one project only

Put it in the project's own skills folder instead, so it can be committed and shared with everyone working on that repository.

bash
cp -r /tmp/skills/skills/visual-edit .claude/skills/visual-edit

If a skill of the same name exists in both places, the personal one wins.

Installing on Claude.ai or through the API instead? The full guide covers every surface.

Pair it with an MCP server

Visual Edit changes how the work is done. These servers change what Claude can reach while doing it.

How skills and MCP servers differ →