What problem does it solve?
When users point at a specific element in a screenshot or annotation and ask for a change, AI agents often overreach—refactoring entire components, breaking accessibility attributes, or altering unrelated styles. This Skill enforces disciplined, minimal edits that change exactly what was indicated and nothing else.
Core Features & Use Cases
- Element-Scoped Editing: Identifies the exact component file and line owning the selected element, then modifies only that target.
- Preservation Guarantees: Keeps existing styles, event handlers, responsive behavior, and accessibility attributes (aria-*, role, tabindex) intact during visual changes.
- Conflict Handling: Processes multiple visual edits independently and resolves conflicts by applying the most recent request for the same element.
- Use Case: A user circles one card in a dashboard screenshot and asks to change its background color. The Skill locates that specific card's CSS, adjusts only its color, and leaves all other cards and layout untouched.
Quick Start
Change the color of the button I highlighted in this screenshot without touching anything else in the component.
