How to use the Visual Edit Precision agent skill

What is an agent skill, and what does this one do?

An agent skill is a folder containing a SKILL.md file that gives an AI agent instructions for a specific kind of task. The agent reads the skill when the request matches the skill's description.

Visual Edit Precision applies when a change request comes with visual context, such as element selections, annotations, or screenshots, or when spatial information like element identity, DOM references, or layout data supplements your text. In that situation the skill asks the agent to find the component file that owns the indicated element, make the smallest CSS or markup change that achieves the result, and leave the rest of the code alone.

• Identify the exact element(s) indicated and the component file that owns them.
• Change only what was pointed at, without refactoring surrounding code.
• Keep existing styles, classes, behavior, event handlers, and accessibility attributes.
• Verify the change renders correctly without side effects.
• When several visual edits arrive, handle each on its own element and resolve conflicts by using the most recent request.

Install the visual-edit-precision skill

Download the skill's ZIP file from this page and unzip it. The skill folder is named visual-edit-precision and contains SKILL.md. You can install it in one of two places, depending on how you work.

For a personal setup available across your projects, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder so it applies only there.

If you use the Claude apps instead of local files, upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/visual-edit-precision/
• Project only: <your-project>/.claude/skills/visual-edit-precision/
• Claude apps: Settings → Capabilities → Skills, then upload the skill

How do you trigger the skill with natural requests?

You don't need a special command. The skill's description tells the agent to use it when you make UI or frontend changes guided by visual context. Give the agent your visual hint and a clear change request in the same message.

Be specific about the visual result you want. The skill focuses on one indicated element, so a request that names the visual change works better than a broad instruction.

• "Make this button's background a darker blue." (with the button selected)
• "Add more space between the title and the subtitle in this card." (with the card selected)
• "Round the corners of the image in this annotated screenshot." (with the screenshot attached)
• "Align this label with the input next to it." (with the element selected)

Examples of a precise edit

Suppose you select one button in a running app and ask for a lighter text colour. A precise edit finds the component that renders that button, changes the text colour in the smallest possible CSS rule, and leaves the other buttons, the component's props, and its click handler unchanged.

If you select one card in a list and ask for a different padding, the skill is meant to change that card only, not every card in the list. Ignoring this scope is one of the common mistakes the skill is written to prevent.

What the skill needs and what it does not do

The skill lists no requirements. It runs no scripts and uses no network access, so it works by giving the agent instructions only. It still assumes the agent can reach the code files that render the element, because it relies on locating the owning component.

The skill is built for small, targeted changes. It is not meant for building new UI from scratch or for large redesigns. Changes that need logic or API updates are a poor fit, because the skill tells the agent to avoid touching behavior, which can leave a fix incomplete.

• Requirements: none listed
• Runs scripts: no
• Uses network: no
• Access needed in practice: the code files that render the element

Safety notes and tips

Because the skill runs no scripts and uses no network, its main risk is the edits the agent makes to your code. Review the changes in your version control before committing, especially when the agent touches styles shared across components.

Get better results by pointing at one element at a time, naming the visual change in plain words, and checking that responsive layouts still behave after the edit.

• Review diffs before committing, especially for shared styles.
• Select one element per request when you want strict scope.
• If a fix needs a behaviour or data change, ask for it separately and expect a follow-up.
• Check that accessibility attributes such as aria-*, role, and tabindex are still present.