Communitygithub.com

前端就緒檢查

從工作差異、PR URL、發布目標或完整儲存庫審計檢查前端就緒狀態。適用於應用程式、UI、無障礙性、效能及前端PR審查。

前端就緒檢查 是什麼?

此技能旨在協助開發者或AI代理對前端專案進行全面的就緒狀態評估。它支援四種呼叫模式:透過差異比較(diff)、PR連結(pr <URL>)、發布目標(release)或完整儲存庫審計(full)。當直接調用時,使用者需自行選擇模式;若由上層的`check-readiness`技能呼叫,則會沿用其選定的目標,僅針對前端表面進行評估。 該技能涵蓋七大審查區塊:正確性、框架慣例、介面與無障礙性、韌性/隱私/安全性、效能與資產、搜尋與分享、以及工程與部署。每個區塊包含多個具體檢查項目,並要求根據目標範圍標記不適用項目(N/A)並附上理由。審查結果會區分封鎖性問題(如關鍵流程中斷、無障礙性失敗)與建議性問題,協助團隊優先處理高風險項目。 此技能主要設計用於Claude Code或類似支援技能呼叫的AI代理平台,透過結構化檢查清單確保前端發布前的品質與一致性。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yagyaraj234/skills/tree/HEAD/skills/frontend-readiness

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

前端就緒檢查 是做什麼的?

以 $frontend-readiness diff、$frontend-readiness pr <URL>、$frontend-readiness release 或 $frontend-readiness full 的方式呼叫。

使用 check-readiness 中的模式、證據、裁決和編輯規則。當直接呼叫時,請在那裡選擇一種模式。當由 check-readiness 呼叫時,沿用其選定的目標。僅評估前端表面。

評估適用於所選目標的檢查項目。將範圍內的例外標記為 N/A 並附上原因。一個不適用的區塊(非公開應用程式的搜尋與分享、未使用框架的框架慣例)只需一條 N/A 行,而非每個檢查項目各一條。

封鎖性領域:關鍵流程或路由中斷、驗證與權限 UI、使用者內容的不安全渲染、洩露的秘密、關鍵流程上的無障礙性失敗、資料驅動介面上的遺漏錯誤或空白狀態、建置或測試失敗。其他失敗為建議性問題。

正確性

  • 每個範圍內的路由都能透過直接導航、重新整理、應用程式內導航、返回和前進正常渲染。
  • 每個關鍵流程完成其快樂路徑,並在可復原的失敗中保留有用的輸入。
  • 表單驗證輸入、防止重複提交、顯示可操作的錯誤,並將錯誤暴露給輔助技術。
  • 客戶端、伺服器、URL 和持久化狀態在重新整理、取消、過時回應和重複操作中保持一致。
  • 控制台沒有新的錯誤或警告;失敗的網路請求有說明。
  • 驗證和權限邊界顯示正確的 UI、保留預期的返回路由,並處理過期的 session、被禁止的回應和角色變更。

每個資料驅動的介面都有一個明確的狀態矩陣。僅當狀態不可能發生或不提供使用者可見的價值時,才將其標記為 N/A。

  • 空狀態: 成功的零資料結果說明發生的事情,並提供有用的下一步動作。
  • 載入中: 進度清晰,有用的現有內容保持穩定,重複操作保持受控。
  • 骨架螢幕: 當最終佈局可預測且延遲可感知時,佔位符與其匹配並避免佈局偏移;否則記錄 N/A。
  • 部分: 當獨立區塊載入或失敗時,可用內容保持可用。
  • 錯誤: 訊息可操作,有用的輸入被保留,重試或恢復有效。

框架慣例

跳過專案未使用框架的項目;記錄偵測到的框架和版本。

  • 框架、路由器和資料載入 API 與已安裝版本和現有專案慣例匹配;記錄版本和事實來源。
  • 內部導航使用偵測到的框架連結元件,例如來自 next/link 或 @tanstack/react-router 的 Link;原生 <a> 處理外部、下載、電子郵件和電話連結。
  • 路由參數、搜尋參數、重新導向和導航使用框架路由器 API 和 hooks。
  • 靜態和動態樣式遵循現有的框架支援樣式系統;動態值使用 CSS 自訂屬性,除非函式庫要求的定位需要內聯樣式。

介面與無障礙性

  • 佈局在每個記錄的視口下正常運作,沒有意外的溢出。長文字、遺失媒體、慢速資料和大型集合保持可用。
  • 層級、間距、排版、顏色和互動回饋一致;控制項涵蓋懸停、焦點、啟用、停用、載入和錯誤狀態。
  • 破壞性操作需要明確意圖,並在可行的情況下提供復原功能。
  • 語義地標、標題、控制項、標籤和無障礙名稱與目的匹配。
  • 僅鍵盤使用能按邏輯順序到達並操作每個互動元素;焦點保持可見,並在對話框、選單、錯誤和路由變更中正確移動。
  • 文字和必要的 UI 達到記錄的無障礙目標(預設為 WCAG 2.2 AA,除非有更嚴格的要求);意義不依賴於顏色本身。
  • 圖片有適當的替代文字;裝飾性媒體保持靜音。縮放、文字大小調整、減少動態效果和所需的螢幕閱讀器宣告能維持流程。

韌性、隱私與安全性

  • 使用者控制的內容安全渲染;秘密和特權決策保留在伺服器端。
  • 外部連結、重新導向、上傳、儲存和瀏覽器 API 驗證不受信任的輸入。外部分頁在適用的情況下使用安全的開窗器行為。
  • 離線和超時行為避免資料遺失。
  • 錯誤 UI 省略敏感內部資訊,同時日誌保留足夠的診斷上下文。
  • 驗證或個人資料產品從驗證和持久導航中公開服務條款和隱私權頁面;內容與實際行為匹配。
  • 在應用程式控制它們時,驗證 Cookie、CSRF 防禦、回應安全性標頭、重新導向和快取策略。
  • 分析、錯誤追蹤和同意機制尊重隱私要求,不暴露個人或秘密資料。
  • 功能旗標具有已驗證的目標環境值,對於有風險的變更,則有記錄的回滾或停用路徑。

效能與資產

  • 從記錄環境中的生產建置,使用 TTFB、LCP、INP、CLS、首次有用內容和主要互動時間來測量代表性路由。
  • 每個範圍內的路徑在記錄的預算內顯示有用內容或可操作的後備方案,並接受其主要互動;僅當沒有更嚴格的產品預算時,預設為五秒。
  • 生產建置輸出、路由區塊和網路瀑布流沒有無法解釋的高成本。
  • 已變更的效能最佳化具有可衡量的效益,並在適用的情況下保留鍵盤、焦點、螢幕閱讀器和離線行為。
  • 當依賴項變更或元件卸載時,Effects 會釋放監聽器、訂閱、觀察器、待處理請求、workers、計時器、動畫幀以及去抖或節流的工作。
  • 圖片使用可用的框架最佳化、響應式尺寸和 sizes、現代格式、壓縮、穩定的長寬比以及正確的 eager/lazy 優先級。影片和字型有審慎的傳遞、後備和預載行為。
  • 第三方、內聯和阻塞腳本有明確的目的和載入優先級。

搜尋與分享

僅適用於公開或可分享的路由;僅限驗證的應用程式只需執行非索引檢查。

  • 每個路由定義適當的標題和描述元資料。公開的可索引路由透過框架 API 設定 canonical 和 robots 意圖;非生產和受保護的環境不會被意外索引。
  • 可分享的路由將 Open Graph 和社交媒體元資料解析為絕對、可爬取的值。OG 圖片返回正確的內容類型、尺寸和替代文字;驗證渲染的標籤和真實的分享預覽。
  • 對於發布閘道,Lighthouse 在記錄的行動裝置和桌面設定檔下對已部署的生產路由執行;記錄效能、無障礙性、最佳實務和 SEO 結果及回歸。

工程與部署

  • 格式化、lint、型別檢查、測試和生產建置通過,或有明確的基線失敗。
  • 已變更的邏輯具有最小的有用自動化回歸檢查。
  • 環境變數、功能旗標、API URL、瀏覽器支援和測試帳戶與目標環境匹配。
  • 錯誤追蹤、favicons 和安裝圖示在產品需要它們的地方正常運作。
  • 對於發布閘道或影響部署的變更,在目標環境中驗證已部署的資產、路由、API、驗證、標頭、重新導向和快取行為。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能