このスキルは、Vercel の Web インターフェースガイドラインに対して Web インターフェースを自動的に監査し、アクセシビリティの問題、UX 上の問題、およびデザインコンプライアンス違反を UI コードから特定します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-design-guidelines」を使用しています。 Use web-design-guidelines to review src/components/Header.tsx
期待される結果:
- src/components/Header.tsx:15 - Missing ARIA label on navigation element
- src/components/Header.tsx:23 - Color contrast ratio below 4.5:1 for link text
- src/components/Header.tsx:31 - Use semantic <button> instead of <div> for actions
「web-design-guidelines」を使用しています。 Use web-design-guidelines to audit **/*.html
期待される結果:
- index.html:42 - Form labels must be associated with inputs via for attribute
- index.html:58 - Images require alt text for accessibility
- about.html:12 - Heading levels should not skip (h1 -> h3)
セキュリティ監査
安全Static analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
品質スコア
作れるもの
アクセシビリティ監査
React コンポーネントまたは HTML ファイルを WCAG 準拠、ARIA の使用、カラーコントラストの問題についてレビュー
デザインシステムコンプライアンス
UI コンポーネントが確立されたデザインパターンと Vercel のインターフェースガイドラインに従っているかを確認
ローンチ前のコードレビュー
デプロイ前にすべての UI ファイルを最終監査し、アクセシビリティや UX の問題を見逃さない
これらのプロンプトを試す
Use the web-design-guidelines skill to review my UI code in src/components/Button.tsx for accessibility and design compliance.
Use web-design-guidelines to audit all files matching **/*.tsx in the components directory for interface guideline violations.
Run web-design-guidelines on the entire src directory to check all UI code against Vercel's Web Interface Guidelines.
I want to review my UI code. Use web-design-guidelines and ask me which files to review.
ベストプラクティス
- 関連ファイルにレビューを集中させるため、正確なファイルパスまたは glob パターンを指定する
- file:line 形式の結果を確認し、重大度の順に問題を修正する
- 最新のルールを取得するため、各レビューの前に新鲜的なガイドラインを取得する
回避
- どのファイルをレビューするかを指定せずにスキルを実行する
- アクセシビリティの発見事項を無視する - これは障害を持つユーザーに影響する
- スキルがすべての問題を発見すると想定する - これは手動テストの代替ではなく補助ツールである