makepad-2.0-layout

makepad-2.0-layout スキルの概要

makepad-2.0-layout は何に使うのか

makepad-2.0-layout スキルは、Makepad 2.0 の layout turtle モデルを扱うためのスキルです。ここでは、サイズや配置を CSS の flexbox や grid ではなく Walk と Layout で制御します。Fill、Fit、Flow.Down、spacing、padding、alignment、scroll-container の挙動を手探りで当てることなく、UI の意図をそのまま正しい Makepad の layout コードに落とし込みたいときに特に役立ちます。

どんな人がインストールすべきか

Makepad UI を作っている、Web や UI ツールから layout を移植している、あるいは widget の sizing や container の flow で何度も詰まっているなら、makepad-2.0-layout スキルをインストールしてください。画面、panel、toolbar、list、ネストした view に対して、実践的な makepad-2.0-layout usage の指針が必要な開発者には特に向いています。

何が違うのか

この makepad-2.0-layout skill の最大の違いは、一般的な UI アドバイスではなく、Makepad 固有の syntax と制約に焦点を当てていることです。採用判断で本当に重要なルール、つまり widget の size がどのように確保されるのか、container が child をどう配置するのか、scroll view が height や flow とどう連動するのかを整理して示します。だからこそ、「なぜこの view は正しくサイズ調整もスクロールもされないのか」がボトルネックになっているとき、ざっと repo を読むよりも判断材料として有用です。

makepad-2.0-layout スキルの使い方

インストールして最初に読むもの

skills の標準的なインストール手順を使ってください。たとえば、npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout です。インストール後は、まず skills/makepad-2.0-layout/SKILL.md を読み、その次に具体例が載っている references/layout-patterns.md を開いてください。この repo では、この 2 つのファイルが makepad-2.0-layout install と直後の makepad-2.0-layout usage に向けた、最も情報価値の高い出発点です。

曖昧な目的を使えるプロンプトに変える

よい入力は、画面の目的、container の種類、そして sizing の意図をきちんと書いています。たとえば「ログインページを作って」ではなく、「中央寄せの card、縦積み、固定高さの button、横幅いっぱいに広がる text field、内容に合わせて高さが決まる card を持つ Makepad 2.0 の login form を作って」と依頼します。こうすると、スキルが Fill と Fit のどちらを選ぶか、flow をどう設定するか、layout の曖昧さをどう避けるかを判断しやすくなります。

見た目より先に layout 制約を伝える

Design Implementation としてこのスキルを使うときは、最終的な構造に影響する制約から先に伝えてください。どこを stretch させるか、どこを shrink させるか、spacing をどこに置くか、content を scroll 可能にするかどうか、です。最もよくある悪い出力の原因は height の挙動が不十分にしか指定されていないこと、特に container や scroll view の中でそれが起きることです。ある section を無制限に伸ばしたくないなら、その点を明示してください。

依頼を Makepad の layout model に合わせる

makepad-2.0-layout guide は、width: Fill、height: Fit、flow: Down、spacing、padding、align、ScrollYView といった Makepad の用語で依頼すると最も効果的です。CSS から移植する場合は、CSS ルールそのものではなく、まず期待する見た目の効果を説明してから、それに対応する Makepad の layout 構造を求めてください。そうすることで変換ミスが減り、出力が turtle model に沿ったものになります。

makepad-2.0-layout スキル FAQ

このスキルは Makepad 2.0 プロジェクト専用ですか？

はい、この makepad-2.0-layout skill は Makepad 2.0 の layout 作業向けです。一般的な UI layout ヘルパーではないため、CSS や他の framework のパターンをそのまま置き換える用途には向きません。

うまく使うのに上級者である必要はありますか？

いいえ。具体的な UI の目的といくつかの制約を伝えられるなら、初心者でも使えます。このスキルが特に役立つのは、画面のおおまかな形は分かっていても、それを Makepad の layout syntax でどう表現すればよいか分からないときです。

どんなときに使わないほうがいいですか？

ビジュアルデザインだけの作業、Makepad 以外の framework、あるいは layout 行動がすでに完全に解決している問題には使わないでください。主な悩みが branding、copy、animation の timing であれば、makepad-2.0-layout guide が与える価値は、より専門的な prompt のほうが大きい場合があります。

普通の prompt より何が優れているのですか？

普通の prompt では、generic な flexbox 用語や曖昧な構造が返ってきがちです。makepad-2.0-layout スキルは、Makepad の syntax と model に合った正確な container の挙動、sizing の既定値、scroll を意識した layout の判断が必要なときに優れています。

makepad-2.0-layout スキルを改善するには

不足している寸法を最初に埋める

よりよい makepad-2.0-layout usage の結果を得るには、どの要素を固定にするか、どれを content に合わせるか、どれが余白を吸収するかを明示してください。たとえば、「sidebar は幅 280px、content area は残り幅いっぱい、list は縦に scroll、header は内容に合わせた高さ」といった入力のほうが強いです。これなら、スキルはやり直しなしで正しい Walk 値を選べます。

ネスト構造と flow を明確に伝える

layout の不具合は、parent-child の構造が曖昧なことから起こることがよくあります。子要素を縦に積むのか、横に並べるのか、あるいはネストした container の中でその両方を使うのかを伝えてください。もしある section に header と scroll する body の両方があるなら、両方の layer を明示すると、出力で正しい flow と height の挙動を使いやすくなります。

初回出力を Makepad の制約と照らして確認する

よくある失敗は、Fit を CSS の auto-height のように扱うこと、scroll container には制約付きの height が必要なことを忘れること、spacing を誤った layer に入れることです。最初の出力のあとで、1 つの問題に絞った修正を依頼してください。たとえば「scroll region の高さを直して」「この row を中央寄せの縦積みに変えて」のようにします。1 回で大きく書き換えるより、段階的に絞り込むほうが、Makepad の code は安定して良くなることが多いです。