visual-edit-precision – skill Thiết kế & UI cho agent AI

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