前端開發質量檢查清單 - 385條規則覆蓋11個核心領域

解決什麼

前端開發涉及HTML語義、CSS效能、JavaScript最佳實踐、無障礙訪問、SEO最佳化、安全防護、圖片處理等多個專業領域,團隊常面臨三大痛點:新人不知道該檢查什麼、老手憑經驗遺漏細節、上線前缺乏系統化審查流程。Front-End Checklist 將分散的前端最佳實踐整理成385條可操作的檢查規則,按優先順序(Critical/High/Medium/Low)分級,每條規則配有詳細說明、修復指導和驗證步驟,讓程式碼審查從"憑感覺"變成"照清單"。

為何火

7.3萬GitHub星標背後是前端工程化的剛需:專案提供了三種使用方式——網頁版可互動瀏覽和篩選、README版適合離線查閱、MCP伺服器版讓Claude等AI代理直接呼叫規則庫進行程式碼審查。2017年建立至今持續維護,2.0版本新增MCP協議支援,使其成為首批能被AI工具原生整合的前端知識庫。HN社群討論顯示開發者關注實用性細節(如sitemap是否仍必要、iPhone X適配成本),專案恰好將這些爭議點系統化為可查證的規則。

核心功能

規則庫體系:11個類別覆蓋HTML(25條)、CSS(32條)、JavaScript(26條)、效能(43條)、無障礙(95條)、SEO(94條)、安全(22條)、圖片(25條)、測試(13條)、隱私(5條)、國際化(5條),每條規則包含優先順序標籤、問題說明、修復建議和驗證方法。

多端使用:官網frontendchecklist.io提供分類瀏覽和搜尋,可按專案型別生成定製檢查清單;README版支援Markdown原生檢視;MCP伺服器暴露11個工具介面,支援review_code(審查程式碼片段)、audit_url(審查公開網址)、search_rules(搜尋規則)等操作。

AI整合:通過MCP協議讓Claude等AI助手直接呼叫規則庫,開發者可用自然語言提問"用Front-End Checklist MCP審查這個React元件",AI會自動匹配相關規則並給出高置信度建議,無需人工翻查文件。

安裝

網頁版:直接訪問 frontendchecklist.io 無需安裝

本地開發:

git clone https://github.com/thedaviddias/Front-End-Checklist.git
cd Front-End-Checklist
pnpm install
pnpm dev  # 啟動本地站點

MCP整合(需支援MCP的AI工具如Claude Desktop):

# 連線公共端點
mcp.frontendchecklist.io

# 或本地執行stdio伺服器
node packages/mcp/src/cli.ts

適合誰

前端團隊:建立統一的程式碼審查標準,新人培訓時作為學習大綱,Code Review時作為檢查依據,上線前作為質量門禁。

獨立開發者:個人專案缺乏審查環節時,按清單自查可避免低階錯誤(如忘記設定viewport、缺少alt屬性、未壓縮圖片)。

技術主管:制定團隊規範時參考優先順序分級,Critical級別強制執行,Medium級別納入最佳實踐,Low級別作為最佳化方向。

AI輔助開發者:配合Claude等工具使用MCP介面,讓AI基於權威規則庫給建議,而非僅靠訓練資料猜測。

社群評價

HN討論(193點贊81評論)顯示開發者關注實用性:有人質疑sitemap在現代SEO中的價值,維護者解釋分段sitemap能在Google Search Console中提供爬取/索引比率的可觀測性,對除錯收錄問題仍有意義;關於iPhone X適配成本的討論反映出清單需要平衡"最佳實踐"與"投入產出比",專案通過優先順序標籤解決這一矛盾;有開發者指出robots.txt的Disallow不能阻止頁面出現在搜尋結果(Google可能基於外部連結仍索引),建議用noindex標籤,這類細節正是清單的價值所在——將常見誤區轉化為可驗證的規則。正面評價集中在"系統化"和"可操作性",負面意見主要是部分規則(如charset應通過HTTP頭還是meta標籤設定)存在爭議,但社群認可保留兩種方案的必要性(頁面儲存後會丟失HTTP頭資訊)。

選型對比

vs 商業工具(如Lighthouse):Lighthouse側重自動化效能/無障礙檢測並給出評分,Front-End Checklist提供更全面的人工審查維度(如HTML語義、CSS組織、隱私合規),兩者互補——Lighthouse跑自動化測試,清單覆蓋需要人工判斷的部分。

vs 同類清單(如webdevchecklist.com):後者更新停滯,Front-End Checklist保持活躍維護,2.0版本新增MCP支援是獨有優勢,且規則數量(385條)和分類粒度(11個領域)更詳盡。

取捨:清單優勢在於系統性和AI整合,劣勢是需要人工逐條檢查(雖然MCP可輔助),適合追求質量的團隊;如果只需快速自動化掃描,Lighthouse等工具更高效。

已知坑

語言限制:規則說明和官網均為英文,中文團隊需自行翻譯或依賴AI工具輔助理解,可fork倉庫後本地化規則庫。

MCP網路依賴:公共MCP端點mcp.frontendchecklist.io託管在境外,國內訪問可能需要代理;可選擇本地執行stdio伺服器,但需要Node.js環境和手動配置AI工具。

規則爭議:部分規則(如HN討論的sitemap必要性)在不同場景下適用性不同,團隊應根據專案特點調整優先順序,而非盲目執行全部385條。

無自動化:清單本身不提供自動檢測能力(除了通過MCP讓AI輔助),需要配合Lighthouse、axe等工具實現部分規則的自動化驗證,純人工檢查385條規則成本較高。

維護成本:前端技術快速演進(如React Server Components、View Transitions API),清單需要持續更新才能保持相關性,團隊fork後需要關注上游更新或自行補充新規則。