Visual Edit Precision Agent Skill

>- 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.

546 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

38452

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

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

The instruction itself

7 sections, as written by the author

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:

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

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

How to use it

Copy the folder

Take wshobson/visual-edit-precision from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.