Description
visual-edit-precision is an agent skill from the wshobson/agents collection for making UI and frontend changes that are guided by visual context. It applies when a change request comes with element selections, annotations drawn on a screenshot, or screenshots themselves. The skill's principle is precision over ambition: change exactly what was indicated and preserve everything else. Its process has five steps. The agent first identifies which element or elements were indicated and which component file owns them. It then scopes the change to only what was pointed at, without refactoring the surrounding code. It preserves existing styles, classes and behavior, and makes the smallest CSS or markup change that achieves the visual result. Last, it verifies that the change renders correctly without side effects elsewhere on the page. The skill is useful when a designer or reviewer marks up a page and asks for a fix, because the marked area is the instruction and the rest of the interface should not change. It applies to UI and frontend work where a visual annotation accompanies the request. Because the agent cannot always see the rendered result, the change should be checked in a browser or against the screenshot by the person requesting it. The skill is installed with the skills CLI from the wshobson/agents repository. Its skills.sh page showed about 2.6K installs and passing results from three security audits at the time of the scan.…
Highlights
- Targeted edits guided by selections and annotations
- Five-step process: identify, scope, preserve, targeted change, verify
- No refactoring of surrounding code
- Keeps existing styles and behavior
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate visual-edit-precision.
People also visit
visual-edit-precision FAQ
When does this skill apply?
When a UI change request comes with element selections, annotations on a screenshot, or screenshots.
What does precision over ambition mean?
Changing exactly what was indicated and preserving everything else, without broader refactoring.
What are the steps?
Identify the element and its component file, scope the change, preserve existing styles and behavior, make the smallest change, and verify.
Should I still check the result?
Yes. The person who marked up the page should check the rendered result in a browser.
How do I install it?
Run npx skills add https://github.com/wshobson/agents --skill visual-edit-precision.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best visual-edit-precision alternatives?
Popular alternatives to visual-edit-precision include make-interfaces-feel-better, animate and animation-performance. See all visual-edit-precision alternatives