makepad-2.0-theme

makepad-2.0-theme スキルの概要

makepad-2.0-theme とは

makepad-2.0-theme スキルは、デザイン トークンの一貫性を保ちながら Makepad 2.0 のテーマシステムを扱うためのスキルです。theme.* 変数を適用したいとき、ダークテーマとライトテーマを切り替えたいとき、あるいは Makepad のテーマグローバルがウィジェットやアプリ全体のスタイルにどう影響するかを理解したいときに特に役立ちます。

どんな人に向いているか

Makepad の UI を新規に作る場合や保守する場合に、makepad-2.0-theme スキルを使ってください。特に、製品や社内ツール、makepad-2.0-theme for Design Systems のような用途で、スケーラブルなスタイリングを重視するなら相性が良いです。画面ごとにハードコードされた色、余白、フォント値がバラつきを生むようなケースに向いています。

何を解決するのか

このスキルの主な仕事は、曖昧な見た目の意図を、テーマを意識した実装に落とし込むことです。コードにどの値を書けばよいかを勘で決めるのではなく、「ダークモードでコントラストを強めたい」「コンパクトなパネル向けに余白を詰めたい」といった要件を、Makepad が期待するテーマ変数に対応づけるのを助けます。

インストールする価値がある理由

makepad-2.0-theme スキルは、単なるスタイリング用の汎用プロンプトではありません。Makepad のテーマ読み込み順、変数命名、セマンティックなテーマ値と直接的な数値リテラルの違いを軸にしています。そのため、実際の Makepad ランタイムと互換性のある出力が必要な場面で、導入リスクを下げられます。

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

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

makepad-2.0-theme install の場合は、リポジトリのインストールコマンドでスキルを skills セットに追加し、テーマ変数、ウィジェットのスタイリング、テーマ切り替え、Makepad の色・フォント・余白の判断に触れる依頼で使ってください。プロンプトが単に「もっと見栄えをよくして」だけだと、このスキルでは情報が足りません。

最初の入力を適切にする

良い結果を出すには、次の情報を含めたプロンプトが有効です。

• 使いたいテーマモード: dark、light、skeleton
• どの画面やコンポーネントを整えたいか
• どのトークンを変えたいか: color、font、space、radius、contrast
• 既存のウィジェット挙動を維持する必要があるかどうか

弱い依頼は「テーマを改善して」です。より強い依頼は、たとえば次のようになります: 「makepad-2.0-theme を使って、コンパクトな inspector panel を dark mode 向けに調整し、タイポグラフィは変えず、spacing の見通しを良くし、hardcoded values は使わないでください。」

先に読むべきファイル

実用的な makepad-2.0-theme usage では、まず SKILL.md を読み、その後 references/theme-variables.md を開くのが近道です。この reference には、利用可能なトークン、グローバル調整パラメータ、そして数値をそのまま書くのではなくセマンティックに扱うべき値がまとまっています。

テーマ読み込みのワークフローに従う

実装で重要なのは順序です。テーマ定義は、ウィジェットが参照する前に読み込まれていなければなりません。スキルを使うときは App::run のセットアップフローに注意し、それをそのまま貼り付けるのではなく自分のプロジェクトに合わせて適用してください。ここを見落とすと、導入を止める原因になりやすい部分です。

makepad-2.0-theme スキル FAQ

これはダークモード用のプロンプトにすぎないのか？

いいえ。makepad-2.0-theme スキルは、テーマ変数、spacing、typography、ウィジェット状態のスタイル、テーマ切り替えを含む、Makepad 2.0 のテーマシステム全体を扱います。ダークモードはあくまで代表的な用途のひとつです。

事前に Makepad を深く知っている必要があるか？

必ずしもそうではありません。変更したい UI を説明できるなら、初心者でも使いやすいスキルです。すべての token を暗記する必要はありませんが、対象コンポーネント、見た目のゴール、hardcoded values に関する制約は伝えられるようにしておくべきです。

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

Makepad を使っていない場合、デザインシステムが theme token を使っていない場合、あるいは実装上の制約がない一回限りのビジュアルモックアップだけが欲しい場合は、makepad-2.0-theme は使わないでください。その場合は、一般的なスタイリング用プロンプトで十分です。

通常のプロンプトとどう違うのか？

通常のプロンプトでも見た目のアイデアは出せますが、makepad-2.0-theme は Makepad の慣習に依存する実装判断に強いのが特徴です。特に、独自のスタイリング規約を作るのではなく、リポジトリの theme variable 構造に沿った結果が必要なときに役立ちます。

makepad-2.0-theme スキルを改善する方法

具体的な見た目のゴールを伝える

makepad-2.0-theme の出力を最短で改善するには、欲しいトレードオフを具体的に示すことです。「text-heavy dashboards のコントラストを上げたい」「skeleton state の視覚ノイズを減らしたい」「読みやすさを落とさず spacing を詰めたい」と伝えてください。こうした制約は、幅広い形容詞よりも token 選択をはるかに正確に導きます。

既存のテーマ文脈を共有する

プロジェクトですでに theme.* 変数を使っているなら、現在の使い方の短いサンプルと、うまくいっていない箇所を示してください。問題が token の選び方なのか、読み込み順なのか、spacing の不整合なのか、dark mode と light mode の不一致なのかも書くと効果的です。そうすると、スキルは再設計ではなく修正を返しやすくなります。

よくある失敗パターンに注意する

もっとも多いミスは、hardcoded values の使用、theme settings をウィジェットの後で読み込むこと、そしてセマンティック token の連鎖を確認せずに個別の色だけを変えてしまうことです。最初の結果に違和感がある場合は、見た目の全面書き換えではなく token レベルの修正を依頼してください。たとえば: 「レイアウトはそのままで、color_contrast を調整し、space_factor を少し上げてください。」

出力から実装へ段階的に詰める

最初の提案をアプリで試したら、その結果を見て、次は一点だけを絞って調整します。全体がのっぺりして見えるなら、palette のコントラスト調整を依頼します。窮屈に見えるなら、spacing と radius の調整を依頼します。theme switching が壊れるなら、読み込み順と有効な mod.theme の選択に焦点を当ててください。これが、実プロジェクトで makepad-2.0-theme を Design Systems 向けに最も効果的に使う方法です。