mcpField
V
visual-edit-precision

visual-edit-precision

github.com/wshobsonDesign & UI41.9k2.9k installsUpdated 2w ago
Repository

About visual-edit-precision

A skill for making focused code changes when a request includes visual context such as selections, annotations, or screenshots. It guides agents to alter only the indicated elements, preserve existing behavior, and verify the rendered result.

Key features

  1. 01Identify indicated elements
  2. 02Limit edits to requested scope
  3. 03Preserve styles and behavior
  4. 04Make minimal CSS or markup changes
  5. 05Verify rendering and side effects

Use cases

  1. 01Adjust a selected interface element
  2. 02Apply screenshot-based design feedback
  3. 03Make multiple independent visual edits
  4. 04Avoid changing unrelated component behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wshobson/agents --skill visual-edit-precision

After installing, type/visual-edit-precisionin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported