web-design-guidelines
作者 Charlie85270使用 web-design-guidelines 依據最新的 Web Interface Guidelines 審查 UI 程式碼。非常適合聚焦於 web-design-guidelines 的 UX 稽核流程，可在發佈前提供精簡的 file:line 發現、無障礙檢查與介面合規審閱。
這個技能評分為 68/100，代表值得收錄，但較適合定位為一個聚焦用途的工具，並附帶一些採用上的前提。目錄使用者可從中獲得清楚的觸發條件、具體的審查流程與明確的輸出格式，但也要預期需要自行提供檔案或比對模式，並在執行時依賴外部 guidelines 擷取。
- 觸發條件清楚：frontmatter 直接點出常見使用情境，例如檢視 UI、無障礙、UX 與設計最佳實務。
- 操作流程明確：先擷取 guidelines、讀取檔案、檢查所有規則，再回傳精簡的 file:line 發現。
- 具備良好的導入決策訊號：技能有有效的 frontmatter、沒有 placeholder，且 body 內容足以顯示真實的使用意圖。
- 沒有內建規則、參考資料或支援檔；此技能每次都依賴擷取外部 guidelines。
- 對邊界情境的漸進式說明有限：如果沒有提供檔案，它只會提示使用者指出要檢查哪些檔案。
web-design-guidelines 技能概覽
web-design-guidelines 技能的用途
web-design-guidelines 技能會依照最新的 Web Interface Guidelines 檢查 UI 程式碼。它特別適合想要具體發現、而不是泛泛意見的聚焦式設計或 UX 稽核。實務上，這個技能能幫你在發版前抓出無障礙缺口、介面不一致，以及違反規範的地方。
誰適合安裝
如果你平常就會審查前端變更、打造產品 UI，或需要可重複執行的 web-design-guidelines for UX Audit 工作流程，就值得安裝 web-design-guidelines。它特別適合能夠檢視檔案並回傳精簡、以檔案層級列出的問題的 agent。
它有什麼不同
這個技能連結的是即時的 guidelines 來源，因此審查依據的是最新規則，而不是過時的清單。若你需要一份能持續對齊上游標準、並以精簡 file:line 格式產出結果的 web-design-guidelines guide，這點就很重要。
如何使用 web-design-guidelines 技能
正確安裝並觸發
請依 repo 說明使用 web-design-guidelines install 指令：npx skills add Charlie85270/Dorothy --skill web-design-guidelines。接著在呼叫技能時指定檔案或模式參數，例如 src/app/page.tsx 或 app/**/*.tsx，讓審查有明確目標。
給它正確的輸入
web-design-guidelines usage 的模式很簡單：直接指出要檢查的檔案，或在你不確定確切路徑時，請 agent 幫你抓取。好的輸入會描述變更意圖，例如：「在對話框重構後，請檢查 app/settings/page.tsx 和 components/modal.tsx 是否符合無障礙與介面規範。」
先讀這些檔案
先從 SKILL.md 開始，因為它會說明整個工作流程，接著再抓取這個技能所依賴的 guidelines 原始來源。如果你要在自己的 repo 裡沿用這個流程，下一步就檢查目標 UI 檔案，並把審查範圍維持在實際有變動的部分；沒有檔名就做大範圍稽核，通常只會拖慢第一次審查。
能提升輸出的工作流程技巧
在開始審查前，先確認 agent 能抓到最新規則，也能讀到你真正關心的精確檔案。請它只回傳精簡的發現，因為這個技能本來就是要輸出簡短問題，而不是長篇敘述。如果你的目標是做出乾淨的安裝決策，先拿一個具代表性的畫面試跑這個技能，再逐步擴到應用程式其他部分。
web-design-guidelines 技能 FAQ
web-design-guidelines 只適用於無障礙嗎？
不是。無障礙是它的價值之一，但這個技能的範圍更大：它會依 Web Interface Guidelines 全面檢查 UI 程式碼。當你要的是理解設計系統脈絡的審查，而不只是無障礙 lint 檢查時，就很適合用它。
我需要是專家才能使用嗎？
不用。只要你能指出檔案或路徑模式，這個技能對新手也很友善。最重要的是替 agent 提供正確範圍與清楚的審查目標，而不是寫出完美提示詞。
什麼情況下不該用這個技能？
如果你只想要腦力激盪、文案撰寫，或沒有程式碼脈絡的視覺氛圍回饋，就不適合用 web-design-guidelines。當你無法提供要審查的檔案，或 repository 不能抓取最新 guidelines 原始來源時，它也不是好選擇。
它和一般提示詞有什麼不同？
一般提示詞常會讓審查者猜測應該套用哪個標準，以及結果要怎麼格式化。這個技能把任務收斂到 guidelines 合規性，因而提升一致性、讓 web-design-guidelines usage 更可重複，也能降低日常 UX 稽核漏掉問題的機率。
如何改進 web-design-guidelines 技能
提供更精準的審查範圍
最好的結果來自範圍小、以變更為導向的提示。不要只說「幫我看我的網站」，而要說清楚變了什麼、在哪裡變：「請檢查 app/checkout/** 裡新的結帳流程，看看版面、表單和無障礙是否有迴歸。」這樣能讓 web-design-guidelines 技能掌握足夠脈絡，把焦點放在真正的風險上。
加上決策脈絡
告訴審查者你最在意什麼：無障礙阻斷、視覺一致性、手機端行為，或會阻擋 merge 的規範違規。當優先順序清楚時，技能就能更好地排序發現項目，避免把最影響發版的問題埋在其他雜訊裡。
針對第一輪結果再迭代
如果第一次輸出太廣，就縮小檔案集合，或只針對最高風險元件再跑第二輪。如果審查太淺，補上相關使用者流程、預期行為或截圖，讓 agent 能更有效地把實作細節和 web-design-guidelines guide 進行比對。