CSS レスポンシブ実装ルール

この skill は、レスポンシブ CSS の判断順序を揃え、不要なブレイクポイントと場当たり的な単位選択を減らすためのものです。 CSS はブラウザへの提案であり、まずは Intrinsic な適応を優先します。

この skill を使う場面

• 新規に CSS を書くとき
• 既存のレスポンシブ実装をレビューするとき
• Media Queries と Container Queries の使い分けを決めるとき
• clamp() や流動値の設計をするとき
• vw vh cqi などの単位選択を見直すとき
• AI が生成した CSS に危ないレスポンシブ実装が混ざっていないか確認するとき

最初に決めること

1. その要素は、そもそもレスポンシブにすべきか。
2. クエリなしで成立させられないか。
3. 依存先は親要素の幅か、ビューポート全体か。