# Visual Edit Precision > Úsalo al hacer cambios de UI/frontend guiados por contexto visual: selecciones de elementos, anotaciones o capturas de pantalla junto con la solicitud de cambio. Fuente: https://skillsagentes.com/skills/wshobson/agents/visual-edit-precision Markdown: https://skillsagentes.com/skills/wshobson/agents/visual-edit-precision.md Repositorio: https://github.com/wshobson/agents Autor: wshobson Licencia: MIT Actualizado: hace 2 meses Coste de contexto: 77 tok instalada, 547 tok al activarse, 547 tok con todos los archivos del bundle Bundle: 1 archivo, 2 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add wshobson/agents --skill visual-edit-precision --agent claude-code # Cursor npx -y skills add wshobson/agents --skill visual-edit-precision --agent cursor # Codex npx -y skills add wshobson/agents --skill visual-edit-precision --agent codex # Gemini CLI npx -y skills add wshobson/agents --skill visual-edit-precision --agent gemini # Windsurf npx -y skills add wshobson/agents --skill visual-edit-precision --agent windsurf # Cline npx -y skills add wshobson/agents --skill visual-edit-precision --agent cline ``` ## Qué hace - Restringe las ediciones de UI a exactamente el elemento indicado visualmente, sin refactorizar código circundante - Identifica el archivo y línea exactos del elemento señalado antes de editar - Preserva estilos, clases, comportamiento y atributos de accesibilidad existentes - Procesa múltiples ediciones visuales de forma independiente, resolviendo conflictos por la más reciente ## Cuándo usarla - Al hacer cambios de UI/frontend guiados por contexto visual - Cuando el usuario selecciona elementos visualmente, dibuja anotaciones o adjunta capturas de pantalla - Al editar componentes donde el contexto espacial (identidad del elemento, referencias DOM, datos de layout) complementa las instrucciones de texto ## Qué la activa - "Cambia el color de este botón que seleccioné en la captura" - "Aquí anoté en la imagen qué tarjeta quiero modificar" - "Ajusta solo este elemento del DOM que te señalé, no toques el resto" ## Archivos - SKILL.md — 2 KB ## SKILL.md Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés. # 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: 1. **IDENTIFY** - What exact element(s) were indicated? Which component file owns them? 2. **SCOPE** - Change ONLY what was pointed at. Don't refactor surrounding code. 3. **PRESERVE** - Keep existing styles, classes, and behavior. Only modify what was asked. 4. **TARGETED** - Make the minimal CSS/markup change that achieves the visual result. 5. **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 ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Hermes Tweet](https://skillsagentes.com/skills/wshobson/agents/hermes-tweet.md): Instala y opera Hermes Tweet, un plugin de Hermes Agent para investigar X/Twitter, leer timelines, analizar tweets y ejecutar operaciones privadas o de cambio de estado con aprobación previa. - [Superself](https://skillsagentes.com/skills/wshobson/agents/superself.md): Úsalo cuando un proyecto guarda su estado en Superself: lee `self context` al iniciar sesión, vincula el trabajo a una work unit, reporta con evidencia y registra decisiones confirmadas. - [Grounded Vault](https://skillsagentes.com/skills/wshobson/agents/grounded-vault.md): Úsalo para mantener un almacén Markdown de conocimiento donde cada afirmación compilada se rastrea hasta una fuente inmutable y el drift se detecta con git diff sin gastar tokens. - [Postgresql Table Design](https://skillsagentes.com/skills/wshobson/agents/postgresql-table-design.md): Úsalo al diseñar o revisar un esquema específico de PostgreSQL: buenas prácticas, tipos de datos, indexación, restricciones, patrones de rendimiento y funciones avanzadas. - [Prompt Engineering Patterns](https://skillsagentes.com/skills/wshobson/agents/prompt-engineering-patterns.md): Úsalo cuando pidan optimizar un prompt, mejorar su rendimiento, diseñar una plantilla, aplicar chain-of-thought, few-shot prompting o técnicas avanzadas de prompt engineering para producción. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)