Webデザインガイドライン監査
Web UIコードを、Vercel Labsが公開するWeb Interface Guidelinesの最新版で監査する。 このskillへ規則の複製を固定せず、実行時に一次情報を取得する。
対象を決める
利用者が指定したfile、directory、glob、diffを対象にする。 対象が明確でない場合は、現在の変更差分または主要なUI entrypointを確認し、監査範囲を示す。 読み取りだけを依頼された場合は修正しない。
最新規則を取得する
監査時に次の正本を取得する。
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
取得できない場合は、その事実と参照できなかった範囲を明示する。 記憶だけで「最新版に準拠」と主張しない。
監査する
対象コードへ適用可能な規則をすべて確認する。 特に次の領域を横断する。
- accessible name、semantic HTML、keyboard、focus
- form label、autocomplete、validation、error
- animation、reduced motion、compositor property
- typography、content overflow、empty state
- image dimensions、alt、lazy loading
- renderingとbundleのperformance
- navigation、URLと状態、deep link
- touch target、safe area、responsive layout
- dark mode、theme、contrast
- locale、日付、数値、RTL
- hydrationとcontrolled input
報告形式
結果だけを簡潔に報告し、導入文や総評を長く書かない。 問題ごとに次を含める。
path/to/file.tsx:42 [高] 操作名がない
icon buttonにaccessible nameがなく、支援技術から目的を判別できない。
修正: aria-labelまたは可視labelを追加する。- file pathと可能ならline numberを付ける。
- 同じ原因の反復はまとめる。
- 根拠となる規則を特定する。
- 重大度は利用不能、誤操作、性能劣化の影響から決める。
- 規則違反でない好みを必須事項として扱わない。
- 問題がなければ、その旨と監査範囲を一文で報告する。
修正を依頼された場合
- 重大度の高い問題から局所的に直す。
- 既存のdesign systemとcomponent primitiveを優先する。
- 規則に従うためだけのlibrary移行や全面改修を行わない。
- lint、typecheck、関連test、実画面を変更規模に応じて確認する。
- 修正できない問題は、制約と残る影響を報告する。
出典
- [vercel-labs/agent-skills: web-design-guidelines](https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines)
- [vercel-labs/web-interface-guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- 本文は公式skillの監査flowを日本語の参照手順へ再構成した。