css-layout - SKILL.md Agent Skill

name: css-layout description: >- CSSのレイアウト課題に対し、中央配置・レスポンシブグリッド・ページ骨格・サイズ制御のパターンを選定し適用する。Flexbox、Grid、clamp、aspect-ratio、コンテナクエリを扱う。中央配置、スティッキーフッター、オーバーレイ、カードグリッド、幅制約の実装時に使う。アニメーション、タイポグラフィ刻度、カラーテーマ、JavaScript主導のレイアウトには使わない。

CSSレイアウト・パターン選択

課題を分類し、名前付きパターンと核心CSSへ落とし込む。詳細は references/ をオンデマンドで読む。

いつ使うか

要素の中央配置で手段が定まらないとき
レスポンシブなグリッドやカード列を組むとき
Header / Main / Footer やサイドバーを含むページ骨格を設計するとき
clamp や aspect-ratio、コンテナクエリでサイズや見え方を制御するとき

使わない場合

アニメーション・トランジション主体の演出
フォントサイズスケールや行間などタイポグラフィ専用の調整
テーマカラー／デザイントークンだけの変更
レイアウトを JavaScript で測り回す実装方針（仮想リスト等）が主題のとき

手順

1. 課題を分類する

ユーザーの要求を次の分岐に当てはめる。迷ったら 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

2. 詳細を読み込む

分類結果に応じて、次の いずれかだけ を読む（トークン節約のため一ファイルずつ）。

分類	読むファイル
中央配置	`references/centering.md`
レスポンシブ	`references/responsive.md`
ページ構造	`references/page-structure.md`
コンポーネント寸法	`references/component.md`

3. 実装する

参照ファイル内の When（適用条件）が今回の要件と一致することを確認する。
核心コードをそのまままたは変数名・寸法だけ差し替えて適用する。
同ファイルの Gotchas（注意点）をすべて確認する。

4. 即決表（迷い回避）

やりたいこと	最初に試すパターン
とにかく中央に置きたい	Super Centered（`place-items: center`）
カードを並べたい	RAM（`repeat(auto-fit, minmax(...))`）
フッターを下に固定したい	Pancake Stack（`grid-template-rows: auto 1fr auto`）
幅を柔軟に制限したい	Clamping（`clamp(min, preferred, max)`）

5. 検証する

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 が前提を壊していないか見る。
フロントマター（name / description）を変更したとき: リポジトリの skills ルートで次を実行し、成功まで文言を直す。

python3 skill-creator/scripts/validate-metadata.py --name "css-layout" --description "[新しい説明文]"

スキル構造の監査: skill-creator/references/checklist.md の各項目に照らして差し戻し原因を特定する。

メタデータ検証（開発者向け）

description を更新する場合は、必ず上記 validate-metadata.py を通す。三人称・1024文字以内・名前とディレクトリ名 css-layout の一致を満たす。