css-math-units について
CSSの値が計算済みのレイアウト値になる過程を追うためのリファレンススキルです。単位変換や継承サイズ、`calc()`、カスタムプロパティの計算、ボックスモデルのサイズを扱う開発者向けです。
主な機能
- 01CSSの単位変換
- 02継承サイズの計算
- 03`calc()`とカスタムプロパティの計算
- 04ボックスモデルのサイズ指針
- 05デバッグ手順とチェックリスト
活用シーン
- 01CSS値から計算後のサイズを追跡
- 02入れ子や継承による寸法のデバッグ
- 03CSS計算の変更をレビュー
- 04再利用可能なサイズ式を適用
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/css-math-unitsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/css-calculations/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-css-calculation.md詳細
CSSの数学単位
このスキルを使うと、CSSの値がどのように計算済みのレイアウト値になるかを追跡できます。単位変換、継承されたサイズの乗算、calc式、カスタムプロパティの計算、ボックスモデルのサイズ設定に役立ちます。
クイックスタート
guidelines.mdを読んで、関連するファイルを最小限に絞ります。- 実装上の判断には
references/css-calculations/rules.mdを読み込みます。 - コードを編集する際は
references/css-calculations/examples.mdを読み込みます。 - 複数段階の導出やデバッグには
workflows/debug-css-calculation.mdを使います。
内容
| リソース | 目的 |
|---|---|
guidelines.md | タスクに適した参考ファイルを案内します |
references/source-map.md | 書籍の出典と章・節の対応関係を示します |
references/css-calculations/knowledge.md | 中核となる概念と用語を説明します |
references/css-calculations/rules.md | 実用的なルール、ガイドライン、例外を説明します |
references/css-calculations/examples.md | 不適切な例と適切な例、およびリファクタリングの手法を紹介します |
references/css-calculations/patterns.md | 再利用可能な数式と実装パターンを紹介します |
references/css-calculations/checklist.md | レビュー用チェックリストと注意点をまとめます |
workflows/debug-css-calculation.md | 手順ごとのワークフローを説明します |
出典
Paul McFedries著『Math for Web Design』第3章「CSSの数学の基礎」をもとにしています。
引用情報はreferences/source-map.mdで管理されています。
コメント
Markdown 対応