技能 web-design-guidelines
📦
web-design-guidelines
v1.0.0 內容修訂 r1 中風險 ⚙️ 外部命令🌐 網路存取
依據設計準則審查網頁介面
團隊在發布前需要一致的 UI、無障礙與 UX 檢查。此技能會將 Web Interface Guidelines 套用到選定檔案，並回報精簡的發現。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "web-design-guidelines" from https://skillstore.io/skills/zhanlincui-web-design-guidelines.md and its manifest at https://skillstore.io/api/skills/zhanlincui-web-design-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「web-design-guidelines」。 審查定價頁面的準則問題。
預期結果:
- app/pricing/page.tsx:58 - 主要與次要動作在視覺上同等突出。請釐清主要路徑。
- app/pricing/page.tsx:91 - 功能比較僅使用顏色。請為狀態新增文字標籤。
正在使用「web-design-guidelines」。 稽核元件庫的互動品質。
預期結果:
- components/Dialog.tsx:34 - 未描述焦點處理。請確認鍵盤進入、escape 與返回焦點行為。
- components/Card.tsx:76 - 僅在 hover 時顯示的詳細資訊，可能會讓觸控使用者看不到資訊。
安全審計
中風險v5 • 2026/7/8 開啟版本化報告
The markdown backtick detections are false positives: they are inline formatting and a fenced URL block. The hardcoded WebFetch URL is confirmed as a low network risk, and the larger concern is reliance on mutable remote content as instructions.
1
已掃描檔案
40
分析行數
1
複核項目
0
已忽略的誤報
已確認的安全問題 (1)
中
Remote Instruction Supply Chain
SKILL.md directs the agent to fetch remote guidelines and says the fetched content contains all rules and output format instructions. Treating mutable network content as instructions can change skill behavior after marketplace review.
The file explicitly requires fetching the URL and following rules from fetched content; the risk depends on future remote content but the delegation pattern is clear.
能力複核項目 (1)
這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。
低
Hardcoded URL
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
The skill instructs the agent to fetch a hardcoded raw GitHub URL before reviews. This intended network dependency can pull changed remote content and should be disclosed and controlled.
風險因素
⚙️ 外部命令 (2)
🌐 網路存取 (1)
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/zhanlincui-web-design-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/zhanlincui-web-design-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/zhanlincui-web-design-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/zhanlincui-web-design-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/zhanlincui-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 引用
ZhanlinCui. (2026). web-design-guidelines security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/zhanlincui-web-design-guidelines/audits/5BibTeX 引用
@techreport{zhanlincui-zhanlincui-web-design-guidelines-2026,
author = {ZhanlinCui},
title = {web-design-guidelines security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/zhanlincui-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: "ZhanlinCui"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/zhanlincui-web-design-guidelines/audits/5"
identifiers:
- type: other
value: "skillstore:zhanlincui-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-web-design-guidelines
Skillstore 評分 73
證據置信度 高
Skillstore 使用量 64
已更新
2026-09-09
ZhanlinCui 目前
zhanlincui-web-design-guidelines
Skillstore 評分 72
證據置信度 高
Skillstore 使用量 152
已更新
2026-09-09
supercent-io-web-design-guidelines
Skillstore 評分 71
證據置信度 高
Skillstore 使用量 65
已更新
2026-09-09
Skillstore 評分
評分依據 證據置信度: 高 55
架構
100
可維護性
87
內容
74
社群
83
規範符合度
你可以打造什麼
合併前 UI 審查
在開啟或合併 pull request 前，檢查元件與頁面檔案是否有準則相關問題。
設計 QA 支援
將已實作畫面與介面品質期望及無障礙實務進行比較。
團隊標準稽核
在不同專案中執行一致的介面審查，而不必重寫本機審查檢查清單。
試試這些提示
審查單一頁面
依據 Web Interface Guidelines 審查 src/app/page.tsx，並列出含檔案與行號參照的精簡發現。
檢查元件組
使用目前準則審查 src/components 中的所有元件，檢查無障礙、間距、版面配置、文案與互動問題。
稽核功能分支
依據準則審查此分支中已變更的 UI 檔案。按嚴重性分組發現，並包含修正建議。
比較實作模式
審查 app、component 與 design-system 檔案中重複出現的準則違規。識別系統性風險，並建議團隊層級的修正。
最佳實務
- 提供代表使用者流程的特定檔案或 glob 模式。
- 只允許此技能從受信任且已審查的來源擷取準則。
- 當審查涵蓋許多檔案時，要求依嚴重性分組。
避免
- 當只有一個畫面變更時，不要要求審查整個 repository。
- 不要將準則發現視為自動成立的產品需求。
- 不要擷取未經審查的準則來源，或盲目貼上遠端指示。
常見問題
此技能會審查什麼？
它會審查網頁介面檔案中的設計、UX、無障礙與準則一致性問題。
它會編輯我的程式碼嗎？
不會。除非你另外要求 agent 進行變更，否則它只會回報發現。
為什麼它需要網路存取權？
它會在審查前，從已設定的來源擷取最新的 Web Interface Guidelines。
我可以在 Codex 中使用它嗎？
可以。報告列出對 Claude、Codex 與 Claude Code 工作流程的支援。
它可以審查螢幕截圖嗎？
此技能是為檔案式審查撰寫的。螢幕截圖審查需要額外的視覺脈絡。
我該如何處理大型專案？
先從已變更的檔案或單一使用者流程開始，然後在完成高影響修正後再執行更廣泛的稽核。
開發者詳細資訊
作者
ZhanlinCui授權
MIT
作者版本
v1.0.0
Skillstore 修訂
r1
引用
88a205c7f635a966e31156313b590d59007c5caa
維護新鮮度
2026/7/18
使用量
129 次下載 · 197 次瀏覽
檔案結構
📄 SKILL.md