flexbox-math について
一次元レイアウトを扱う開発者向けに、Flexboxのサイズ配分を計算するスキルです。基準サイズ、余剰スペース、伸長・縮小の配分、制約によるクランプを、ルールや例、デバッグ手順とともに扱います。
主な機能
- 01Flexbox配分の概念
- 02ルールと実装上の例外
- 03コード例
- 04再利用可能な数式パターン
- 05段階的なデバッグ手順
活用シーン
- 01Flexboxレイアウトの余剰スペース計算
- 02伸長・縮小配分のデバッグ
- 03サイズ制約とクランプの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/flexbox-mathを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/flex-distribution/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-flex-distribution.md詳細
Flexbox の計算
一次元レイアウトの分配にこのスキルを使用します。基準サイズ、余剰スペース、拡大分の割り当て、縮小分の割り当て、制約によるクランプを決定する計算に焦点を当てています。
クイックスタート
guidelines.mdを読み、関連するファイルを必要最小限に絞ります。- 実装に関する判断には、
references/flex-distribution/rules.mdを読み込みます。 - コードを編集する際は、
references/flex-distribution/examples.mdを読み込みます。 - 複数段階にわたる導出やデバッグには、
workflows/debug-flex-distribution.mdを使用します。
内容
| リソース | 目的 |
|---|---|
guidelines.md | タスクに適したリファレンスファイルを案内します |
references/source-map.md | 書籍の出典と章・節の対応関係 |
references/flex-distribution/knowledge.md | コアコンセプトと用語 |
references/flex-distribution/rules.md | 実践的なルール、ガイドライン、例外 |
references/flex-distribution/examples.md | 悪い例／良い例とリファクタリングの方針 |
references/flex-distribution/patterns.md | 再利用可能な数式と実装パターン |
references/flex-distribution/checklist.md | レビューチェックリストと注意すべき点 |
workflows/debug-flex-distribution.md | 段階的なワークフロー |
出典
Paul McFedries 著『Math for Web Design』第5章「Flexbox math」に基づいています。
出典の引用は references/source-map.md で管理しています。
コメント
Markdown 対応