Oil Frontend
先識別用戶任務、業務對象和數據來源，再刪除無效內容，建立正確的信息、狀態、代碼歸屬和共享實現。
始終遵守
- 從真實用戶任務、業務對象和完成結果出發；可見內容只保留能夠幫助識別、比較、判斷、操作或理解結果的信息。
- 一個用戶意圖只執行一次，動作必須產生真實結果；數據、操作、忙碌和提交邊界保持一致，失敗時保留當前對象、位置和已輸入內容。
- 常見任務沿用用戶已有認知；資源瀏覽默認展示，編輯必須明確觸發，表單只收集當前任務必需且歸當前對象所有的數據。
- 圖標、強調方式和固定尺寸都必須表達穩定含義；不使用通用 AI 裝飾、無意義強調邊或只適配當前實例的尺寸製造層級。
- 視覺調整先沿用項目已有的設計變量、組件和密度，再處理層級、間距、排版、表面與反饋；沒有項目標準時才使用參考規則中的兜底值，不把兜底值擴張成新的設計系統。
- 同一業務數據和同一含義只保留一個權威來源；優先修復數據流、父佈局和共享實現，不在頁面使用位置反覆打補丁。
- 按業務歸屬組織組件、Hook、函數、類型、樣式和測試；單模塊代碼就近放置，只有穩定跨模塊復用時才進入共享層。
- 遇到複雜邏輯，先檢查項目已有能力和成熟庫；已有依賴不合適時，可以引入維護良好、與項目兼容的新庫，不手寫已有成熟方案覆蓋的核心能力。簡單邏輯直接實現，不為少量代碼引入新依賴。
- 項目歷史不是正確性的證明；錯誤模式應被替換，相關使用位置完成遷移後刪除舊代碼、fallback、legacy 邏輯和失效狀態。
參考文件讀取順序
- 觸發後先只閱讀本文件，明確任務、對象和改動範圍，不預先讀取參考文件。
- 如果任務不涉及用戶可見界面、前端狀態與數據流、組件實現或前端代碼組織，停止使用本 Skill。
- 先按用戶要改變的結果選擇一個主要規則，不按文件類型或代碼中出現的 CSS、動畫關鍵詞選規則。
- 簡單局部改動只讀取一個主要規則；任務確實同時包含第二個獨立問題時才補充一個。只有跨頁面綜合評審可以讀取三個，不得更多。
- 不因關鍵詞出現、文件內鏈接或"保險起見"繼續讀取規則。視覺症狀由數據、狀態或父佈局造成時，讀取真正負責根因的規則，不額外加載視覺規則。
| 當前任務 | 主要規則 | 僅在這些情況補充 |
|---|---|---|
| "看起來不對"、視覺精修、層級、間距、排版、顏色、圓角、邊框、陰影或圖標 | 視覺工程 | 需要修改共享 Token、組件默認樣式或變體時讀 組件與代碼組織；改變分欄、滾動或響應式結構時改讀 視口與彈窗 為主要規則 |
| 動畫、過渡、微交互、展開收起、拖拽反饋、滾動動效或卡頓 | 動效與性能 | 動效承擔動作反饋或視覺層級時讀 視覺工程；根因是異步狀態時改讀 狀態與加載 為主要規則 |
| 模塊邊界、組件、Hook、函數、類型、樣式歸屬、共享樣式、CSS 組織或共享實現 | 組件與代碼組織 | 需要新增檢查時讀 自動化 |
| 新增或改變文案、動作含義、圖標、點擊反饋或視覺強調 | 信息與動作 | 涉及對象身份、圖片或選擇器時讀 資源識別 |
數據、狀態和佈局繼續按結果選擇：
| 當前任務 | 主要規則 | 僅在這些情況補充 |
|---|---|---|
| 列表、卡片、詳情、表格或批量操作 | 集合與詳情 | 涉及資源身份時讀 資源識別；涉及編輯時讀 交互與編輯 |
| 表單、選擇、編輯或多步工作流 | 交互與編輯 | 涉及保存範圍和流程連續性時讀 數據與操作範圍 |
| 查詢結果、分頁、候選集合、保存範圍、批量範圍或請求結果歸屬 | 數據與操作範圍 | 同時改變 loading、refreshing、empty、error 或 processing 呈現時讀 狀態與加載 |
| loading、refreshing、empty、filtered-empty、error、queued、processing 或骨架 | 狀態與加載 | 同時涉及查詢快照、操作範圍或保存結果歸屬時讀 數據與操作範圍 |
| 改變頁面尺寸、分欄、滾動、彈窗結構或響應式行為 | 視口與彈窗 | 涉及下拉、菜單、提示等依附觸發器的浮層時讀 彈層 |
以下情況不觸發額外讀取：
- 代碼中存在 Tailwind、CSS、
transition或動畫庫，不代表任務是視覺或動效任務。 - 改變顏色、間距、邊框、陰影、排版等可見屬性時，以視覺工程為主要規則；只有任務同時要求調整樣式歸屬、共享方式或模塊邊界時才補充組件與代碼組織規則。
- 只修復顏色變量名、類名、類型或導入錯誤，且不改變視覺結果時，不讀取視覺工程規則。
- 只為既有動效改業務狀態、事件綁定或數據來源，且不改變運動方式和性能時，不讀取動效規則。
- 只移動現有控件，且不改變文案、動作含義或反饋時，不讀取信息與動作規則。
- 只調整普通父子容器歸屬，且不改變尺寸、滾動、彈窗或響應式行為時，不讀取視口與彈窗規則。
- 參考文件中的鏈接只說明相關規則的位置，不表示必須繼續讀取。
術語速查
本文件和參考規則中的核心詞彙，按這裡的定義理解：
- 資源身份：讓用戶認出"這是哪個對象"的最小信息組合——圖片 + 名稱 + 一個區分字段。例：成員列表顯示"頭像 + 姓名 + 部門"，而不是"uuid + 類型標籤"。
- 偽操作：看似可用、實際不產生真實結果的控件。例：點"保存"只改了本地 state、刷新即丟失；刪除按鈕永久 disabled 佔位。
- 單個組件的視覺補丁：在頁面使用共享組件的位置，只給這一個組件補樣式。例：
<Dialog className="h-[640px]">、!important覆蓋、頁面專屬選擇器改組件內部。正確做法是修共享組件本身，或新增按用途命名的組件變體。 - 按用途命名的組件變體（variant）：用"為什麼不同"命名。例：
variant="destructive"、size="compact"合格；variant="blue"、variant="userListPage"不合格。 - 主導動作：當前頁面、彈窗或操作區域中完成主要任務的那一個操作。同一區域最多一個高強調按鈕。
- 提交邊界：一次修改何時真正生效——即時生效、自動保存、顯式統一提交，或僅臨時預覽。
- 忙碌範圍：請求進行中需要防止重複操作的最小區域。單項請求只鎖定該項，不用全頁遮罩。
- 已提交查詢快照：由同一次響應共同確定的查詢條件、列表、結果總數和分頁信息。新查詢完成前，舊快照仍屬於舊條件。
- 同類批量任務：對一批同類對象重複填寫相同字段的任務，如批量排期、批量改價。
- 可編輯工作表：為同類批量任務讓多行持續處於編輯態的表格。與之相對的是資源列表：默認展示，編輯必須明確觸發。
決策順序
改動前依次回答。
任務與對象：
- 用戶當前要完成什麼任務，什麼結果表示完成？
- 頁面管理哪個核心對象，字段分別歸誰所有？
- 當前是瀏覽、比較、選擇還是編輯，是否沿用用戶熟悉的結構和術語？
數據與範圍：
- 數據來自完整集合、當前可見集合還是搜索結果？
- 操作、忙碌狀態和提交邊界分別影響什麼範圍；遠程查詢條件與當前列表是否已經屬於同一次已提交結果？
- 用戶靠哪些信息區分相鄰對象？
- 能否刪除文字、步驟、確認、重複輸入或系統已經知道的字段？
- 哪些信息屬於集合，哪些只屬於詳情？
結構與狀態：
- 當前頁面、彈窗或操作區域的主導動作是什麼？
- 首屏、滾動容器和彈層邊界分別由誰負責？
- loading、empty、filtered-empty、queued、processing、error、ready 如何互斥？
視覺與動效，僅在任務要求改變時回答：
- 當前項目用哪些 Token、組件和相鄰頁面定義層級、密度與動效語言？真正不一致的是哪個可見屬性？
- 動效是在反饋狀態、解釋空間關係還是裝飾；能否只使用
transform、opacity或已有組件能力完成？
落點：
- 是否已有正確歸屬的模塊、組件、Hook、函數、類型、統一設計變量或樣式，最終應修改哪個數據源、父佈局或共享實現？
無法明確回答時，先停止添加界面元素：向用戶提出最關鍵的 1–2 個問題；無法提問時按最小可驗證範圍實施，並在輸出中聲明所做的假設。
執行流程
1. 還原事實
- 搜索項目已有的模塊、組件、Hook、函數、類型、統一設計變量和樣式，確認相同含義是否已經存在正確實現。
- 找出所有使用共享組件的頁面和組件，以及相同數據的其他入口。
- 評審請求只給證據與建議；用戶要求修改時才實施。
2. 明確範圍
- 明確核心對象、字段所有者、數據集合、操作範圍、忙碌範圍和提交邊界。
- 區分頁面結構問題、組件默認行為、頁面使用方式錯誤和數據流錯誤。
- 視覺問題只記錄能夠指出具體元素、屬性、現有依據和代碼落點的差異；不能確定正確值時先使用項目既有 Token 或相鄰同類組件，不憑審美發明精確數值。
3. 先刪除
- 刪除不影響判斷的內容、重複狀態、重複入口、重複確認和只針對單個組件的視覺補丁。
- 刪除沒有真實狀態變化或不能真正保存數據的偽操作。
- 刪除已經被新實現替代的舊組件、舊函數、舊類型、舊狀態、fallback、legacy 邏輯、舊樣式和失效引用。
4. 選擇結構
- 先檢查項目中同類任務頁面和共享容器組件的既定用法；只有既有模式符合本規範時才沿用，否則按真實任務重新選擇結構。
- 根據瀏覽、比較、選擇、批量配置或深度編輯任務，選擇列表、表格、工作表、選擇器、彈窗或完整工作區。
- 讓列表負責識別和比較，讓詳情負責完整內容，讓編輯器負責修改。
- 視覺調整按"信息層級 → 空間與對齊 → 排版 → 表面 → 控件狀態 → 動效"的順序處理；前一層已經解決問題時停止，不繼續疊加裝飾。
5. 修復真正出錯的位置
- 優先修復數據範圍、操作範圍、父佈局、共享組件默認行為和含義穩定的組件變體。
- 重複出現的資源身份、菜單、彈層、加載、彈窗和操作欄使用共享組件。
- 只有職責、輸入輸出和行為穩定重複時才抽象；不要因為局部結構相似就複製組件，也不要用大量頁面開關製造萬能組件。
- 既有共享組件、函數、樣式或數據流本身錯誤時，在授權範圍內直接修復或替換真正出錯的共享實現，並處理所有受影響的使用位置；不要為了兼容歷史繼續新增錯誤實現。
- 無法在當前範圍內全部改完時，停止擴大舊模式，明確報告還剩哪些舊使用位置以及這次改到哪裡，不得聲稱已經統一。
- 修復可重複檢測的問題時，判斷項目是否確實需要新增 lint、測試或檢查規則；需要時按路由表補充讀取 自動化，並計入補充規則數量。小改動不為此前置搭建自動化。
- 不修改無關區域。
6. 驗證
- 運行項目現有且與改動相關的類型檢查、Lint、測試或構建。
- 簡單局部改動只檢查修改位置、直接行為和最近的使用位置，不展開完整狀態矩陣。
- 改動涉及共享組件、數據範圍、異步狀態、表單流程、滾動、響應式或多個頁面時，再檢查受影響的狀態、數據範圍、代表性視口和全部使用位置。
- 視覺改動檢查真實內容、主要狀態和受影響視口；動效改動只按類型檢查適用的中斷、重複觸發、退出、卸載或滾動行為。只有複雜動效或真實卡頓才使用性能錄製，不把每個過渡升級成性能專項。
- 只報告已驗證項、未驗證項和阻斷原因。
獨立自檢
僅當前端評審涉及多個頁面、所有使用共享組件的位置、多種視口或狀態，或大範圍規則調整時，才派發無歷史上下文的獨立自檢。單頁面、單組件、單截圖和局部差異由主 Agent 直接檢查。
獨立自檢只接收檢查對象、範圍和 oil-frontend，不接收對話歷史、既有結論、問題猜測、預期答案或修復方案。
輸出要求
先給結論，再給證據。只輸出：
- 具體問題；
- 應刪除的內容；
- 正確的信息、動作和空間結構；
- 應修改的模塊、共享組件或數據流；
- 已驗證和未驗證項。
禁止使用"提升體驗""更現代""更直觀"等不能指導實現的描述。
不主動擴展成無障礙專項審計。實現 UI 時繼續使用原生交互元素，不破壞項目已有的焦點、鍵盤、標籤和 ARIA 行為；只有用戶明確要求或當前改動直接造成任務不可完成時才展開檢查。