Skip to content
Get packs

Visual Edit Precision

Makes minimal, targeted UI edits when you point at elements, draw annotations, or share screenshots

Source Download skill
Repository
wshobson/agents
Stars
42,095
Licence
MIT
Files
1 file

What it does

When you give an AI agent a visual hint along with a change request (such as selecting an element on a page, drawing on a screenshot, or attaching an image), this skill tells the agent to change only the thing you pointed at. It asks the agent to find the exact component that owns that element, make the smallest CSS or markup edit, and leave surrounding code, styles, behavior, and accessibility attributes untouched. It also covers handling several visual edits in one go.

Great for

  • Frontend developers who tweak existing components and want no collateral changes
  • Designers or non-coders who select a button or card in a running app and ask for a specific visual fix
  • Teams reviewing UI feedback from screenshots or annotated mockups

Skip it if

  • Building new UI from scratch or large redesigns, since the skill deliberately limits scope to the indicated element (the guidance favors minimal edits over broader refactors)
  • Projects where the agent has no access to the code files that render the element, because the skill assumes it can locate the owning component
  • Changes that need logic or API updates, since the skill tells the agent to avoid touching behavior, which can leave a fix incomplete

Try asking

  • “Make this button a bit wider and change its corner radius (with a selected element in the browser tool)”
  • “Here's a screenshot with circles around three spacing issues in the header; fix only those”
  • “Change the color of this one card to match the brand blue, leave the other cards alone”
  • “Multiple annotated edits: shrink the logo, and align the nav links to the right”
Step-by-step guide: how to use Visual Edit PrecisionInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    visual-edit-precision.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip visual-edit-precision.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip visual-edit-precision.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Select the exact element and state the desired visual result in plain words, so the agent can scope its edit precisely.
  • Review the diff afterward; the skill asks for minimal changes, but check that no unrelated components were modified.
  • If several elements look similar, say which one (for example, the first card only), since the skill warns against changing all matching elements.

What's inside

  • SKILL.md

Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.