菜单
CSSのレイアウト課題に対し、中央配置・レスポンシブグリッド・ページ骨格・サイズ制御のパターンを選定し適用する。Flexbox、Grid、clamp、aspect-ratio、コンテナクエリを扱う。中央配置、スティッキーフッター、オーバーレイ、カードグリッド、幅制約の実装時に使う。アニメーション、タイポグラフィ刻度、カラーテーマ、JavaScript主導のレイアウトには使わない。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | css-layout |
| description | CSSのレイアウト課題に対し、中央配置・レスポンシブグリッド・ページ骨格・サイズ制御のパターンを選定し適用する。Flexbox、Grid、clamp、aspect-ratio、コンテナクエリを扱う。中央配置、スティッキーフッター、オーバーレイ、カードグリッド、幅制約の実装時に使う。アニメーション、タイポグラフィ刻度、カラーテーマ、JavaScript主導のレイアウトには使わない。 |
課題を分類し、名前付きパターンと核心CSSへ落とし込む。詳細は
references/をオンデマンドで読む。
clamp や aspect-ratio、コンテナクエリでサイズや見え方を制御するときユーザーの要求を次の分岐に当てはめる。迷ったら Step 4 の即決表を先に当てる。
何を実現したい？
│
├─ 要素を中央に配置したい
│ ├─ 単一要素 → Super Centered または Autobot
│ ├─ 複数要素を縦に → Gentle Flex
│ ├─ グループ全体を → Content Center
│ └─ オーバーレイ／モーダル → Pop n' Plop
│
├─ レスポンシブなグリッド／カード配置
│ ├─ メディアクエリなしで列を組む → RAM
│ ├─ 折り返して縦に積む → Deconstructed Pancake
│ └─ コンテナ幅に応じてスタイルを切る → Container Query
│
├─ ページ全体の骨格
│ ├─ Header + Main + Footer → Pancake Stack
│ └─ サイドバー込みの定番グリッド → Holy Grail
│
└─ サイズを制御したい
├─ 幅の最小・最大・希望値 → Clamping（clamp）
└─ 縦横比を固定 → Aspect Ratio
分類結果に応じて、次の いずれかだけ を読む（トークン節約のため一ファイルずつ）。
| 分類 | 読むファイル |
|---|---|
| 中央配置 | references/centering.md |
| レスポンシブ | references/responsive.md |
| ページ構造 | references/page-structure.md |
| コンポーネント寸法 | references/component.md |
| やりたいこと | 最初に試すパターン |
|---|---|
| とにかく中央に置きたい | Super Centered（place-items: center） |
| カードを並べたい | RAM（repeat(auto-fit, minmax(...))） |
| フッターを下に固定したい | Pancake Stack（grid-template-rows: auto 1fr auto） |
| 幅を柔軟に制限したい | Clamping（clamp(min, preferred, max)） |
references/antipatterns.md に該当する実装になっていないか確認する。references/quick-reference.md を開く。references/examples.md を読む。references/centering.md — 中央配置パターン（5種）references/responsive.md — レスポンシブパターン（4種）references/page-structure.md — ページ構造パターン（2種）references/component.md — コンポーネント寸法（1種）references/quick-reference.md — 全パターン早見表references/antipatterns.md — 避けるべき実装references/examples.md — 実装例references/quick-reference.md の表で最も近い行を選び、そのパターンの詳細ファイルを読む。references/antipatterns.md と該当パターンの Gotchas を再確認する。親の display／min-height／overflow が前提を壊していないか見る。python3 skill-creator/scripts/validate-metadata.py --name "css-layout" --description "[新しい説明文]"
skill-creator/references/checklist.md の各項目に照らして差し戻し原因を特定する。description を更新する場合は、必ず上記 validate-metadata.py を通す。三人称・1024文字以内・名前とディレクトリ名 css-layout の一致を満たす。
日本語の文章で文と文のつながりを点検し、直前の文の不足、常識的な連続性、読者視点から論理のほころびを防ぐ。エッセイ、記事、レポート、解説文の執筆・推敲・レビューで使う。法的判断、数学的証明、事実確認のみ、文法校正のみ、意図的なシュール表現や断片的表現の矯正には使わない。
日本語の文章を、誇張、借り物の美辞麗句、過剰な謙遜を避け、実感に近い等身大な表現へ整える。エッセイ、プロフィール、商品説明、自己紹介、note、スピーチ、振り返り文の推敲で使う。法的文書、逐語訳、意図的に言葉を高める詩、学術的な出典確認、事実検証には使わない。
macOSのスクリーンショットを、screencaptureと補助CLIで取得する。画面全体、ウィンドウ指定、選択範囲、タイマー撮影、クリップボード保存に対応する。macOS上でエージェントが再現可能なパスへスクリーンショットを保存したい場合に使う。OCR、画像編集、動画収録、macOS以外のスクリーンショット取得には使わない。
文章、記事、レポート、企画書の論理破綻をレビューし、論点、必要情報、推論、結論と根拠の構造を確認する。Why So、So What、MECEの観点で飛躍、矛盾、論点ずれ、根拠不足を検出する。公開前や改稿前に文章の筋道を点検するときに使う。単なる校正、文体調整、事実確認のみ、法的助言、数学的証明の厳密検証には使わない。
UI 変更や状態遷移を伴う PR に、E2E テスト計画・操作後スクリーンショット・検証結果・検証データの副作用を確認エビデンスとして残す。 gh image で画像をアップロードし、Chrome DevTools MCP で画面を操作・撮影し、gh でテスト計画と結果を PR コメントへ投稿する際に使用。 「PR にスクショを貼る」「UI エビデンスを残す」「E2E 確認結果を PR にまとめる」「レビュー用に画面の証跡を添付」と依頼された時に適用。 内部ロジックのみの変更や、既存の自動テストで担保できる変更には使わない。コミット作成や PR 本体の作成フローには使わない。
WXTを使ったブラウザ拡張開発を支援する。プロジェクト調査、entrypoint設計、manifestと権限変更、content script UI、storage、messaging、build、zip、ブラウザ検証を扱う。WXTプロジェクトの作成、変更、監査、デバッグ時に使う。非WXT拡張、汎用フロントエンド、拡張ストア審査には使わない。