web-design-guidelines
作者 ehmoweb-design-guidelines 是一套不綁框架的指南，用來建立、審查與修正可近用、響應式的網頁 UI。可用在語意化 HTML、WCAG 2.2 檢查、表單、焦點狀態、對比度、深色模式、效能，以及跨 HTML、CSS 和 JS 的版面決策。
這個技能的評分是 84/100，代表它很適合列入目錄供使用者選用。它為代理提供清楚的觸發條件、扎實的操作指引，以及足夠完整的結構化涵蓋，比一般的 web-design 提示詞更有實用性；但若要真正發揮效果，仍需依賴完整的 Markdown 規則，而不是輕量級的安裝體驗。
- 觸發條件明確：frontmatter 直接寫明可用於 HTML、CSS、web components、WCAG 合規、響應式設計與網頁效能。
- 工作流程價值高：repo 內含大型 `SKILL.md`、`AGENTS.md` 與分段規則，共有 13 個 H2、79 個 H3，以及可辨識的分類，例如 accessibility、forms、performance、dark mode 與 i18n。
- 安裝決策證據充足：metadata 引用 WCAG 2.2、MDN、web.dev，並提到 70+ 條規則抽象化，顯示這不是占位型內容，而是基於實際標準的參考技能。
- 沒有提供安裝指令或腳本，因此採用方式主要是手動，並依賴閱讀 Markdown 指引。
- `SKILL.md` 含有 placeholder 標記，因此在用於高風險工作前，使用者應先確認所有引用的章節是否完整。
web-design-guidelines 技能概覽
這個技能是做什麼的
web-design-guidelines 技能是一套實用的 Web 平台設計與無障礙指南，適合用來建立、檢視或修正網頁介面上的 UI。它特別適合不只想要一個泛用提示詞的人：前端工程師、與程式碼一起工作的設計師、無障礙審查者，以及必須做出站得住腳的 HTML/CSS/JS 選擇的代理。
它能幫你決定什麼
當工作目標是選擇語意化標記、符合 WCAG 2.2 預期、改善響應式表現，或避免常見的 Web UI 回歸時，就很適合用這個技能。web-design-guidelines 技能的主要價值，在於它能把「讓這個表單更無障礙」或「改善這個版面在手機上的表現」這類大方向，轉成具體的平台規則。
它有什麼不同
這個儲存庫不綁框架，並且對基礎原則有明確主張：語意化 HTML、鍵盤操作、焦點狀態、對比度、響應式設計與效能。對 web-design-guidelines for UI Design 來說，這讓它能跨 React、Vue、純 HTML 與設計系統工作使用，因為指引是建立在框架選擇之下的更底層原則。
如何使用 web-design-guidelines 技能
安裝並載入正確的檔案
使用 web-design-guidelines install 指令安裝這個技能套件：
npx skills add ehmo/platform-design-skills --skill web-design-guidelines
安裝後，載入 SKILL.md 以取得完整規則集。如果你只需要處理單一面向，先看 rules/_sections.md。AGENTS.md 則是最快了解檔案結構、適用範圍與優先級的路徑。
把模糊需求改寫成有用的提示詞
這個技能在你的輸入有明確寫出 UI 表面、目標限制與你想要做出的決策時，效果最好。比較好的提示詞會像這樣：
- “Audit this checkout form for keyboard and label issues.”
- “Refactor this card grid to stay readable on mobile and meet contrast rules.”
- “Review this modal for focus trapping, escape behavior, and ARIA naming.”
在 web-design-guidelines usage 裡，請加入實際的標記、元件 API 或版面限制。你如果只說「改善無障礙」，輸出通常會太寬泛，不夠可靠。
建議的閱讀順序
先讀 SKILL.md，再讀 AGENTS.md，接著視需要用 rules/_sections.md 做選擇性載入。如果你正在排查特定問題，先只看相關章節：無障礙、表單、響應式設計、排版、效能或導覽。這樣可以讓工作更聚焦，也能減少無關建議。
能產生更好結果的工作流程
請依序進行：先辨識使用者問題、找出相關規則章節、套用最小必要的結構修正，然後重新檢查鍵盤操作、標籤、對比度與行動版行為。這個技能最擅長的，是在你要求它產出審查結果或修補方案時發揮作用，而不只是抽象地解釋最佳實務。
web-design-guidelines 技能 FAQ
這只適用於無障礙工作嗎？
不是。無障礙雖然是最大的一個章節，但這個技能也涵蓋響應式版面、表單、排版、效能、深色模式、導覽、觸控、i18n、動畫，以及與 PWA 相關的考量。只要你的任務不只侷限在 WCAG，這個技能仍然適用。
需要前端專家才能用嗎？
不需要。只要你能提供 HTML、元件程式碼，或帶有截圖背景描述問題的說明，web-design-guidelines skill 就很適合入門使用。但你仍然需要清楚說明介面是什麼，以及你希望改變哪些行為。
什麼情況下不該用它？
如果你的任務只是純視覺品牌、文案撰寫，或沒有 UI 實作的產品策略，就可以略過它。若答案不依賴網頁介面的行為，它也不是處理伺服器端架構問題的正確工具。
它比一般提示詞好在哪裡？
一般提示詞常只會回傳泛泛的建議。這個技能有平台規則作為錨點，所以 web-design-guidelines guide 類的需求，能更可靠地判斷語意元素、鍵盤流程、ARIA 用法與響應式行為，而不是靠猜測。
如何改進 web-design-guidelines 技能
提供最小但完整的 UI 上下文
最好的輸入會包含元件名稱、相關程式碼，以及失敗模式。例如：「這是一個有關閉圖示、兩個輸入欄位和主要動作按鈕的 modal；請檢查焦點管理與標籤。」這會比「讓它更無障礙」強很多。
說明你最在意的限制
如果你最在意行動裝置，就請提到 viewport 限制、breakpoint 或觸控目標大小。如果你最在意無障礙，就直接指出目標議題：鍵盤操作、對比度、標籤、減少動態效果，或螢幕閱讀器命名。當技能知道哪個取捨最重要時，web-design-guidelines usage 會更準。
留意常見失誤
最常見的問題包括：過度使用 <div>、沒有標籤卻藏起來的互動控制、焦點狀態太弱，以及在文字被翻譯或放大後就壞掉的版面。如果第一次輸出顯得很泛，請直接針對精確的元件樹或 CSS 要求一次基於規則的審查。
用審查迴圈持續迭代
第一輪之後，針對你還不放心的那個具體面向，要求第二輪檢查，例如：「重新審查鍵盤順序」、「驗證對比度與焦點樣式」，或「只找出標記層級需要變更的地方」。這樣可以讓 web-design-guidelines 技能保持聚焦，通常也能產出更銳利的最終實作。