Best for
- Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests.
Source profileQuality 63/100
wshobson/agents/plugins/skill-forge-essentials/skills/visual-edit-precision/SKILL.md
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.
- Source repository stars
- 38,313
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-07-22
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions.
Not for
- Rewriting an entire component when the user pointed at one button
- Changing global config when only one element's color needs adjusting
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/wshobson/agents --skill "plugins/skill-forge-essentials/skills/visual-edit-precision"Safe inspection promptEditorial
Inspect the Agent Skill "visual-edit-precision" from https://github.com/wshobson/agents/blob/c4b82b0ad771190355eb8e204b1329732a18449a/plugins/skill-forge-essentials/skills/visual-edit-precision/SKILL.md at commit c4b82b0ad771190355eb8e204b1329732a18449a. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
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. - 02
Key Principles
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
Refactor the entire component when only one style was requestedChange the component's API when only its appearance was pointed atTouch logic when only visuals were selected - 03
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
Refactor the entire component when only one style was requestedChange the component's API when only its appearance was pointed atTouch logic when only visuals were selected - 04
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
Each targets its own element independentlyDon't wait for one to finish before processing anotherIf two edits conflict (same element, different requests), handle the most recent
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 63/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 38,313 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- wshobson/agents
- Skill path
- plugins/skill-forge-essentials/skills/visual-edit-precision/SKILL.md
- Commit
- c4b82b0ad771190355eb8e204b1329732a18449a
- License
- MIT
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
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
Alternatives
Compare before choosing
Computed 10042,015
coreyhaines31/marketingskills
ab-testing
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
Computed 1007
event4u-app/agent-config
design-intelligence
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Computed 1007
event4u-app/agent-config
existing-ui-audit
Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.
Computed 9982,073
nexu-io/open-design
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.