wshobson/agents

visual-edit-precision

Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests.

Ver código-fonte

Como usar

  1. Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
  2. Consulte no original as ferramentas, credenciais e ambientes necessários.
  3. Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/wshobson/agents --skill visual-edit-precision

Antes de começar

  • A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
  • Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

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

Relacionados por tarefa

do mesmo repositório

Mais Skills

Todos os Skills
wshobson
Comunidade

typescript-advanced-types

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

instalações
92,9 mil
GitHub Stars
41,7 mil
Atualizado
26 de out.
wshobson
Comunidade

tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

instalações
70,4 mil
GitHub Stars
41,7 mil
Atualizado
26 de out.
wshobson
Comunidade

react-native-design

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

instalações
2
GitHub Stars
41,7 mil
Atualizado
26 de out.
wshobson
Comunidade

sql-optimization-patterns

Master SQL query optimization, indexing strategies, and EXPLAIN analysis to dramatically improve database performance and eliminate slow queries. Use when debugging slow queries, designing database schemas, or optimizing application performance.

instalações
2
GitHub Stars
41,7 mil
Atualizado
26 de out.