Precisão na Edição Visual

Visão Geral

Quando o contexto visual acompanha um pedido de alteração (seleções de elementos, anotações, capturas de tela), faça edições direcionadas e mínimas. Precisão acima de ambição: mude exatamente o que foi indicado, preserve todo o resto.

Processo

Quando o contexto visual for fornecido:

1. IDENTIFICAR - Quais elementos exatos foram indicados? Qual arquivo de componente os possui?
2. ESCOPO - Mude APENAS o que foi apontado. Não refatore o código ao redor.
3. PRESERVAR - Mantenha os estilos, classes e comportamentos existentes. Modifique apenas o que foi solicitado.
4. DIRECIONADO - Faça a alteração mínima de CSS/markup que atinja o resultado visual.
5. VERIFICAR - Confirme se a alteração é renderizada corretamente sem efeitos colaterais.

Princípios Chave

Precisão Acima de Ambição

O contexto visual fornece um elemento ESPECÍFICO. Não:

• Refatore o componente inteiro quando apenas um estilo foi solicitado
• Altere a API do componente quando apenas sua aparência foi apontada
• Toque na lógica quando apenas visuais foram selecionados

Faça:

• Encontre o arquivo e a linha exatos para o elemento selecionado
• Faça a edição mínima que atinja a mudança visual descrita
• Preserve todo o comportamento existente, manipuladores de eventos, acessibilidade

Múltiplas Edições

Quando múltiplas edições visuais chegarem:

• Cada uma tem como alvo seu próprio elemento independentemente
• Não espere uma terminar antes de processar outra
• Se duas edições conflitarem (mesmo elemento, pedidos diferentes), trate a mais recente

Erros Comuns

• Reescrever um componente inteiro quando o usuário apontou para um botão
• Alterar a configuração global quando apenas a cor de um elemento precisa ser ajustada
• Quebrar o comportamento responsivo adicionando larguras fixas para corresponder a uma seleção
• Ignorar a especificidade (usuário indicou UM card, agente mudou TODOS os cards)
• Remover atributos de acessibilidade (aria-*, role, tabindex) durante edições visuais