菜单
依 Vercel Web Interface Guidelines 審查本專案 sidepanel UI 程式碼。對 sidepanel 窄寬度 (~300-400px)、scrollable 列表、Chrome theme 配色、鍵盤導航、aria 標籤特別關注。當使用者提到「審查 UI、check accessibility、audit design、review UX、檢查無障礙、檢查設計、UI review」時觸發。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
建立本專案的 Pull Request：雙語描述 (zh-TW/en)、gh CLI、.agent/skills/pull-request/scripts/check-pr.sh 預驗證、references/pr_template.md 與 checklist.md。當使用者提到「開 PR、建 PR、create PR、pull request、提交變更、發 PR、新建 PR」時觸發。
本專案 (MV3 Chrome extension) 的除錯紀律與 playbook：先重現再修、證據優先於模式匹配、單變因修改、跨 context 時序問題、service worker 終止、storage 問題、flaky E2E 分流。當使用者提到「除錯、debug、壞掉、不會動、修不好、查原因、root cause、flaky、時好時壞」時觸發。
維護本專案 AI agent harness（AGENTS.md / CLAUDE.md / GEMINI.md / .agent/{rules,skills,workflows} / docs/wiki）的 SOP：單一事實來源對照表、drift 稽核步驟、新增/刪除 skill 的判準、wiki 同步機制。當使用者提到「更新 harness、同步 AGENTS、文件過時、drift、稽核設定檔、整理 skills、維護 wiki」時觸發。
交付前驗證紀律：依變更類型選擇最小充分驗證組合（unit / 目標 E2E / happy-path CI / make build）、Makefile 打包檢查、i18n 連動、GEMINI.md key_files 同步、誠實回報。當使用者提到「驗證、收尾、完成了嗎、可以交付嗎、送 PR 前、檢查一下」或任何實作即將收尾時觸發。
清理已合併進 main 的本地與遠端 git 分支。本專案採 squash merge，PR 合併後特性分支可直接刪除。當使用者提到「清理分支、cleanup branches、刪除舊分支、清掉已合併分支、整理 branch」時觸發。
本專案 (Manifest V3 Chrome extension) 的 commit 規範與範例：subject 使用英文 Conventional Commits、body 使用繁中說明背景與原因。當使用者提到「commit、提交訊息、commit message、寫 commit、commit 規範」時觸發。
| name | web-design-guidelines |
| description | 依 Vercel Web Interface Guidelines 審查本專案 sidepanel UI 程式碼。對 sidepanel 窄寬度 (~300-400px)、scrollable 列表、Chrome theme 配色、鍵盤導航、aria 標籤特別關注。當使用者提到「審查 UI、check accessibility、audit design、review UX、檢查無障礙、檢查設計、UI review」時觸發。 |
| metadata | {"author":"vercel","version":"1.0.0","argument-hint":"<file-or-pattern>"} |
依 Vercel Web Interface Guidelines 審查本專案的 UI 程式碼，並以本 Chrome extension sidepanel 的場景做額外加強。
file:line 簡明格式輸出問題每次審查前 fetch 最新版：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
用 WebFetch 抓取，回傳內容含完整規則與輸出格式說明。
使用者給檔案或 pattern：
若未指定檔案，詢問要審哪些。
通用 Web Interface Guidelines 沒涵蓋的 Chrome extension sidepanel 特殊情境：
width: 800px 之類；改用 max-width 或彈性布局。flex-shrink-0 避免 header / footer 被擠。text-overflow: ellipsis、word-break: break-word、min-width: 0 處理。chrome.theme API 或 CSS 變數讀系統 dark mode（prefers-color-scheme）。檢查是否硬編碼 #fff / #000。modules/ui/customThemeManager.js 提供自訂配色，但須通過 modules/utils/colorUtils.js 的 WCAG 4.5:1 對比度檢查（refs image-master skill）。modules/icons.js 的 SVG）必須有 :focus-visible 樣式。aria-label，並建議加 title 提供 tooltip（沿用 AGENTS.md "Memory Tips" 規範）。aria-live="polite" 區域。modules/modalManager.js 的 prompt / confirm dialog 必須有 role="dialog" 與 aria-modal="true"，並把 focus trap 在 modal 內。innerHTML = '' 重畫。innerHTML 處理 user input：使用 textContent 或 modules/utils/textUtils.js 的 escapeHtml。eval / inline scripts / 外部 CDN。sidepanel.html:42 純圖示按鈕缺少 aria-label
modules/ui/tabRenderer.js:88 使用 innerHTML 渲染來自 chrome.tabs API 的標題，未經 escapeHtml
modules/ui/customThemeManager.js:130 自訂背景色與 foreground 對比度低於 WCAG AA (3.2:1)