makepad-2.0-shaders

makepad-2.0-shaders skill の概要

この skill は何のためにあるか

makepad-2.0-shaders skill は、Makepad 2.0 の shader コードを作成・デバッグしたいときに役立ちます。特に pixel: fn() / vertex: fn() ブロック、Sdf2d の shape、カスタム widget 描画が必要な場面で強みを発揮します。向いているのは「グラフィックス全般を学ぶこと」ではなく、「この Makepad UI を、正しい shader 構文・変数・色処理で意図どおりに描画すること」です。

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

この makepad-2.0-shaders skill は、Makepad UI、カスタムコントロール、アニメーション状態、shape 描画に関わる Frontend Development のワークフローに適しています。shader の構造、組み込み変数、premultiplied alpha、SDF ベースの描画を、雑なプロンプト生成コードではなく信頼できる指針で扱いたいなら導入する価値があります。

何が違うのか

普通のプロンプトと違い、この skill は Makepad 固有の作法に基づいています。たとえば、インラインの shader ブロック、instance と uniform の使い分け、Sdf2d.viewport、premultiply-alpha のルールです。ここを外すと、わずかな構文ミスや色の扱いミスだけで描画が崩れたり、目に見えにくい不具合につながったりします。makepad-2.0-shaders skill の価値は、寄り道を減らし、実際の engine に合ったコードへ早くたどり着ける点にあります。

makepad-2.0-shaders skill の使い方

インストールして起動する

skill metadata に示されている repo のインストール手順に従って導入し、Makepad の shader 作業が含まれるタスクで makepad-2.0-shaders skill を呼び出します。良いトリガーは、対象 widget や effect、見た目のゴール、shader が反応すべき入力状態を明示した依頼です。たとえば「Sdf2d と premultiplied alpha を使って、hover と active 状態を持つ角丸ボタン用の Makepad draw_bg shader を作ってください」のように指定します。

skill に正しい入力を渡す

makepad-2.0-shaders は、次の情報を与えると精度が上がります。

• 描画対象: draw_bg, draw_text, draw_quad、またはカスタム draw object
• 見た目の要件: border、fill、glow、mask、gradient、shadow、transition
• 状態モデル: hover, active, selected, theme color, DPI sensitivity
• 厳しい制約: 既存コードの維持、性能上の制限、texture sampling の禁止

弱い依頼は「かっこいい shader を作って」です。強い依頼は「この draw_bg shader を、1px の stroke と柔らかい内側の fill を持つ形に書き換え、hover アニメーションは維持し、Pal.premul を正しく保ってください」です。

先に読むべきファイル

まず SKILL.md で基本構文と注意点を確認し、次に references/shader-reference.md で variable の型、色の扱い、カスタム shader 関数を確認します。shape ベースの作業で、正確な SDF primitive、combinator、fill/stroke の順序が必要なら references/sdf2d-reference.md を使います。この順序で読むと、意図から妥当なコードまで最短で進めます。

より良い出力を得るワークフロー

makepad-2.0-shaders のガイド結果をよくするには、次の順で進めるのが効果的です。

1. widget と見た目のゴールを定義する
2. shader が sdf.result を返すのか、premultiplied color を返すのかを決める
3. 各入力を instance、uniform、varying に割り当てる
4. 最小限の shader ブロックを下書きする
5. hover、active、高 DPI サイズで見た目の挙動を確認する

別の engine から移植する場合は、行単位ではなく、まず effect の概念を翻訳してください。Makepad の shader 構文と alpha 処理はかなり異なるため、単純な移植は失敗しやすいです。

makepad-2.0-shaders skill の FAQ

これは上級者向けの shader 作業だけですか？

いいえ。makepad-2.0-shaders skill は、Makepad の構文を正しく保ち、描画バグを減らしたいだけのシンプルな UI shape にも役立ちます。初心者ほど、明確な見た目のゴールがあり、エンジンに即したパターンをそのまま使える状況で効果が大きいです。

いつ使わないべきですか？

Makepad のコードを書かない場合、一般的な GLSL 理論だけが必要な場合、あるいは widget 描画や SDF ベースの UI rendering と無関係な作業なら避けてください。shader 実装を伴わない広い意味での frontend design 支援が欲しいだけなら、これが最適とは限りません。

普通のプロンプトより何が優れているのですか？

普通のプロンプトでももっともらしい shader code は出せますが、makepad-2.0-shaders skill は Makepad の実際の作法、つまり pixel: fn()、Sdf2d、Pal.premul、そして per-instance state と shared state の違いに合わせて調整されています。そのため、「見た目は合っているのに repo では動かない」出力を減らせます。

Frontend Development のワークフローに合いますか？

はい。特に layout と rendering が混ざる UI system では有効です。makepad-2.0-shaders for Frontend Development は、frontend の作業に custom visuals、animated state、Makepad 内でコンパイルされる再利用可能な component styling が含まれるときに最も力を発揮します。

makepad-2.0-shaders skill の改善方法

見た目ではなく、shader に役割を与える

良い入力は、見た目だけでなく shader が何をしなければならないかを指定しています。たとえば「modern にして」よりも、「hover で薄く消える柔らかい shadow を持つ押下状態のボタンを描画して」のほうが有用です。前者ではなく後者なら、makepad-2.0-shaders が適切な shape logic、state wiring、color flow を選びやすくなります。

よくある失敗を避ける

悪い出力の多くは、詳細不足から生まれます。古い shader 構文を使う、premultiplied alpha を忘れる、state を誤った scope に宣言する、といった点です。shape の geometry が曖昧なのも典型的です。角丸の rectangle が欲しいなら、「rounded card」とだけ言うのではなく、box、box_all、あるいは別の SDF primitive として明示してください。

今のファイルに合うコードを依頼する

すでに widget があるなら、現在の draw_* ブロックを貼り、そのうえで何を変えたいかを伝えてください。makepad-2.0-shaders の最も有用な使い方は反復的な進め方です。まず動いている部分を保ち、その後に stroke 幅、blending、shadow の柔らかさ、hover transition などを一つずつ調整します。

適切な確認で検証する

最初の出力のあとには、小さいサイズと大きいサイズ、light theme と dark theme、hover や active の切り替えで shader を確認してください。もし見た目がずれるなら、「DPI 2.0 で stroke が太すぎる」「fill color は合っているが alpha edge が不自然」といった具合に、欠陥を正確に言語化して入力を絞り込みます。そうしたフィードバックがあると、makepad-2.0-shaders skill は素早く正解に近づけます。