web-design-guidelines（Webプラットフォームデザインガイドライン）

このSkillでできること

✓セマンティックHTMLとアクセシビリティ監査
✓レスポンシブ設計と入力形式の確認
✓見出し、メタ情報、状態管理のレビュー
✓アニメーションやコード分割の性能確認

使い方

STEP 1

対象ページと利用者の状態を確認する

STEP 2

WCAGとWeb標準に沿って構造を監査する

STEP 3

重要度の高い問題から修正案を出す

STEP 4

実機や実URLで挙動を確認する

Skillのインストール

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

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

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

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

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

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

このWeb画面をWCAG 2.2、キーボード操作、レスポンシブ表示、性能の観点で監査してください。

出力例を見る

アクセシビリティ、レスポンシブ、性能、SEOの問題と優先順位。

安全性チェック

自動解析による参考情報です。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

search-console

executive-resume-writer

seo-geo