麒麟 / 奇安信前端相容開發
使用原則
把相容性作為本次實現的約束，不是做完頁面再補顏色。此 Skill 適用於新開發、故障修復、依賴升級和評審；不要求特定框架。只處理任務涉及的風險，不無條件改寫整個專案。
不能承諾覆蓋所有奇安信版本。 產品號、發布渠道和 Chromium 內核號不同；同一內核在不同 CPU、驅動和企業策略下也可能表現不同。未知資訊必須標記待確認，不能偽造驗證記錄。
1. 先確定支援契約
- 讀取已有專案指令、鎖檔案、建構配置、相容測試和支援範圍，保留用戶改動。
- 從使用者、瀏覽器「關於」頁及
assets/browser-probe.html收集：產品全稱、產品完整版本、渠道、Chromium 完整版本、麒麟版本/SP、CPU 架構、DPR/縮放、字型/GPU、關鍵企業策略。UA 只作線索，不能證明實際內核。 - 建立或更新專案已有支援矩陣；無現成檔案時，可使用
assets/support-matrix.example.json。填寫業務必需功能、最小實際內核、真機和降級驗收標準。不要在安裝的 Skill 目錄記錄業務設備資料。 - 未知基線時先詢問，不擅自等同 Chromium 102。使用者要求先開發時可暫定保守基線，但必須記錄為 provisional / 未驗證，不得寫「已相容全部版本」。
- 讀取 瀏覽器矩陣。不同渠道和架構分別驗收；最低基線與更高版本都要覆蓋，不能靠僅測最新 Chrome 代表奇安信。
2. 唯讀審計，確定最小改動
- 讀實際原始碼和生產建構配置，確認 CSS 工具、UI 庫、瀏覽器/服務端入口、第三方套件以及部署方式。
- 按改動選讀參考資料，不必每次載入全部檔案：
| 任務 | 必讀 |
|---|---|
| 樣式、Tailwind、佈局、主題、彈窗 | CSS 與佈局 |
| JS/TS、語法編譯、依賴、Web API | JavaScript 與建構 |
| 字型/輸入法、檔案、PDF、權限、網路、CPU/GPU | 麒麟平台與交付 |
| 測試、截圖、發布驗收、資料邊界 | 驗證與驗收 |
| 查證特性支援或版本依據 | 來源與證據等級 |
- 從 Skill 實際安裝路徑執行檢查器；
<skill-dir>表示當前SKILL.md所在目錄，先替換為已確認的實際路徑，不要照抄佔位符：
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102
只有支援契約已確定為 102 時才使用範例中的 102；未確定時省略 --min-chromium，輸出會標記 unknown。路徑按真實專案替換。檢查器唯讀、零第三方依賴、不會修改程式碼；它是詞法候選檢測，不是 AST、CSS 編譯器或相容性認證。
3. 實現規則
CSS
- 穩定路徑優先使用常規 hex/rgb/hsl、傳統
transform、可回退的佈局；現代特性僅在目標支援或可證明漸進增強時使用。 - 針對 102：重點檢查
:has()、容器查詢、新視口單位、獨立變換、現代顏色、原生巢狀、Popover 與 Tailwind 生成程式碼。支援閾值與替代見 CSS 參考。 - Tailwind v4 官方最低 Chrome 111；102 不在支援範圍。不能聲稱調色板修補、Autoprefixer 或設定 JS target 就解決全部 v4 相容性。提出受支援方案或經過驗證的產物轉換；遷移/降級依賴須先確認，不擅自執行。
var()的 fallback 不等於任意現代顏色回退；CSS.supports()不等於實際像素正確。分別檢查解析、計算值和視覺結果。- 改彈窗定位時保留動畫與拖拽的 transform 合成；檢查遮罩、焦點、滾動、鍵盤、Portal 和層疊上下文，不只檢查居中截圖。
JS / 依賴
- 區分語法轉譯、內建物件 polyfill 和需要權限/原生平台支援的 Web API。TypeScript
target、lib、建構target不能互相替代。 - 對瀏覽器交付鏈配置真實最低內核，檢查依賴、動態 chunk、worker、第三方腳本及 CSS 產物；Node 服務端 API 不能當作瀏覽器 API 使用。
- 新 API 在入口處能力檢測，採用業務可接受的降級；語法解析失敗發生在檢測之前，不能用
if包住新語法代替轉譯。 - 不 blanket 禁用可選鏈等已支援能力，也不預設補全全部 polyfill。不得為了相容關閉 CSP、證書驗證、沙箱或其他安全措施。
平台 / 資料
- 覆蓋字型缺失、中文輸入法組合事件、架構差異、GPU、下載/列印、檔案名稱、代理/證書、離線部署和企業權限策略。
- 涉及外部/AI 資料時，在邊界按實際 schema 校驗並展示明確失敗/缺失狀態；不要把未知評分靜默補成有效分數，也不強制引入指定校驗庫。與瀏覽器無關的業務改動不擴大範圍。
4. 驗證順序
- 原始碼風險掃描、現有單測和 lint；確認未掃描目錄、誤報和人工豁免的理由。
- 生產建構；掃描實際發布的 CSS/JS（使用
--include-build，確認路徑不是原始碼映射或 Node 服務端套件）。記錄轉換/降級的實際輸出，不憑配置推斷有效。 - 在目標瀏覽器開啟離線探針，手動核對視覺區域，再訪問真實專案關鍵流程。探針不等於專案測試，不採集帳號或業務輸入。
- 對照最低基線、存量版本和當前版本的實際麒麟終端，執行參考文件中的功能/截圖/鍵盤/輸入法/縮放/列印驗收。普通 Chrome、Playwright 的近期 Chromium 或偽造 UA 不能替代目標真機。
- 無真機、無依賴安裝權限或建構失敗時，明確寫出阻塞和未驗證項，不生成虛假截圖/成功結論。
# 僅範例：換成專案真實的瀏覽器產物目錄
python3 "<skill-dir>/scripts/compat_audit.py" ./dist --include-build --min-chromium 102 --format json
# 可選擇對所有候選風險設 CI 閘門；先處理誤報和有證據的漸進增強
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102 --fail-on warning
5. 交付格式
簡短輸出：
- 支援契約：實際版本/架構、最低內核；unknown/provisional 必須註明。
- 修改與依據：問題、位置、降級/轉換方式；引用程式碼時用
path:line。 - 驗證結果：原始碼、產物、普通瀏覽器、麒麟真機分別寫 pass/fail/not-run，不混為一個「通過」。
- 殘餘風險：無法驗證的版本、策略/硬體限制及需用戶確認的取捨。
Skill 描述用於自動匹配；如必須每次觸發，應由使用專案的 Agent 指令明確要求在相關開發前載入本 Skill。Skill 自身不能替代宿主發現機制，也不能繞過權限或強制模型呼叫。