ホーム / 全スキル / デザイン＆モーション / web-design-guidelines
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · vercel-labs/agent-skills

web-design-guidelines

Web Interface Guidelines への準拠について UI コードをレビューします。「UI をレビューして」「アクセシビリティをチェックして」「デザインを監査して」「UX をレビューして」「サイトがベストプラクティスに従っているか確認して」と依頼された場合に使用します。

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author vercel-labsGitHub vercel-labs/agent-skills ↗Stars 30898License 无 LICENSE 文件：agent-skills 仓库 HEAD 树 0 个 license 命中（git ls-tree 复核），gh api license=null。注意：其运行时规则源仓库 vercel-labs/web-interface-guidelines 为 MITCommit 063bee94c3
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

薄いラッパー型 skill: ディレクトリ内の唯一のファイルは 1.2KB の SKILL.md であり、自身にはルール定義を含まず、すべてのルールと出力形式の指示を実行時にリモートから取得します。

skills/web-design-guidelines/SKILL.md（git ls-tree -r HEAD 该路径仅此一文件）
Fetch fresh guidelines before each review: ``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ``` Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
skill ディレクトリには references/ やルールデータが存在しません。「ルール＋出力形式」というナレッジ本体は別リポジトリの command.md に外出しされており、SKILL.md は単なるローダーとして機能します。

動作メカニズム = 4段階の純粋なプロンプトオーケストレーション: ガイドライン取得 → ユーザー指定ファイルの読み込み → ルールとの逐条比較 → 簡潔な file:line 形式で出力。

skills/web-design-guidelines/SKILL.md
1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format
スクリプトや実行可能コードは一切なし。すべてプロンプトに従ってエージェントが実行します。対象ファイルの範囲はユーザーが <file-or-pattern>（frontmatter の argument-hint）で指定し、未指定の場合は聞き返します。

実際の振る舞いを決定するリモートの command.md は、エージェントへの完全な指示書（$ARGUMENTS プレースホルダー、13組のルール、アンチパターンリスト、出力形式の例を含む）であり、main ブランチからバージョン固定なしで取得されます。

运行时拉取内容 https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md（2026-09-06 实读；源仓库 vercel-labs/web-interface-guidelines，MIT，846★，pushed 2026-08-18）
--- description: Review UI code for Vercel Web Interface Guidelines compliance argument-hint: <file-or-pattern> --- # Web Interface Guidelines Review these files for compliance: $ARGUMENTS Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
SKILL.md と command.md の2層の frontmatter は同型（description/argument-hint が一致）です。SKILL.md がエージェントをリモート指示へと誘導し、リモート指示側に Accessibility/Focus/Forms/Animation/Typography/…/Hydration/Content & Copy など13組・約100項目以上のルールとアンチパターン一覧が含まれます。

レビュー粒度: ファイル単位でグループ化し、行番号を指定（VS Code でクリック可能）、問題のないファイルは明示的に ✓ pass と表記し、問題がなければ説明も前置きも出力しません。

同上 command.md（运行时拉取）
Group by file. Use `file:line` format (VS Code clickable). Terse findings. ```text ## src/Button.tsx src/Button.tsx:42 - icon button missing aria-label … ## src/Card.tsx ✓ pass ```
出力形式の指示もリモート側（"Output findings using the format specified in the guidelines"）に記載されており、skill ディレクトリ内には含まれません。

2コア機能

01UI コードの準拠性レビュー（アクセシビリティ、パフォーマンス、UX、アニメーション、i18n、hydration など13組のルールを逐条検証）
02レビュー前の最新ガイドラインリアルタイム取得（実行ごとに毎回 main ブランチを取得し、skill のリリースサイクルから独立）
03アンチパターンの明示的検出（user-scalable=no、onPaste preventDefault、transition:all、代替のない outline-none、div onClick など14種）
04簡潔な file:line 構造化出力（ファイル別グループ化、クリック可能な行番号、通過を表す ✓ pass、前置きなし）
05レビュー範囲の制御: ファイルまたは glob 引数を受け付け、未指定時はリポジトリ全体をデフォルトスキャンせずユーザーに確認を要求
06特定優先・ノイズ低減の修正提案ルール（「State issue + location」を原則とし、修正方法が自明でない場合のみ説明を付与）

3外部依存関係

KindDependency / Endpoint
network审查规则源（行为定义体）：WebFetch 每次审查拉取 vercel-labs/web-interface-guidelines@main 的 command.md
cliWebFetch（宿主内置抓取工具，SKILL.md 点名要求使用）——非 skill 自带/安装的 CLI
network规则仓库本体（运行时内容上游）：vercel-labs/web-interface-guidelines

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
  • 网络端点: 外部ネットワークアクセスの宣言: レビュー実行ごとに WebFetch で GET https://raw.githubusercontent.com/vercel-labs/web-interf を実行
監査ノート： 唯一の外部アクションは、レビューごとの公開 GitHub raw エンドポイントへの通常フェッチ（公式 vercel-labs リポジトリ、送信先は予測可能、認証情報の関与なし）であり、🟡 基準に合致します。スクリプト実行、認証情報読み取り、ローカル書き込みはありません。注意点として、振る舞いの定義体（ルール＋出力形式）が完全に外部化されておりバージョン固定されていないため、内容のドリフトや上流の改ざんが skill の挙動に直接影響します（これはコード実行面ではなくプロンプト信頼面の課題です）。また、agent-skills リポジトリ自体に明示的な LICENSE 表記がない点にも留意が必要です。

5二重目の独立検証

  • [ok] 『目录仅 SKILL.md 一个文件』 — git ls-tree -r HEAD skills/web-design-guidelines/ 仅返回 SKILL.md；ls -la 亦确认。补充发现：skills/web-design-guidelines.zip 是仓库级跟踪的兄弟文件（不在子目录内），其内 SKILL.md 为过期版（2026-01-14，1183B，缺 metadata 块）
  • [ok] SKILL.md 引用真实性（How It Works / URL / WebFetch / Usage 段落） — 全文重读（1.2KB 全量），md5 确认工作副本==HEAD 版本（98087aed…），各引用段落逐字吻合
  • [ok] 『规则+输出格式在远端 command.md』是否成立、有无夸大 — 独立 read 拉取 raw.githubusercontent.com 端点成功：内容为完整指令（$ARGUMENTS 占位、13 组规则、14 类反模式、file:line 输出示例、✓ pass 标记），与 SKILL.md 描述一致；前端 description 声明『100+ 规则』（README.md:44 亦称 100+ rules）与实际规则面相符
  • [ok] 外部依赖仓库归属与许可 — gh api 复核 vercel-labs/web-interface-guidelines：确为同一组织、MIT、846★、pushed 2026-08-18；agent-skills 自身 HEAD 树无 LICENSE（ls-tree grep -ci license = 0）
  • [ok] 安全结论反例搜寻：隐藏脚本 / 额外网络调用 / 本地写入 / 凭证读取 — 全树（含 zip 内）无任何代码文件；SKILL.md 全文仅一处外部动作（WebFetch 上述 URL）；无凭证/写入指令；未发现遗漏的调用点。残余面确认为『远端指令信任』与『审查代码进上下文』两类注入，均已在 injection_surface 表述
  • [ok] meta 数据（stars/last_push/license）一致性 — gh api：30898★、license null、pushed_at 2026-08-28T13:36:31Z，与 HEAD commit 063bee9 提交时间（2026-08-28T13:36:07Z，+02:00 后同刻）一致

6結論

  • 常に最新のルール: レビューのたびに main ブランチのガイドラインを再取得するため、追加・更新された Web ベストプラクティスがリリースサイクルを介さず即座に反映されます。
  • 広範かつ詳細なルール網羅性: リモートの command.md は a11y、focus、フォーム、アニメーション、タイポグラフィ、i18n、ダークモード、hydration、セーフエリアなどのロングテールをカバーし、14項目のアンチパターンリストも備えています。
  • エージェントワークフローに最適化された出力規律: クリック可能な file:line 位置指定、問題のないファイルへの明示的な ✓ pass、前置きや不要な会話文を排除した形式により、結果を直接 IDE にフィードバック可能です。
  • 極めて薄いラッパー構造による低保守コスト: スクリプトや依存関係が一切なく、振る舞いの境界（1回の GET ＋ ファイル読み込み）が明確で、監査コストがほぼゼロに抑えられます。
    • 最適な用途： 最新の Web UI ベストプラクティスに追従する必要があるコード準拠性レビューのシナリオ（React/Next.js 等のフロントエンドコードレビュー、リリース前 UI 監査）；「ルールは公式が継続保守し、skill 自体はメンテナンスフリー」を好むチーム；レビューごとのオンライン取得を許容し、完全な結果再現性を厳密には要求しない環境。
    不向きな用途： オフライン環境やバージョン固定が必須な環境（main ブランチの都度オンライン取得に依存するため）；独自の自社ルールセットや厳密な監査証跡の保存が必要な組織；「デザイン／生成」目的での利用（欠陥の指摘のみを行い、新規デザインを出力するものではありません）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-06
    Option A · Direct DownloadDownload web-design-guidelines.tar.gz
    sha256: ec370ab42a34427f…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 063bee94c3.