responsive-layout-review について
デザインチーム向けのレスポンシブレイアウトレビュー用スキルです。コンテンツとタスクに基づいて各ビューポートの状態を評価し、アクセシビリティにも配慮したブレークポイント戦略、問題点、受け入れ確認項目を作成します。
主な機能
- 01コンテンツ階層と主要タスクの評価
- 02狭幅から広幅までのレイアウト確認
- 03ナビゲーション、フォーム、メディアの確認
- 04ブレークポイント戦略と確認項目の作成
- 05キーボード操作とズームの維持
活用シーン
- 01各ビューポートでのレイアウトレビュー
- 02フォームやナビゲーションの問題発見
- 03レスポンシブ受け入れ確認の定義
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/responsive-layout-reviewを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/responsive-layout-rules.md
詳細
レスポンシブレイアウトのレビュー
任意のブレークポイントではなく、意図に応じてレイアウトを適応させるには、このスキルを使用します。
ワークフロー
- コンテンツの階層、主なタスク、サポートするビューポート／デバイスの種類を特定します。
references/responsive-layout-rules.mdを読みます。- レイアウトの状態（コンパクト、中程度、ワイド、高密度、キーボード操作、ズーム、幅縮小）を確認します。
- ナビゲーション、テーブル、フォーム、モーダル、メディア、空／エラー状態を確認します。
- ブレークポイントの方針、問題点、受け入れ確認項目を提示します。
使用しない場合
- このスキル固有の成果物の要件がなくてもベースモデルが対応できる一般的なアドバイスには使用しないでください。
ガードレール
- ブレークポイントは、デバイス名だけで決めず、コンテンツに負荷がかかる箇所に合わせます。
- 小さな画面で重要な操作を非表示にしないでください。
- キーボード操作、フォーカス、ズーム、スクリーンリーダーの使いやすさを維持してください。
出力形式
Surface:
Primary task:
Responsive strategy:
- <layout state> -> <behavior>
Findings:
- <rule id> <issue> -> <fix>
Acceptance checks:
- <viewport/state check>
コメント
Markdown 対応