mcpField
R
responsive-layout-math

responsive-layout-math

github.com/lvtd-llcデザイン・UI143 回インストール7 週間前に更新
リポジトリ

responsive-layout-math について

デザイナーや開発者向けに、比例と上限・下限に基づく数式からレスポンシブ CSS レイアウトを導くスキルです。実装やデバッグに使える資料と手順を備えています。

主な機能

  1. 01流動的なレイアウト数式を導出
  2. 02比例に基づく上限と下限を設定
  3. 03CSS の実装パターンを活用
  4. 04例とチェックリストを参照
  5. 05レイアウトのデバッグ手順に沿って進行

活用シーン

  1. 01任意のブレークポイントを導出値に置き換え
  2. 02流動的なレスポンシブレイアウトを実装
  3. 03レイアウト CSS を確認またはリファクタリング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/lvtd-llc/skills --skill responsive-layout-math

インストール後、Claude Code で/responsive-layout-mathを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

guidelines.md
agents/
openai.yaml
references/
source-map.md
references/fluid-layouts/
checklist.md
examples.md
knowledge.md
patterns.md
rules.md
workflows/
design-fluid-layout.md

詳細

レスポンシブレイアウトの計算

固定レイアウトの意図を、比例的で、範囲が定められ、テスト可能なレスポンシブ CSS に変換するには、このスキルを使用してください。任意のブレークポイント値を選ぶのではなく、数式を導き出す必要があるタスクで特に役立ちます。

クイックスタート

  1. guidelines.md を読み、関連するファイルを必要最小限に絞ります。
  2. 実装上の判断には references/fluid-layouts/rules.md を読み込みます。
  3. コードを編集するときは references/fluid-layouts/examples.md を読み込みます。
  4. 複数ステップにわたる導出やデバッグには workflows/design-fluid-layout.md を使用します。

目次

リソース目的
guidelines.mdタスクに適したリファレンスファイルを案内します
references/source-map.md書籍の出典と章・節の対応関係を示します
references/fluid-layouts/knowledge.md基本概念と用語を説明します
references/fluid-layouts/rules.md実践的なルール、ガイドライン、例外を説明します
references/fluid-layouts/examples.md不適切な例・適切な例とリファクタリングの手法を示します
references/fluid-layouts/patterns.md再利用可能な数式と実装パターンを示します
references/fluid-layouts/checklist.mdレビューチェックリストと注意すべき兆候を示します
workflows/design-fluid-layout.mdステップごとのワークフロー

出典

Paul McFedries 著『Math for Web Design』第 6 章「レスポンシブデザインの数学」をもとにしています。 出典の引用は references/source-map.md で管理しています。

コメント

Markdown 対応