visual-edit-precision

Par wshobson · agents

À utiliser pour les modifications UI/frontend guidées par un contexte visuel, lorsque l'utilisateur sélectionne des éléments visuellement, trace des annotations, ou fournit des captures d'écran accompagnant des demandes de modification. À utiliser également lors de l'édition de composants où le contexte spatial (identité des éléments, références DOM, données de mise en page) complète les instructions textuelles.

npx skills add https://github.com/wshobson/agents --skill visual-edit-precision

Précision des modifications visuelles

Vue d'ensemble

Quand un contexte visuel accompagne une demande de modification (sélections d'éléments, annotations, captures d'écran), effectuez des modifications ciblées et minimales. La précision avant l'ambition : changez exactement ce qui a été indiqué, préservez tout le reste.

Processus

Quand un contexte visuel est fourni :

  1. IDENTIFIER - Quel(s) élément(s) exact(s) ont été indiqué(s) ? Quel fichier de composant en est propriétaire ?
  2. DÉLIMITER - Changez UNIQUEMENT ce qui a été pointé. Ne refactorisez pas le code environnant.
  3. PRÉSERVER - Conservez les styles, classes et comportements existants. Modifiez uniquement ce qui a été demandé.
  4. CIBLÉ - Effectuez la modification CSS/markup minimale qui produit le résultat visuel souhaité.
  5. VÉRIFIER - Confirmez que la modification s'affiche correctement sans effets secondaires.

Principes clés

Précision avant ambition

Un contexte visuel désigne un élément SPÉCIFIQUE. N'évitez pas :

  • Refactoriser le composant entier quand seul un style a été demandé
  • Changer l'API du composant quand seule son apparence a été pointée
  • Toucher à la logique quand seuls les visuels ont été sélectionnés

Faites :

  • Trouvez le fichier et la ligne exacts pour l'élément sélectionné
  • Effectuez la modification minimale qui produit le changement visuel décrit
  • Préservez tous les comportements existants, gestionnaires d'événements, accessibilité

Modifications multiples

Quand plusieurs modifications visuelles arrivent :

  • Chacune cible son propre élément indépendamment
  • N'attendez pas qu'une se termine avant de traiter une autre
  • Si deux modifications entrent en conflit (même élément, demandes différentes), traitez la plus récente

Erreurs courantes

  • Réécrire un composant entier quand l'utilisateur a pointé un seul bouton
  • Changer la config globale quand seule la couleur d'un élément a besoin d'ajustement
  • Casser le comportement responsive en ajoutant des largeurs fixes pour correspondre à une sélection
  • Ignorer la spécificité (l'utilisateur a indiqué UNE carte, l'agent en a changé TOUTES)
  • Supprimer les attributs d'accessibilité (aria-*, role, tabindex) lors des modifications visuelles

Skills similaires