下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“web-design-guidelines”。 使用 web-design-guidelines 審查 src/components/Button.jsx
预期结果:
Button 元件審查完成：
✓ 通過：Button 具有正確的語意化 HTML 結構
✓ 通過：足夠的色彩對比度（4.5:1 比率）
⚠ 警告：第 23 行僅含圖示的按鈕缺少 aria-label
⚠ 警告：第 45 行的焦點狀態可更明顯
建議：為僅含圖示的按鈕元素新增 aria-label="Submit"，以支援螢幕閱讀器。
正在使用“web-design-guidelines”。 使用 web-design-guidelines 檢查 index.html 的無障礙性合規性
预期结果:
index.html 的無障礙性稽核：
✓ 通過：有效的文件結構和語意化元素
✓ 通過：已設定 lang 屬性
⚠ 警告：第 15 行的圖片缺少 alt 屬性
⚠ 警告：第 30-35 行缺少表單標籤
⚠ 警告：建議新增跳過導覽連結
需要處理：為所有圖片新增 alt 文字，並將標籤與表單輸入關聯。
安全审计
安全All static findings are false positives. The backticks flagged as 'Ruby/shell backtick execution' are markdown code formatting. The 'weak cryptographic algorithm' detections are scanner errors on random markdown text. The network URL is a legitimate public GitHub resource (vercel-labs/web-interface-guidelines) intentionally fetched to get current guidelines. This is a simple skill that fetches public guidelines and reviews UI code for compliance.
中风险问题 (1)
低风险问题 (1)
质量评分
你能构建什么
網頁開發者程式碼審查
網頁開發者希望在部署前確保其 UI 元件遵循無障礙性和設計最佳實務。
無障礙性稽核
UX 設計師需要驗證所有頁面是否符合無障礙性標準和 WCAG 指南。
設計系統合規性
團隊負責人希望確保所有團隊成員在實作中遵循一致的設計模式。
试试这些提示
使用 web-design-guidelines 技能審查我在 [filename] 中的 UI 程式碼，以確保符合網頁介面指南。
使用 web-design-guidelines 檢查 [file or pattern] 的無障礙性合規性並建議改善方案。
使用 web-design-guidelines 對 [directory or pattern] 進行全面審查。檢查所有檔案是否符合網頁介面指南、無障礙性和 UX 最佳實務。
使用 web-design-guidelines 技能審查 [directory] 中所有 [*.jsx 或特定模式] 檔案，以確保符合網頁介面指南。
最佳实践
- 每次審查前抓取最新指南，以確保符合當前最佳實務
- 審查完整檔案而非片段，以獲得準確的上下文
- 優先處理無障礙性警告，因為它們影響最廣泛的使用者群
避免
- 不要將此技能用於後端邏輯或 API 程式碼審查
- 避免審查產生或壓縮後的程式碼 - 此技能需要可讀的原始碼
- 不要期望視覺轉譯 - 這僅是程式碼分析