Skills Agentes

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.

Estrellas
39.8k

en todo el repo

Actividad
51

0–100, la ruta de este skill

Actualizado
hace 2 meses

último commit aquí

Commits
1

últimos 90 días

Contexto
547 tok

77 tok en reposo

Paquete
1 archivo

2 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add wshobson/agents --skill visual-edit-precision --agent claude-code

Se instala solo en este repositorio.

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

Úsalo cuando

  • 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

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • “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”

    SKILL.md

    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

    Reproducido de wshobson/agents bajo licencia MIT. Leer esta página en markdown.

    Archivos

    1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Detalles

    Creador
    wshobson
    Categoría
    Diseño y UI
    Licencia
    MIT
    Recursos incluidos
    Solo SKILL.md
    Repositorio
    wshobson/agents
    Código fuente
    Ver SKILL.md

    Etiquetas

    Más de wshobson/agents

    Este repo incluye 183 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack agents entero y su comando de instalación

    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.

    Costo de contexto al activarse
    1.4k tok
    Tamaño del paquete
    3 archivos
    Última actualización
    el mes pasado
    redes sociales

    Ú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.

    Costo de contexto al activarse
    1.3k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 25 días
    productividad

    Ú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.

    Costo de contexto al activarse
    1.4k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 25 días
    documentos

    Ú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.

    Costo de contexto al activarse
    2k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 25 días
    bases de datos

    Ú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.

    Costo de contexto al activarse
    1.3k tok
    Tamaño del paquete
    10 archivos
    Última actualización
    el mes pasado
    herramientas desarrollo

    Audita y reescribe prosa para que deje de sonar generada por máquina. Incluye modo solo-detección, modo reescritura y modo edición en el lugar, con perfiles opcionales de voz y contexto.”

    Costo de contexto al activarse
    1.9k tok
    Tamaño del paquete
    4 archivos
    Última actualización
    el mes pasado
    redaccion contenido