Visual Edit Precision
Unverified●29/40Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add visual-edit-precisionWho is stuck, and on what
>- 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 whole source
Frontmatter — 2 properties
| name | visual-edit-precision |
|---|---|
| description | >- 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. |
| 1 | --- |
| 2 | name: visual-edit-precision |
| 3 | description: >- |
| 4 | Use when making UI/frontend changes guided by visual context, when the user |
| 5 | selects elements visually, draws annotations, or provides screenshots alongside |
| 6 | change requests. Also use when editing components where spatial context |
| 7 | (element identity, DOM references, layout data) supplements text instructions. |
| 8 | ---A5 — No allowed-tools declared — no way to tell what this skill may touch |
| 9 | |
| 10 | # Visual Edit Precision |
| 11 | |
| 12 | ## Overview |
| 13 | |
| 14 | 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. |
| 15 | |
| 16 | ## Process |
| 17 | |
| 18 | When visual context is provided: |
| 19 | |
| 20 | 1. **IDENTIFY** - What exact element(s) were indicated? Which component file owns them? |
| 21 | 2. **SCOPE** - Change ONLY what was pointed at. Don't refactor surrounding code. |
| 22 | 3. **PRESERVE** - Keep existing styles, classes, and behavior. Only modify what was asked. |
| 23 | 4. **TARGETED** - Make the minimal CSS/markup change that achieves the visual result. |
| 24 | 5. **VERIFY** - Confirm the change renders correctly without side effects. |
| 25 | |
| 26 | ## Key Principles |
| 27 | |
| 28 | ### Precision Over Ambition |
| 29 | |
| 30 | Visual context gives a SPECIFIC element. Don't: |
| 31 | - Refactor the entire component when only one style was requested |
| 32 | - Change the component's API when only its appearance was pointed at |
| 33 | - Touch logic when only visuals were selected |
| 34 | |
| 35 | Do: |
| 36 | - Find the exact file and line for the selected element |
| 37 | - Make the minimal edit that achieves the described visual change |
| 38 | - Preserve all existing behavior, event handlers, accessibility |
| 39 | |
| 40 | ### Multiple Edits |
| 41 | |
| 42 | When multiple visual edits arrive: |
| 43 | - Each targets its own element independently |
| 44 | - Don't wait for one to finish before processing another |
| 45 | - If two edits conflict (same element, different requests), handle the most recent |
| 46 | |
| 47 | ## Common Mistakes |
| 48 | |
| 49 | - Rewriting an entire component when the user pointed at one button |
| 50 | - Changing global config when only one element's color needs adjusting |
| 51 | - Breaking responsive behavior by adding fixed widths to match a selection |
| 52 | - Ignoring specificity (user indicated ONE card, agent changed ALL cards) |
| 53 | - Removing accessibility attributes (aria-*, role, tabindex) during visual edits |
| 54 |
Reviews
Installed this one?Write the first review and take the Trailblazer badge.
Alternatives
Task Coordination StrategiesDecompose complex tasks, design dependency graphs, and coordinate multi-agent work with proper task descriptions and workload balancing. Use this skill when breaking down work for agent teams, managing task dependencies, or monitoring team progress.◐◐◐◐◐●35/40Ebay Seller Tools·····●34/40Tough Decision Advisor: Every Angle ConsideredHand in a decision you're stuck on. Get back a clear breakdown of every angle — the trade-offs, the risks, the blind spot, and a recommended path.●····●32/40DHDNA Profiler — Cognitive Pattern ExtractionPaste any email, proposal, or note someone wrote, and get back a plain-language read on how they think, what drives their decisions, and how they communicate.●····●32/40