jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Makepadリファレンス

makepad-reference

デバッグやコード品質向上、高度なレイアウトパターンに関する参照資料を提供するSkill。

⚡ ⏱ 障害ポストモーテム 1日 → 1時間

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

This category provides reference materials for debugging, code quality, and advanced layout patterns.

🇯🇵 日本人クリエイター向け解説

一言でいうと

デバッグやコード品質向上、高度なレイアウトパターンに関する参照資料を提供するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o makepad-reference.zip https://jpskill.com/download/3133.zip && unzip -o makepad-reference.zip && rm makepad-reference.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/3133.zip -OutFile "$d\makepad-reference.zip"; Expand-Archive "$d\makepad-reference.zip" -DestinationPath $d -Force; ri "$d\makepad-reference.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して makepad-reference.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → makepad-reference フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Makepad Reference を使って、最小構成のサンプルコードを示して
  • › Makepad Reference の主な使い方と注意点を教えて
  • › Makepad Reference を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Makepad リファレンス

このカテゴリでは、デバッグ、コード品質、高度なレイアウトパターンに関するリファレンス資料を提供します。

使用する場面

  • 一般的なMakepadのエラー、デバッグ、またはAPIルックアップのためのクイックリファレンス資料が必要な場合。
  • 特定のサブシステムで集中的な機能を記述するのではなく、診断またはリファレンス指向のタスクである場合。
  • より専門的なMakepadスキルに深く入る前に、中心となる出発点が必要な場合。

クイックナビゲーション

トピック ファイル 使用する場面
API ドキュメント 公式ドキュメントインデックス、クイックAPIリファレンス 詳細なAPI情報を見つける場合
トラブルシューティング よくあるエラーと修正 ビルドの失敗、ランタイムエラー
コード品質 Makepadを意識したリファクタリング コードを安全に簡素化する場合
アダプティブレイアウト デスクトップ/モバイルレスポンシブ クロスプラットフォームのレイアウト

よくある問題のクイックリファレンス

エラー クイック修正
no matching field: font text_style: <THEME_FONT_*>{} を使用してください
カラー解析エラー (e で終わる) 最後の数字を変更してください (例: #14141e → #14141f)
set_text の引数不足 最初の引数として cx を追加してください
UI が更新されない 変更後に redraw(cx) を呼び出してください
ウィジェットが見つからない ID のスペルを確認し、パスには ids!() を使用してください

デバッグのヒント

# Run with line info for better error messages
MAKEPAD=lines cargo +nightly run
// Add logging
log!("Value: {:?}", my_value);
log!("State: {} / {}", self.counter, self.is_loading);

リソース

制限事項

  • このスキルは、タスクが上記で説明した範囲と明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して明確化を求めてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Makepad Reference

This category provides reference materials for debugging, code quality, and advanced layout patterns.

When to Use

  • You need quick-reference material for common Makepad errors, debugging, or API lookups.
  • The task is diagnostic or reference-oriented rather than writing a focused feature in one subsystem.
  • You want a central starting point before diving into more specialized Makepad skills.

Quick Navigation

Topic File Use When
API Documentation Official docs index, quick API reference Finding detailed API info
Troubleshooting Common errors and fixes Build fails, runtime errors
Code Quality Makepad-aware refactoring Simplifying code safely
Adaptive Layout Desktop/mobile responsive Cross-platform layouts

Common Issues Quick Reference

Error Quick Fix
no matching field: font Use text_style: <THEME_FONT_*>{}
Color parse error (ends in e) Change last digit (e.g., #14141e → #14141f)
set_text missing argument Add cx as first argument
UI not updating Call redraw(cx) after changes
Widget not found Check ID spelling, use ids!() for paths

Debug Tips

# Run with line info for better error messages
MAKEPAD=lines cargo +nightly run
// Add logging
log!("Value: {:?}", my_value);
log!("State: {} / {}", self.counter, self.is_loading);

Resources

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.