情境

Frontend Release Gate

適用於 UI 密集變更的發布前工作流程，在正式發布前捕捉損壞的流程、Lint/類型回歸，以及明顯的安全問題。

3 技能 5 安裝次數

frontendtestingquality-assurancesecurityrelease

3 天前更新

安裝

執行此指令以安裝此技能包中的所有技能：

npx skillstore add @frontend-release-gate

CLI 會自動偵測 Codex 與 Claude Code 資料夾；如果兩者都可用，會同時安裝。

總覽

使用指南

由 AI 強化

詳細指南

## 概述
Frontend Release Gate 是一個適用於 UI 密集變更的發布前工作流程。它執行三個自動化品質檢查點——瀏覽器流程驗證、Lint/類型驗證，以及安全性審計——讓您能夠自信地發布，並在回歸問題進入生產環境前將其捕捉。

## 快速開始
1. 在您的 OpenClaw 工作區中安裝插件：`npx skillstore add @frontend-release-gate`
2. 在合併 UI 分支之前，觸發 **webapp-testing** 來執行 Playwright 檢查：驗證主要使用者流程、截取關鍵畫面的截圖，以及審查瀏覽器主控台輸出中的錯誤。
3. 執行 **lint-typecheck** 以捕捉前端程式碼庫中的 ESLint 違規和 TypeScript 類型錯誤——確保合併前的發布保持乾淨。
4. 最後，執行 **security-audit** 以在變更上線前審查身份驗證處理、API 金鑰暴露，以及注入風險。

## 主要命令
- `webapp-testing` — 在您的本機 Web 應用程式上啟動基於 Playwright 的瀏覽器檢查；呈現損壞的 UI 流程、主控台錯誤，並提供截圖以便視覺審查。
- `lint-typecheck` — 執行 ESLint 和 `tsc` 類型檢查；呈現 CI 可能因過時快取而忽略的類型回歸和 Lint 違規。
- `security-audit` — 審計命令執行路徑、工具許可權和 API 金鑰處理，以發現身份驗證漏洞和注入風險。

## 技巧
- 在每個 UI 密集的 PR 上依序執行所有三個檢查關卡：webapp-testing → lint-typecheck → security-audit。
- 與 CI 管線插件搭配使用（例如建置和測試插件），讓檢查關卡在每個 Pull Request 上自動執行，無需手動觸發。
- 如果 webapp-testing 標記出損壞的流程，請在繼續執行 lint-typecheck 之前先修復它——損壞的渲染通常會掩蓋下游的類型錯誤。