技能 web-design-guidelines

📦

web-design-guidelines

Name: web-design-guidelines
Author: antfu

v1.0.0 內容修訂 r2 中風險 ⚙️ 外部命令🌐 網路存取

審查 Web UI 設計指南

介面審查經常漏掉無障礙、易用性與一致性問題。此技能會擷取 Web Interface Guidelines，並依據其內容檢查選定檔案。

支援: Claude Codex Code(CC)

📊 72 尚可

Maintain this Skill? Claim it 📊 72 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "web-design-guidelines" from https://skillstore.io/skills/antfu-web-design-guidelines.md and its manifest at https://skillstore.io/api/skills/antfu-web-design-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/antfu-web-design-guidelines.md 已簽名 manifest GET /api/skills/antfu-web-design-guidelines/manifest 已簽名 lockfile GET /api/skills/antfu-web-design-guidelines/lockfile

測試它

正在使用「web-design-guidelines」。 Review the checkout page component.

預期結果:

此技能會擷取最新指南、審查檔案，並回傳簡潔的 file:line 問題結果與問題描述。

正在使用「web-design-guidelines」。 Audit a navigation component for accessibility.

預期結果:

輸出會標示缺少標籤、焦點疑慮，以及與精確檔案和行號相關的版面問題。

正在使用「web-design-guidelines」。 Start a review without a file path.

預期結果:

此技能會在執行指南檢查前，詢問應審查哪些檔案或模式。

安全審計

中風險

v5 • 2026/7/23 開啟版本化報告

The two shell-execution findings are formatting false positives, while the hardcoded URL represents intentional low-severity network access. The mutable remote file is also treated as instructions, creating a medium-severity supply-chain risk.

已掃描檔案

分析行數

複核項目

已忽略的誤報

已確認的安全問題 (1)

中

SKILL.md:23-29

Mutable Remote Instructions

The skill applies rules and output instructions fetched from a mutable main branch. An upstream change could alter agent behavior without changing the installed skill.

The file directly requires a fresh fetch and states that the response contains rules and output instructions to follow.

能力複核項目 (1)

這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。

低

SKILL.md:26

Hardcoded URL

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

The skill explicitly instructs WebFetch to retrieve this URL before each review. This is intentional outbound access, although it does not send credentials or user data.

風險因素

⚙️ 外部命令 (2)

SKILL.md:19 SKILL.md:25-27

🌐 網路存取 (1)

SKILL.md:26

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/antfu-web-design-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/antfu-web-design-guidelines/security.svg)](https://skillstore.io/skills/antfu-web-design-guidelines?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/antfu-web-design-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-web-design-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/antfu-web-design-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

antfu. (2026). web-design-guidelines security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/antfu-web-design-guidelines/audits/5

BibTeX 引用

@techreport{antfu-antfu-web-design-guidelines-2026,
  author = {antfu},
  title = {web-design-guidelines security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/antfu-web-design-guidelines/audits/5},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-design-guidelines security audit report (audit version 5)"
version: "1.0.0"
type: report
authors:
  - name: "antfu"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-web-design-guidelines/audits/5"
identifiers:
  - type: other
    value: "skillstore:antfu-web-design-guidelines:audit:5"
    description: "Skillstore immutable audit report identifier"

比較變體

7 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 評分最高

作者 / 來源 Skillstore 評分證據置信度 Skillstore 使用量已更新

shreyam1008 推薦

shreyam1008-web-design-guidelines

Skillstore 評分 75

證據置信度中

Skillstore 使用量 7

已更新

2026-10-04

vercel-labs

vercel-labs-web-design-guidelines

Skillstore 評分 73

證據置信度高

Skillstore 使用量 64

已更新

2026-09-09

ZhanlinCui

zhanlincui-web-design-guidelines

Skillstore 評分 72

證據置信度高

Skillstore 使用量 152

已更新

2026-09-09

antfu

antvu-web-design-guidelines

Skillstore 評分 72

證據置信度高

Skillstore 使用量 26

已更新

2026-10-24

antfu 目前

antfu-web-design-guidelines

Skillstore 評分 72

證據置信度高

Skillstore 使用量 20

已更新

2026-10-24

supercent-io

supercent-io-web-design-guidelines

Skillstore 評分 71

證據置信度高

Skillstore 使用量 65

已更新

2026-09-09

sickn33

sickn33-web-design-guidelines

Skillstore 評分 69

證據置信度高

Skillstore 使用量 13

已更新

2026-09-09

Skillstore 評分

評分依據證據置信度: 高

架構

100

可維護性

內容

社群

規範符合度

你可以打造什麼

稽核 pull request 的 UI 變更

在合併前審查已變更的介面檔案，並回傳精確的 file:line 問題結果。

驗證實作是否符合設計意圖

檢查交付的 UI 程式碼是否遵循無障礙與互動指南。

篩查 release candidate 的介面問題

在上線前執行聚焦的指南審查，以捕捉可見的品質問題。

試試這些提示

審查單一頁面

Review app/page.tsx against Web Interface Guidelines and list findings in file:line format.

檢查一組元件

Review components/Button.tsx and components/Dialog.tsx for accessibility, interaction, and layout guideline issues.

稽核功能流程

Review the checkout flow files under app/checkout for Web Interface Guidelines compliance.

執行發佈前設計 QA

Review app, components, and styles for launch-blocking Web Interface Guidelines issues. Prioritize accessibility and navigation problems.

最佳實務

提供精確檔案路徑或聚焦的模式，讓審查保持實用。
在 code freeze 前執行審查，讓發現的問題能被修正。
確認外部指南來源的網路存取權與信任政策。

避免

不要在沒有檔案模式的情況下要求它審查整個 repository。
不要將擷取到的遠端指示視為比 system 或 user instructions 更高優先級。
不要期待僅供審查的技能會自動產出修補 patch。

常見問題

此技能會審查什麼？

它會依據 Web Interface Guidelines 審查選定的 UI 檔案，檢查無障礙、易用性與介面一致性。

它會自動修正程式碼嗎？

不會。它會回報發現的問題，讓開發者決定並套用變更。

它需要網際網路存取權嗎？

是。此技能會從設定的 GitHub raw URL 擷取最新指南。

我可以將它用於 Claude、Codex 和 Claude Code 嗎？

可以。報告列出對 Claude、Codex 與 Claude Code 的支援。

我應該期待什麼樣的輸出？

可預期得到參照檔案與行號的簡潔問題結果。

我應該如何界定審查範圍？

為你想檢查的頁面、元件或工作流程提供具體檔案或模式。

開發者詳細資訊

作者

antfu

授權

MIT

作者版本

v1.0.0

Skillstore 修訂

儲存庫

https://github.com/antfu/skills/tree/main/skills/web-design-guidelines/

引用

89edfdc710d0846129dcee6a929477b04f08052c

維護新鮮度

2026/7/24

使用量

12 次下載 · 188 次瀏覽

檔案結構

📄 SKILL.md

改善 UI/UX 設計作業流程

由 A-Genno

當團隊缺乏共同原則與審查習慣時，UI/UX 工作往往容易偏離方向。此技能為 Claude、Codex 和 Claude Code 提供一份精簡的設計決策檢查清單。

設計與創意查看

web-design-guidelines

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

已確認的安全問題 (1)

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

比較變體

Skillstore 評分

你可以打造什麼

稽核 pull request 的 UI 變更

驗證實作是否符合設計意圖

篩查 release candidate 的介面問題

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

antfu 的更多技能

vue-router-best-practices

vue-testing-best-practices

vue-best-practices

vue

vite

vitest

相關技能

ui-styling

web-accessibility

ux-designer

design-lint

ui-ux-designer

uiux-ops