visual-edit-precision
wshobson/agents
Make targeted UI edits guided by visual context and element selections.
What is visual-edit-precision?
Use this skill when making frontend changes based on visual indicators like screenshots, element selections, or annotations. It ensures you make precise, minimal edits to exactly what was indicated while preserving surrounding code and behavior.
- Identify exact elements from visual context (screenshots, selections, annotations)
- Make minimal, targeted CSS or markup changes to selected elements only
- Preserve existing styles, classes, event handlers, and accessibility attributes
- Handle multiple independent visual edits without refactoring surrounding code
- Verify changes render correctly without unintended side effects
How to install visual-edit-precision
npx skills add https://github.com/wshobson/agents --skill visual-edit-precisionHow to use visual-edit-precision
- 1.Receive visual context (screenshot, element selection, or annotation) alongside the change request
- 2.Identify the exact component file and element(s) being indicated
- 3.Determine the minimal CSS or markup change needed to achieve the visual result
- 4.Make only the targeted edit—do not refactor surrounding code or logic
- 5.Verify the change renders correctly and preserves existing behavior and accessibility
Use cases
- User selects a button in a screenshot and requests a color change—edit only that button's style
- Designer annotates a card layout and asks for spacing adjustment—modify only the indicated card's CSS
- Multiple UI elements need tweaks—process each visual edit independently without cross-component changes
- Component appearance needs adjustment while preserving all logic and event handlers
- Responsive design must be maintained when making visual edits to specific breakpoints
- Frontend developers making UI refinements
- Designers collaborating with agents on visual changes
- Teams using visual feedback (screenshots, annotations) to guide edits
- Developers who need precision edits without component refactoring
visual-edit-precision FAQ
No. Visual edits are precision-focused. Change only what was indicated. If broader refactoring is needed, that's a separate request.
Process each element independently. If two edits conflict (same element, different requests), prioritize the most recent request.
Only if the visual change requires it. Preserve all existing behavior, event handlers, and accessibility attributes unless explicitly asked to change them.
Maintain existing responsive behavior. If editing a specific breakpoint, ensure the change doesn't break other screen sizes unless that was the explicit request.
Ask for clarification—request a more specific selection, annotation, or description of which element or component needs to change.
Full instructions (SKILL.md)
Source of truth, from wshobson/agents.
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.
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
Related skills
More from wshobson/agents and the wider catalog.
wcag-audit-patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
web-component-design
Master React, Vue, and Svelte component patterns with composition strategies and CSS-in-JS approaches.
web3-testing
Test smart contracts comprehensively with Hardhat and Foundry—unit tests, integration tests, gas optimization, fuzzing, and mainnet forking.
workflow-orchestration-patterns
Reference guide for designing reliable, deterministic Temporal workflows and idempotent activities.
workflow-patterns
Implement tasks using Conductor's TDD workflow with phase checkpoints, git management, and verification protocols.
remotion-video
|