css-grid-math について
CSS Gridを座標とトラックサイズのシステムとして考えるためのスキルです。レイアウト計算や実装判断、デバッグを、参照資料とワークフローで支援します。
主な機能
- 01アイテムの配置とトラックサイズを計算
- 02フレキシブルトラックのサイズ配分を説明
- 03タスクに合う参考資料を案内
- 04デバッグ手順と例を提供
活用シーン
- 01グリッドアイテムの配置を把握
- 02フレキシブルトラックの幅の問題を調査
- 03レイアウト編集時にグリッドの規則を適用
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/css-grid-mathを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/grid-layout/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-grid-layout.md詳細
CSS Grid の計算
グリッドを座標とサイズ設定のシステムとして考える必要がある場合に、このスキルを使用してください。アイテムの配置場所やトラックが領域をどのように分割するか、また、フレキシブルなトラックが期待どおりの幅にならない理由を計算するのに役立ちます。
クイックスタート
guidelines.mdを読み、関連する最小限のファイルセットを選択します。- 実装上の判断には
references/grid-layout/rules.mdを読み込みます。 - コードを編集する場合は
references/grid-layout/examples.mdを読み込みます。 - 複数ステップの導出やデバッグには
workflows/debug-grid-layout.mdを使用します。
内容
| リソース | 目的 |
|---|---|
guidelines.md | タスクに適したリファレンスファイルを案内します |
references/source-map.md | 書籍の出典と章・節の対応関係を示します |
references/grid-layout/knowledge.md | 基本概念と用語を説明します |
references/grid-layout/rules.md | 実践的なルール、ガイドライン、例外を説明します |
references/grid-layout/examples.md | 悪い例・良い例とリファクタリングの方針を示します |
references/grid-layout/patterns.md | 再利用できる数式と実装パターンを示します |
references/grid-layout/checklist.md | レビューチェックリストと注意すべき点を示します |
workflows/debug-grid-layout.md | 手順に沿ったワークフロー |
出典
Paul McFedries 著 Math for Web Design の第4章「CSS Grid の計算」をもとにしています。
引用の詳細は references/source-map.md で管理しています。
コメント
Markdown 対応