AutoGineer
Generated banner for Visual Edit Precision
Generated logo for Visual Edit Precision

Visual Edit Precision

Seth HobsonCommunityCreated by Adit JainDistributed by Seth Hobson

  • Skill
  • Workflow
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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.
— the description by Adit Jain

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Visual Edit Precision provides a structured approach for AI agents to handle frontend change requests that include visual data. By prioritizing minimal, targeted edits over broad refactoring, this skill ensures that visual adjustments are implemented accurately without disrupting existing component logic, accessibility, or global styles.

What it does

  • Identifies specific UI elements based on visual selections or screenshots.
  • Maps visual indicators to the corresponding component files and lines of code.
  • Executes minimal CSS or markup changes to satisfy visual requirements.
  • Preserves existing component behavior, event handlers, and accessibility attributes.
  • Manages multiple independent visual edit requests simultaneously.
  • Prevents unintended side effects by restricting changes to the targeted elements.

When to use it

  • When a user provides a screenshot with annotations to request a UI change.
  • When a user selects specific elements in a visual interface for modification.
  • When you need to adjust component styling without refactoring the underlying logic.
  • When maintaining strict adherence to existing layout and responsive design is required.

Advantages

  • Reduces the risk of breaking existing functionality during UI updates.
  • Ensures high precision by focusing only on the requested visual elements.
  • Maintains code cleanliness by avoiding unnecessary refactoring.
  • Preserves critical accessibility features and event handlers.

Usage examples

“Change the background color of this specific button to blue based on the provided screenshot.”
The agent identifies the button's CSS class in the source code and applies the color change only to that element, leaving other buttons and component logic untouched.
“Adjust the padding on the card I highlighted in the image.”
The agent locates the specific card component, applies the padding adjustment to the targeted element, and verifies that the change does not affect other cards on the page.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/wshobson/visual-edit-precision/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip visual-edit-precision.zip -d .agents/skills

Documentation by Adit Jain

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

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Adit Jain
Publisher
Seth Hobson (Community)
Distributed by
Seth Hobson
Source
wshobson/agents · plugins/skill-forge-essentials/skills/visual-edit-precision · commit 4bde316
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Adit Jain or Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download visual-edit-precision.zip