Web Design Guidelines 介面檢查

來源狀態

可用來源

資源類型

Skill

與類似 Skill 有什麼不同？

• 網頁無障礙

  Web Design Guidelines 涵蓋整體 UI/UX 檢視；Web Accessibility 深入 WCAG、ARIA、鍵盤與輔助科技驗收。

來源描述的能力

這些是來源描述的可能操作，不代表 2lus 已授予權限或已測試。

尚未列出能力，請審查原始來源。

這個 Skill 是什麼？

檢查既有網頁實作，提出可定位的介面缺陷；不是自動產生新視覺風格的工具。

可以做什麼？何時適合使用？

• 檢查鍵盤導航與焦點顯示。
• 檢視表單錯誤、載入與空白狀態。
• 改善行動版字級、圖片與動畫。

如何使用

1. 提供要檢查的頁面檔案與使用者流程。
2. 請 Agent 讀取最新官方規範並指出可定位問題。
3. 依嚴重程度修正，補上人工鍵盤與行動版驗收。

使用前你需要準備

• 介面程式與設計目標
• 目標裝置和操作方式

你可以替換：

[component]、[screen size]

環境與相依需求

• UI 原始碼；Agent 若更新規範需具備網路讀取權限。

使用範例與 Prompt

以下是 2lus 撰寫的示範需求；請替換為你有權處理的檔案與專案，不代表已執行或保證結果。

入門

依 Web Design Guidelines 檢查登入表單的標籤、焦點及錯誤訊息，依嚴重程度附檔案位置。

實務

審查此頁在窄螢幕的字級、圖片尺寸與按鈕可操作性，不改變既有品牌風格。

進階

檢查多步驟表單的鍵盤順序、載入與失敗狀態，提供最小修正及人工螢幕閱讀器驗收清單。

實用提醒

• 區分阻礙操作的問題與單純的視覺偏好。

限制與注意事項

• 靜態檢查不能代替螢幕閱讀器與真實裝置驗收。

安全注意事項

• 先審查來源與相依工具，只處理獲准的資料；密鑰、個資與登入狀態不得放入提示或公開輸出。

使用與設定

這是官方 repository 的技能集合安裝入口，請在互動選單確認所需 Skill 與 Agent；不代表全平台已驗證。

npx skills add vercel-labs/agent-skills

支援平台

未確認特定 Agent 相容性

來源與授權

來源查核日期（非安全認證）: 2026-09-29

請參考原始來源授權條款

相關 Skills

• React 效能最佳實務
• Playwright 網站測試

Source status

Active source

Resource type

Skill

How is this different from similar skills?

• Web Accessibility

  Web Design Guidelines reviews overall UI/UX; Web Accessibility examines WCAG, ARIA, keyboard behavior and assistive-technology evidence.

Documented capabilities

These are operations described upstream, not permissions granted or tested by 2lus.

Capabilities not declared here; review the original source.

What is this skill?

Review existing UI code for actionable defects rather than inventing a new visual identity.

Use cases and when to use it

• Inspect keyboard navigation and focus.
• Review form errors, loading and empty states.
• Improve mobile typography, images and motion.

How to use it

1. Provide page files and the user journey.
2. Ask for current upstream guidance and located findings.
3. Prioritize fixes and add manual keyboard/mobile acceptance.

What you need

• Interface code and design goals
• Target devices and interaction methods

You can replace:

[component], [screen size]

Environment and dependencies

• UI source; network permission if the agent fetches updated guidelines.

Usage and prompt examples

These example requests were written by 2lus. Substitute files and projects you may use; examples are not executed results or guarantees.

Beginner

Use Web Design Guidelines to inspect labels, focus and errors in this login form. Rank findings and locate them in files.

Practical

Review typography, image sizing and touch targets on narrow screens without replacing the brand style.

Advanced

Review keyboard order and loading/failure states in this multi-step form. Give minimal fixes and a manual screen-reader checklist.

Tips

• Separate usability blockers from aesthetic preferences.

Limitations

• Static review cannot replace assistive-technology and real-device checks.

Security notes

• Review sources/dependencies and process only authorized data; keep credentials, personal data and session state out of prompts and public outputs.

Usage and setup

This is the repository-level installer. Review the selected skills and agent in its prompts; it is not a cross-agent verification claim.

npx skills add vercel-labs/agent-skills

Supported agents

Specific agent compatibility unknown

Sources and license

Source check date (not a safety certification): 2026-09-29

Refer to the original source license terms

Related skills

• React Best Practices
• Playwright