web-design-guidelines（Webデザインガイドライン）

このSkillでできること

✓Webインターフェースの設計方針を確認する
✓WCAG 2.2に基づくアクセシビリティ監査を行う
✓レスポンシブレイアウトやコンテナクエリを検討する
✓HTML、CSS、Webコンポーネントの実装をレビューする

使い方

STEP 1

対象のHTML、CSS、Webコンポーネント、UIコードを提示する

STEP 2

アクセシビリティ、レスポンシブ対応、Webパフォーマンスなど確認観点を指定する

STEP 3

セマンティックHTML、フォーム入力型、フォーカス管理などの改善案を求める

STEP 4

指針に沿った問題点、理由、修正方針を整理してもらう

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/ehmo/platform-design-skills

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このWeb UIコードをWebデザインガイドラインに沿ってレビューしてください。WCAG 2.2、セマンティックHTML、キーボード操作、レスポンシブ対応、フォーム入力型、パフォーマンスの観点で、問題点と修正方針を示してください。

出力例を見る

問題点: モーダル内のキーボードフォーカス管理を確認する必要があります。修正方針: フォーカス可能要素を対象にフォーカストラップを実装し、キーボード操作時にフォーカスがモーダル外へ移動しないようにします。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報検出あり

検出根拠を見る

network: The Psychology of Human-Computer Interaction* (1983) — https://archive.org/details/psychologyofhuma0000card - Allen Newell and Stuart K. Card, *Prospects
network: el Human Processor summary and operating principles) — https://iiif.library.cmu.edu/file/Newell_box00042_fld03533_doc0001/Newell_box00042_fld03533_doc000
credential: te` / `time` / `datetime-local` | Temporal values | | `password` | Passwords (triggers password manager) | | `text` with `inputmode="numeric"` | Numeric
credential: | Temporal values | | `password` | Passwords (triggers password manager) | | `text` with `inputmode="numeric"` | Numeric data without spinners (PINs, zip

web-design-guidelines

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

aigo-builder

shipping-artifacts

cs-reference