Skip to content
appsgit

Visual Edit

Visual Edit is an agent skill (a SKILL.md file) from BuilderIO/skills. Open and collaboratively edit a running local app in Design, with shared fallback previews and source handoff. It works with Claude Code, Codex, Cursor, GitHub Copilot and OpenCode and has 4,528 GitHub stars across a repository of 3 listed skills.

github.com/BuilderIO/skills/skills/visual-edit (opens in a new tab)

  • Official
  • Multi-skill repo
  • Plugin marketplace
  • Needs API key
  • Design & frontend
  • Actively maintained
View on GitHub (opens in a new tab)

Add this skill

Claude

This repository is a Claude Code plugin marketplace. In Claude Code:

/plugin marketplace add BuilderIO/skills
/plugin install builder-skills@builder-skills

In the Claude apps, zip the visual-edit folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

ChatGPT / Codex

Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:

git clone --depth 1 https://github.com/BuilderIO/skills.git
cp -r skills/skills/visual-edit .agents/skills/visual-edit   # repo; ~/.agents/skills for all projects

Standalone skills also load in the ChatGPT desktop app.

Cursor

Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:

git clone --depth 1 https://github.com/BuilderIO/skills.git
cp -r skills/skills/visual-edit .cursor/skills/visual-edit   # project; ~/.cursor/skills for all projects

Source (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), code.claude.com/docs/en/plugin-marketplaces (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)

What this skill does

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. 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.

When it triggers

  • Use when the user asks to inspect, share, or edit a real local app in Design.

More skills in BuilderIO/skills

3 skills are listed from this repository.

Similar skills

More design & frontend skills

All Design & frontend

FAQ

Visual Edit FAQ

Still curious? Email info@appsgit.com.

What is the Visual Edit skill?

Visual Edit is an agent skill (a SKILL.md file) from BuilderIO/skills. Open and collaboratively edit a running local app in Design, with shared fallback previews and source handoff. It works with Claude Code, Codex, Cursor, GitHub Copilot and OpenCode and has 4,528 GitHub stars across a repository of 3 listed skills. Its SKILL.md lives at github.com/BuilderIO/skills/skills/visual-edit.

How do I install the Visual Edit skill?

In Claude Code, run /plugin marketplace add BuilderIO/skills and then /plugin install builder-skills@builder-skills. For Codex or Cursor, copy the visual-edit folder into .agents/skills/ or .cursor/skills/.

Is the Visual Edit skill free?

Yes. The repository is open source under the MIT license. The skill mentions an API key or token for an external service, which may need its own account.

Is Visual Edit maintained?

The repository's most recent commit was on Oct 3, 2026. appsgit only lists skills from repositories with a commit in the last six months.