スキル web-design-guidelines
📦
web-design-guidelines
v1.0.0 コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス
Webガイドラインに照らしたUIレビュー
UIレビューでは、アクセシビリティやインタラクションの詳細が見落とされることがあります。このスキルは、フロントエンドファイルを現在の Vercel Web Interface Guidelines と照合し、実用的な修正を報告します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "web-design-guidelines" from https://skillstore.io/skills/supercent-io-web-design-guidelines.md and its manifest at https://skillstore.io/api/skills/supercent-io-web-design-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「web-design-guidelines」を使用しています。 UIガイドライン上の問題について、ボタンコンポーネントをレビューしてください。
期待される結果:
- src/components/Button.tsx:15 - アイコンのみのボタンにはアクセシブルな名前が必要です。
- src/components/Button.tsx:32 - キーボードユーザー向けのフォーカスインジケーターがありません。
「web-design-guidelines」を使用しています。 チェックアウトフローのアクセシビリティとUXの問題をチェックしてください。
期待される結果:
- src/features/checkout/Modal.tsx:42 - ダイアログは開いている間、フォーカスを内部に保持する必要があります。
- src/features/checkout/Form.tsx:88 - エラーメッセージは関連するフィールドに紐付ける必要があります。
「web-design-guidelines」を使用しています。 リリース前にホームページを監査してください。
期待される結果:
- src/pages/Home.tsx:8 - メインコンテンツには明確なランドマークを使用する必要があります。
- src/pages/Home.tsx:27 - 主要アクションには表示されるフォーカス状態が必要です。
セキュリティ監査
中リスクv5 • 2026/7/7 バージョン別レポートを開く
Most command and filesystem alerts are false positives from Markdown code fences, inline examples, and related-skill links. The skill does require unpinned WebFetch access to GitHub on each review, which creates a remote content trust risk. No credential access, shell execution, or prompt injection attempt was found.
2
スキャンされたファイル
163
解析済み行数
3
レビュー項目
0
誤検知を無視
確認済みのセキュリティ上の懸念 (1)
中
Unpinned Remote Instructions Control Review Behavior
SKILL.md tells the agent to fetch fresh guidelines and says the fetched content contains rules and output format instructions. A changed or compromised remote file could alter the review behavior.
The instructions explicitly require remote fetching and applying all fetched rules. The risk depends on remote content changing, so confidence is high for exposure but not for active malicious intent.
機能レビュー項目 (3)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
低
Hardcoded URL
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
The skill instructs the agent to fetch this unpinned external GitHub raw URL before each review. That is real network behavior, although no secret data is sent.
低
Hardcoded URL
WebFetch URL: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
The skill explicitly instructs WebFetch to retrieve this unpinned GitHub raw URL. That is real network behavior and a remote content trust risk.
低
Hardcoded URL
1,Fetch Guidelines,WebFetch URL:https://raw.githubusercontent.com/vercel-labs/web-interface-guidelin
The compact skill metadata repeats the WebFetch instruction to the same unpinned GitHub raw URL. This is real external network behavior but limited to fetching public guidelines.
リスク要因
⚙️ 外部コマンド (17)
🌐 ネットワークアクセス (4)
📁 ファイルシステムへのアクセス (2)
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/supercent-io-web-design-guidelines?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/supercent-io-web-design-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-web-design-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/supercent-io-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形式の引用
supercent-io. (2026). web-design-guidelines security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5BibTeX形式の引用
@techreport{supercent-io-supercent-io-web-design-guidelines-2026,
author = {supercent-io},
title = {web-design-guidelines security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/supercent-io-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: "supercent-io"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5"
identifiers:
- type: other
value: "skillstore:supercent-io-web-design-guidelines:audit:5"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 6 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコアが最高
作者 / ソース Skillstore スコア 証拠の信頼度 Skillstore 利用状況 更新済み
vercel-labs 推奨
vercel-labs-web-design-guidelines
Skillstore スコア 73
証拠の信頼度 高
Skillstore 利用状況 59
更新済み
2026-09-09
zhanlincui-web-design-guidelines
Skillstore スコア 72
証拠の信頼度 高
Skillstore 利用状況 142
更新済み
2026-09-09
supercent-io 現在
supercent-io-web-design-guidelines
Skillstore スコア 71
証拠の信頼度 高
Skillstore 利用状況 60
更新済み
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
100
保守性
87
コンテンツ
69
コミュニティ
83
仕様準拠
作成できるもの
プルリクエストのUI変更をレビューする
レビュー前に、変更されたコンポーネントのガイドライン、アクセシビリティ、UX上の問題をチェックします。
デザインシステムコンポーネントを監査する
共有コンポーネント全体に繰り返し現れるインターフェース上の問題を見つけ、修正の優先順位を文書化します。
アクセシビリティレビュー用のメモを準備する
フォーカス、ラベル、ランドマーク、インタラクションの問題を、明確なファイル参照付きで特定します。
これらのプロンプトを試す
1つのコンポーネントをレビューする
src/components/Button.tsx のUIコードをレビューしてください。ファイルと行番号の参照付きでガイドライン上の問題を報告し、その後修正案を提案してください。
機能フォルダを監査する
src/features/checkout/**/*.tsx のアクセシビリティとUXをチェックしてください。キーボード、フォーカス、ラベル、レイアウトの一貫性に影響する問題を優先してください。
繰り返し発生するデザイン上の問題を見つける
src/components/**/*.tsx で繰り返し発生している Web Interface Guidelines 違反を監査してください。検出事項をパターン別にグループ化し、代表的なファイル位置を含めてください。
リリース監査を準備する
src/pages/**/*.tsx と src/components/**/*.tsx に対して最終的なUIガイドラインレビューを実行してください。重大な問題、回帰リスク、簡潔な修正方針に重点を置いてください。
ベストプラクティス
- 検出事項の精度を保つため、小さなファイルグループをレビューします。
- 各監査の前にガイドラインソースを取得するか固定します。
- 報告された各問題について修正案を求めます。
回避
- スコープを指定せずに、リポジトリ全体を1つのプロンプトで監査しないでください。
- 引用されたファイルを確認せずに、ガイドライン上の検出事項を受け入れないでください。
- 最新のルールが重要な場合に、古いガイドライン文書を使用しないでください。
よくある質問
このスキルはUIファイルを編集しますか？
いいえ。別途変更を依頼しない限り、ファイルをレビューして検出事項を報告します。
どのフレームワークをレビューできますか？
React、Vue、Svelte、HTML、CSS、SCSS、TypeScript、JavaScriptファイルをレビューできます。
インターネットアクセスは必要ですか？
このスキルは、レビュー前に Vercel のガイドラインソースを取得するように設計されています。
アクセシビリティをチェックできますか？
はい。取得したガイドラインと目に見えるファイル上の根拠で扱われているアクセシビリティ上の問題を指摘できます。
どのような出力を期待すべきですか？
ファイル位置、問題の説明、修正案を含む簡潔な検出事項が出力されると考えてください。
デザインレビューの代替になりますか？
いいえ。ガイドライン上の問題を見つける助けにはなりますが、人間によるデザインレビューやユーザーテストの代替にはなりません。
開発者情報
作成者
supercent-ioライセンス
MIT
作者バージョン
v1.0.0
Skillstore リビジョン
r1
リポジトリ
https://github.com/supercent-io/skills-template/tree/main/.agent-skills/web-design-guidelines/参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/18
利用状況
58 ダウンロード · 125 閲覧
ファイル構成
📄 SKILL.md