visual-edit-precision
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.
Profile →npx skills add wshobson/agents --skill visual-edit-precision --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 Wh
- Overview
- Process
- Key Principles
- Precision Over Ambition
- Multiple Edits
- Common Mistakes
What does the visual-edit-precision skill do?
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.
How do I install it?
Run `npx skills add wshobson/agents --skill visual-edit-precision --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From wshobson/agents, a repository with 38,479 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.