What happens when multiple visual edits arrive at once?

Each edit targets its own element independently, and the agent does not wait for one to finish before processing another. If two edits conflict on the same element with different requests, the most recent one is handled.

Does it change the component's API when only its appearance was pointed at?

No. The skill says not to change the component's API when only its appearance was pointed at, and not to touch logic when only visuals were selected.

Visual Edit Precision

SkillAI & models

This is a skill that guides an AI agent through frontend edits when you give it visual context, such as a screenshot, a selected element, or an annotation. It tells the agent to find the exact element you pointed at, change only that, and leave existing styles, behavior, and accessibility attributes alone. It also covers handling several independent edits at once and avoiding over-refactoring.

Connect your AI Use it in a pipeline

Then ask your AI: use the Visual Edit Precision skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Have an AI agent that can read and edit your project's frontend files.

What your AI can do with it

Identify the exact element and the component file that owns it
Make the minimal CSS or markup change that achieves the visual result
Preserve existing styles, classes, event handlers, and behavior
Keep accessibility attributes such as aria-*, role, and tabindex intact
Process multiple independent visual edits without waiting for one to finish
Resolve conflicting edits on the same element by handling the most recent

Getting started

Have an AI agent that can read and edit your project's frontend files.
Add the skill to the agent's available skills or instructions.
Provide visual context with your request, such as a screenshot, a selected element, or an annotation.
State the change you want for the indicated element.
Review the edit to confirm it renders correctly and has no side effects.

What this skill tells your AI

The instructions your AI receives, as published by wshobson/agents in plugins/skill-forge-essentials/skills/visual-edit-precision/SKILL.md and read by Ahel’s review.

Overview

When visual context accompanies a change request (element selections, annotations, screenshots), make targeted, minimal edits. Precision over ambition: change exactly what was indicated, preserve everything else.

Process

When visual context is provided:

IDENTIFY - What exact element(s) were indicated? Which component file owns them?
SCOPE - Change ONLY what was pointed at. Don't refactor surrounding code.
PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
TARGETED - Make the minimal CSS/markup change that achieves the visual result.
VERIFY - Confirm the change renders correctly without side effects.

Key Principles

Precision Over Ambition

Visual context gives a SPECIFIC element. Don't:

Refactor the entire component when only one style was requested
Change the component's API when only its appearance was pointed at
Touch logic when only visuals were selected

Do:

Find the exact file and line for the selected element
Make the minimal edit that achieves the described visual change
Preserve all existing behavior, event handlers, accessibility

Multiple Edits

When multiple visual edits arrive:

Each targets its own element independently
Don't wait for one to finish before processing another
If two edits conflict (same element, different requests), handle the most recent

Common Mistakes

Rewriting an entire component when the user pointed at one button
Changing global config when only one element's color needs adjusting
Breaking responsive behavior by adding fixed widths to match a selection
Ignoring specificity (user indicated ONE card, agent changed ALL cards)
Removing accessibility attributes (aria-*, role, tabindex) during visual edits

Signals

GitHub stars: 40k
Forks: 4k
Last commit: Oct 2026

Questions

What happens when multiple visual edits arrive at once?: Each edit targets its own element independently, and the agent does not wait for one to finish before processing another. If two edits conflict on the same element with different requests, the most recent one is handled.
Does it change the component's API when only its appearance was pointed at?: No. The skill says not to change the component's API when only its appearance was pointed at, and not to touch logic when only visuals were selected.

Advanced

Item type: skill
Key: visual-edit-precision
Source: github.com/wshobson/agents

github.com/wshobson/agents