# Visual Edit Precision

> Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions.

Source: https://skillsagentes.com/skills/wshobson/agents/visual-edit-precision
Repository: https://github.com/wshobson/agents
Author: wshobson
License: MIT
Updated: el mes pasado
Context cost: 77 tok installed, 547 tok once triggered, 547 tok with every bundled file
Bundle: 1 file, 2 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add wshobson/agents --skill visual-edit-precision --agent claude-code
```

## What it does

- Restringe las ediciones de UI a exactamente el elemento indicado visualmente, sin refactorizar código circundante
- Identifica el archivo y línea exactos del elemento señalado antes de editar
- Preserva estilos, clases, comportamiento y atributos de accesibilidad existentes
- Procesa múltiples ediciones visuales de forma independiente, resolviendo conflictos por la más reciente

## Use it when

- Al hacer cambios de UI/frontend guiados por contexto visual
- Cuando el usuario selecciona elementos visualmente, dibuja anotaciones o adjunta capturas de pantalla
- Al editar componentes donde el contexto espacial (identidad del elemento, referencias DOM, datos de layout) complementa las instrucciones de texto

## What triggers it

- "Cambia el color de este botón que seleccioné en la captura"
- "Aquí anoté en la imagen qué tarjeta quiero modificar"
- "Ajusta solo este elemento del DOM que te señalé, no toques el resto"

## Files

- SKILL.md — 2 KB

## SKILL.md

Reproduced verbatim from wshobson/agents under MIT. This section is the upstream document and is in English.

# Visual Edit Precision

## 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:

1. **IDENTIFY** - What exact element(s) were indicated? Which component file owns them?
2. **SCOPE** - Change ONLY what was pointed at. Don't refactor surrounding code.
3. **PRESERVE** - Keep existing styles, classes, and behavior. Only modify what was asked.
4. **TARGETED** - Make the minimal CSS/markup change that achieves the visual result.
5. **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

---

Skills Agentes — https://skillsagentes.com/skills/wshobson/agents/visual-edit-precision