visual-edit-precision
依視覺脈絡改 UI 時，只動被指到的元素、其他全部保留
中文翻譯
--- name: visual-edit-precision description: >- 當 UI/前端變更是依據視覺脈絡來進行時使用，例如使用者用視覺方式選取元素、畫標註， 或在變更需求旁附上截圖。編輯元件時，若空間脈絡（元素身分、DOM 參照、版面資料） 補充了文字指示，也適用。 --- # Visual Edit Precision ## Overview 當變更需求附帶視覺脈絡（元素選取、標註、截圖）時，要做有針對性的最小幅度修改。精準比企圖心重要：只改被指到的東西，其他都保留。 ## Process 提供視覺脈絡時： 1. **IDENTIFY** - 被指到的確切元素是哪些？哪個元件檔案擁有它們？ 2. **SCOPE** - 只改被指到的東西。不要重構周圍的程式碼。 3. **PRESERVE** - 保留既有的樣式、class 和行為。只修改被要求的部分。 4. **TARGETED** - 做能達成視覺結果的最小 CSS/markup 變更。 5. **VERIFY** - 確認變更能正確渲染，而且沒有副作用。 ## Key Principles ### Precision Over Ambition 視覺脈絡給你的是一個特定的元素。不要： - 只被要求改一個樣式，卻重構整個元件 - 只被指到外觀，卻去改元件的 API - 只選了視覺部分，卻去動邏輯 要： - 找出被選取元素確切的檔案和行號 - 做能達成所述視覺變更的最小修改 - 保留所有既有的行為、事件處理函式和無障礙設定 ### Multiple Edits 收到多個視覺編輯時： - 每一個各自針對自己的元素，彼此獨立 - 不用等某一個做完才處理另一個 - 如果兩個編輯衝突（同一個元素、不同的要求），處理最新的那個 ## Common Mistakes - 使用者只指了一個按鈕，卻重寫整個元件 - 只需要調整一個元素的顏色，卻去改全域設定 - 為了配合選取範圍而加上固定寬度，破壞了響應式行為 - 忽略特定性（使用者指的是一張卡片，agent 卻改了所有卡片） - 在視覺編輯過程中移除無障礙屬性（aria-*、role、tabindex）
英文原文
--- name: visual-edit-precision description: >- Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions. --- # 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