visual-edit-precision

---
name: visual-edit-precision
description: >-
license: MIT
---

# 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