{"id":36545452,"url":"https://github.com/ZhangHanDong/makepad-skills","last_synced_at":"2026-01-19T00:00:58.238Z","repository":{"id":331942484,"uuid":"1131593725","full_name":"ZhangHanDong/makepad-skills","owner":"ZhangHanDong","description":"Build App with Makepad and AI skills","archived":false,"fork":false,"pushed_at":"2026-01-11T18:04:04.000Z","size":514,"stargazers_count":376,"open_issues_count":0,"forks_count":47,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-11T21:27:59.056Z","etag":null,"topics":["app","claude","claude-code","cross-platform","makepad","rust","skills"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZhangHanDong.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-10T10:20:19.000Z","updated_at":"2026-01-11T21:21:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ZhangHanDong/makepad-skills","commit_stats":null,"previous_names":["zhanghandong/makepad-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ZhangHanDong/makepad-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangHanDong%2Fmakepad-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangHanDong%2Fmakepad-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangHanDong%2Fmakepad-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangHanDong%2Fmakepad-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZhangHanDong","download_url":"https://codeload.github.com/ZhangHanDong/makepad-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhangHanDong%2Fmakepad-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28554368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T23:48:35.235Z","status":"ssl_error","status_checked_at":"2026-01-18T23:47:49.178Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","claude","claude-code","cross-platform","makepad","rust","skills"],"created_at":"2026-01-12T06:00:43.622Z","updated_at":"2026-01-19T00:00:57.678Z","avatar_url":"https://github.com/ZhangHanDong.png","language":"Shell","funding_links":[],"categories":["Sponsors ❤️","Others","Other","Framework Skills"],"sub_categories":["Community Skills"],"readme":"# Makepad 向け Claude Skills\n\n[English](./README.md) | [中文](./README.zh-CN.md) | [日本語](./README.ja.md)\n\n[![Version](https://img.shields.io/badge/version-2.1.1-blue.svg)](./skills/.claude-plugin/plugin.json)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)\n\nRust の [Makepad](https://github.com/makepad/makepad) フレームワークを使用してクロスプラットフォーム UI アプリケーションを構築するための Agent Skills です。\n\n## Makepad について\n\n[Makepad](https://github.com/makepad/makepad) は、Rust で書かれた次世代 UI フレームワークで、高性能なクロスプラットフォームアプリケーションの構築を可能にします。主な特徴：\n\n- **クロスプラットフォーム**：単一のコードベースでデスクトップ（macOS、Windows、Linux）、モバイル（Android、iOS）、Web（WebAssembly）に対応\n- **GPU アクセラレーション**：SDF（Signed Distance Field）描画によるカスタムシェーダーベースのレンダリング\n- **ライブデザイン**：ホットリロード可能な `live_design!` DSL による迅速な UI 開発\n- **高パフォーマンス**：ネイティブコンパイル、仮想 DOM なし、最小限のランタイムオーバーヘッド\n\n## Robius について\n\n[Project Robius](https://github.com/project-robius) は、Rust でフル機能のアプリケーション開発フレームワークを構築するオープンソースイニシアチブです。Makepad で構築された本番アプリケーション：\n\n- **[Robrix](https://github.com/project-robius/robrix)** - リアルタイムメッセージング、E2E 暗号化、複雑な UI パターンを実装した Matrix チャットクライアント\n- **[Moly](https://github.com/moxin-org/moly)** - データ集約型インターフェースと非同期操作を実装した AI モデルマネージャー\n\nこれらの Skills は Robrix と Moly で使用されているパターンから抽出されています。\n\n## インストール\n\n### クイックインストール（推奨）\n\nインストールスクリプトでワンコマンドセットアップ：\n\n```bash\n# 現在のプロジェクトにインストール\ncurl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash\n\n# hooks を有効にしてインストール\ncurl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --with-hooks\n\n# 特定のプロジェクトにインストール\ncurl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --target /path/to/project\n\n# Codex 向けにインストール（.codex/skills）\ncurl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --agent codex\n\n# Gemini CLI 向けにインストール（.gemini/skills）\ncurl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --agent gemini\n```\n\nGemini CLI 補足: Skills は実験的機能です。必要に応じて `/settings` で `experimental.skills` を有効化してください。\n\n**スクリプト機能：**\n- Rust/Makepad プロジェクトを自動検出（Cargo.toml をチェック）\n- インストール前に既存の skills をバックアップ\n- `--with-hooks` で自己進化フックをコピーして設定（Claude Code のみ）\n- `--agent codex|claude-code|gemini` で Codex、Claude Code、または Gemini CLI を選択（デフォルト: claude-code）\n- `--target` で任意のプロジェクトディレクトリにインストール可能\n- カラー出力で進捗を明確に表示\n\n**利用可能なオプション：**\n\n| オプション | 説明 |\n|-----------|------|\n| `--target DIR` | 特定のディレクトリにインストール（デフォルト：現在のディレクトリ） |\n| `--with-hooks` | 自己進化フックを有効化（Claude Code のみ） |\n| `--agent AGENT` | エージェント指定: `codex`、`claude-code`、または `gemini`（デフォルト: `claude-code`） |\n| `--branch NAME` | 特定のブランチを使用（デフォルト：main） |\n| `--help` | ヘルプメッセージを表示 |\n\n### 手動インストール\n\n```bash\n# このリポジトリをクローン\ngit clone https://github.com/ZhangHanDong/makepad-skills.git\n\n# プロジェクトにコピー（https://code.claude.com/docs/en/skills）\ncp -r makepad-skills/skills your-project/.claude/skills\n\n# Codex プロジェクトにコピー（https://developers.openai.com/codex/skills）\ncp -r makepad-skills/skills your-project/.codex/skills\n\n# Gemini CLI プロジェクトにコピー（https://geminicli.com/docs/cli/skills/）\ncp -r makepad-skills/skills your-project/.gemini/skills\n```\n\nインストール後のプロジェクト構造（Codex/Gemini は `.claude` を `.codex`/`.gemini` に置き換えてください）：\n\n```\nyour-project/\n├── .claude/\n│   └── skills/\n│       ├── .claude-plugin/\n│       │   └── plugin.json\n│       ├── 00-getting-started/\n│       ├── 01-core/\n│       ├── 02-components/\n│       ├── 03-graphics/\n│       │   ├── _base/          # 公式 skills（アトミック）\n│       │   └── community/      # コミュニティ貢献\n│       ├── 04-patterns/\n│       │   ├── _base/          # 公式 patterns（アトミック）\n│       │   └── community/      # コミュニティ貢献\n│       ├── 05-deployment/\n│       ├── 06-reference/\n│       ├── 99-evolution/\n│       │   └── templates/      # 貢献テンプレート\n│       └── CONTRIBUTING.md\n├── src/\n└── Cargo.toml\n```\n\n詳細は [Claude Code Skills 公式ドキュメント](https://docs.anthropic.com/en/docs/claude-code/skills) を参照してください。\n\n## アーキテクチャ：コラボレーション向けアトミック Skills\n\n### なぜアトミック構造？\n\nv2.1 では、協調開発向けに設計された**アトミック skill 構造**を導入しました：\n\n```\n04-patterns/\n├── SKILL.md              # インデックスファイル\n├── _base/                # 公式 patterns（番号付き、アトミック）\n│   ├── 01-widget-extension.md\n│   ├── 02-modal-overlay.md\n│   ├── ...\n│   └── 14-callout-tooltip.md\n└── community/            # あなたの貢献\n    ├── README.md\n    └── {GitHub ユーザー名}-{パターン名}.md\n```\n\n**メリット：**\n- **マージ競合なし**：`community/` のファイルは公式 `_base/` の更新と競合しません\n- **並列開発**：複数のユーザーが同時に貢献可能\n- **明確な帰属**：ファイル名の GitHub ユーザー名がクレジットを提供\n- **段階的開示**：SKILL.md インデックス → 個別パターンの詳細\n\n### 自己進化：開発から Skills を蓄積\n\n自己進化機能により、開発中に発見したパターンをキャプチャして skills に追加できます。\n\n#### 仕組み\n\n1. **開発中**：Makepad でアプリを構築する際に、有用なパターン、シェーダー、エラー解決策を発見\n\n2. **パターンをキャプチャ**：Claude に保存を依頼：\n   ```\n   ユーザー: このツールチップ配置ロジックは便利です。コミュニティパターンとして保存して\n   Claude: [テンプレートを使用して community/{ユーザー名}-tooltip-positioning.md を作成]\n   ```\n\n3. **自動検出**（hooks 有効時）：エラーを遭遇して修正すると、システムが自動的に解決策を troubleshooting にキャプチャ\n\n#### 自己進化フックを有効にする（オプション）\n\n```bash\n# 99-evolution からプロジェクトに hooks をコピー\ncp -r your-project/.claude/skills/99-evolution/hooks your-project/.claude/skills/hooks\n\n# フックに実行権限を付与\nchmod +x your-project/.claude/skills/hooks/*.sh\n\n# フック設定を .claude/settings.json に追加\n# skills/99-evolution/hooks/settings.example.json を参照\n```\n\n#### 手動パターン作成\n\nClaude に直接依頼：\n```\nユーザー: さっき実装したドラッグ\u0026ドロップ並べ替えをコミュニティパターンとして保存して\nClaude: テンプレートを使用して作成します...\n```\n\nClaude は：\n1. `99-evolution/templates/pattern-template.md` テンプレートを使用\n2. `04-patterns/community/{あなたのユーザー名}-drag-drop-reorder.md` にファイルを作成\n3. frontmatter とコンテンツを入力\n\n### コミュニティ貢献ガイド\n\n#### パターンの貢献\n\n1. **パターンファイルを作成**：\n   ```\n   04-patterns/community/{GitHub ユーザー名}-{パターン名}.md\n   ```\n\n2. **テンプレートを使用**：`99-evolution/templates/pattern-template.md` からコピー\n\n3. **必須の frontmatter**：\n   ```yaml\n   ---\n   name: my-pattern-name\n   author: your-github-handle\n   source: project-where-you-discovered-this\n   date: 2024-01-15\n   tags: [tag1, tag2, tag3]\n   level: beginner|intermediate|advanced\n   ---\n   ```\n\n4. **メインリポジトリに PR を送信**\n\n#### シェーダー/エフェクトの貢献\n\n1. **エフェクトファイルを作成**：\n   ```\n   03-graphics/community/{GitHub ユーザー名}-{エフェクト名}.md\n   ```\n\n2. **テンプレートを使用**：`99-evolution/templates/shader-template.md` からコピー\n\n#### エラー解決策の貢献\n\n1. **troubleshooting エントリを作成**：\n   ```\n   06-reference/troubleshooting/{エラー名}.md\n   ```\n\n2. **テンプレートを使用**：`99-evolution/templates/troubleshooting-template.md` からコピー\n\n#### アップストリームとの同期\n\nローカル skills を更新しながら、貢献を保持：\n\n```bash\n# リポジトリをフォークしている場合\ngit fetch upstream\ngit merge upstream/main --no-edit\n# community/ ファイルは _base/ の変更と競合しません\n```\n\n#### 昇格パス\n\n高品質なコミュニティ貢献は `_base/` に昇格される可能性があります：\n- パターンが広く有用で十分にテストされている\n- ドキュメントが完全\n- コミュニティのフィードバックがポジティブ\n- `author` フィールドでクレジットを保持\n\n## Skills 一覧 (v2.1 アトミック構造)\n\n### [00-getting-started](./skills/00-getting-started/SKILL.md) - プロジェクトセットアップ\n\n| ファイル | 説明 | 使用場面 |\n|----------|------|----------|\n| [init.md](./skills/00-getting-started/init.md) | プロジェクトスキャフォールディング | 「新しい Makepad アプリを作成」 |\n| [project-structure.md](./skills/00-getting-started/project-structure.md) | ディレクトリ構成 | 「プロジェクトをどう整理すべき？」 |\n\n### [01-core](./skills/01-core/SKILL.md) - コア開発\n\n| ファイル | 説明 | 使用場面 |\n|----------|------|----------|\n| [layout.md](./skills/01-core/layout.md) | フロー、サイズ、間隔、配置 | 「UI 要素を配置」 |\n| [widgets.md](./skills/01-core/widgets.md) | 一般的なウィジェット、カスタムウィジェット | 「ボタンの作り方は？」 |\n| [events.md](./skills/01-core/events.md) | イベント処理、ヒットテスト | 「クリックイベントの処理」 |\n| [styling.md](./skills/01-core/styling.md) | フォント、テキストスタイル、SVG アイコン | 「フォントサイズを変更」「アイコンを追加」 |\n\n### [02-components](./skills/02-components/SKILL.md) - ウィジェットギャラリー\n\n全ビルトインウィジェット参照（ui_zoo から）：Button、TextInput、Slider、Checkbox、Label、Image、ScrollView、PortalList、PageFlip など。\n\n### [03-graphics](./skills/03-graphics/SKILL.md) - グラフィックスとアニメーション（アトミック）\n\n`_base/` に 14 個の独立 skills：\n\n| カテゴリ | Skills |\n|----------|--------|\n| シェーダー基礎 | `01-shader-structure`, `02-shader-math` |\n| SDF 描画 | `03-sdf-shapes`, `04-sdf-drawing`, `05-progress-track` |\n| アニメーション | `06-animator-basics`, `07-easing-functions`, `08-keyframe-animation`, `09-loading-spinner` |\n| ビジュアルエフェクト | `10-hover-effect`, `11-gradient-effects`, `12-shadow-glow`, `13-disabled-state`, `14-toggle-checkbox` |\n\n`community/` にはカスタムエフェクトを追加。\n\n### [04-patterns](./skills/04-patterns/SKILL.md) - プロダクションパターン（アトミック）\n\n`_base/` に 14 個の独立 patterns：\n\n| カテゴリ | Patterns |\n|----------|----------|\n| ウィジェットパターン | `01-widget-extension`, `02-modal-overlay`, `03-collapsible`, `04-list-template`, `05-lru-view-cache`, `06-global-registry`, `07-radio-navigation` |\n| データパターン | `08-async-loading`, `09-streaming-results`, `10-state-machine`, `11-theme-switching`, `12-local-persistence` |\n| 高度なパターン | `13-tokio-integration`, `14-callout-tooltip` |\n\n`community/` にはカスタムパターンを追加。\n\n### [05-deployment](./skills/05-deployment/SKILL.md) - ビルドとパッケージ\n\nデスクトップ（Linux、Windows、macOS）、モバイル（Android、iOS）、Web（WebAssembly）向けにビルド。\n\n### [06-reference](./skills/06-reference/SKILL.md) - リファレンス\n\n| ファイル | 説明 | 使用場面 |\n|----------|------|----------|\n| [troubleshooting.md](./skills/06-reference/troubleshooting.md) | よくあるエラーと修正 | 「Apply error: no matching field」 |\n| [code-quality.md](./skills/06-reference/code-quality.md) | Makepad 対応のリファクタリング | 「このコードを簡略化」 |\n| [adaptive-layout.md](./skills/06-reference/adaptive-layout.md) | デスクトップ/モバイルレスポンシブ | 「デスクトップとモバイル両方に対応」 |\n\n### [99-evolution](./skills/99-evolution/SKILL.md) - 自己改善\n\n| コンポーネント | 説明 |\n|---------------|------|\n| `templates/` | パターン、シェーダー、troubleshooting テンプレート |\n| `hooks/` | 自動検出と検証フック |\n\n## 使用例\n\n### 新規プロジェクト作成\n```\nユーザー: カウンターボタン付きの \"my-app\" という Makepad アプリを作成\nClaude: [00-getting-started でプロジェクト作成、01-core でボタン/カウンター実装]\n```\n\n### ツールチップを追加\n```\nユーザー: ホバー時にユーザー情報を表示するツールチップを追加\nClaude: [04-patterns/_base/14-callout-tooltip.md で完全な実装を取得]\n```\n\n### カスタムパターンを保存\n```\nユーザー: この無限スクロール実装をコミュニティパターンとして保存\nClaude: [04-patterns/community/yourhandle-infinite-scroll.md を作成]\n```\n\n### コンパイルエラー修正\n```\nユーザー: \"no matching field: font\" エラーが発生\nClaude: [06-reference/troubleshooting.md で正しい text_style 構文を特定]\n```\n\n## 構築できるもの\n\nこれらの Skills を使用すると、Claude は以下をサポートします：\n\n- 適切な構造で新しい Makepad プロジェクトを初期化\n- `live_design!` DSL でカスタムウィジェットを作成\n- イベントとユーザーインタラクションを処理\n- 視覚効果用の GPU シェーダーを作成\n- スムーズなアニメーションを実装\n- async/tokio でアプリケーション状態を管理\n- レスポンシブなデスクトップ/モバイルレイアウトを構築\n- すべてのプラットフォーム向けにアプリをパッケージ化\n- 開発中に発見したパターンを**キャプチャして共有**\n\n## これらの Skills で構築されたプロジェクト\n\nmakepad-skills と Claude Code を使用して作成された実際のプロジェクト：\n\n| プロジェクト | 説明 | 所要時間 |\n|-------------|------|----------|\n| [makepad-skills-demo](https://github.com/ZhangHanDong/makepad-skills-demo) | 為替レート変換アプリのデモ | 約 20 分 |\n| [makepad-component](https://github.com/ZhangHanDong/makepad-component) | 再利用可能な Makepad コンポーネントライブラリ | - |\n\n### makepad-skills-demo スクリーンショット\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/skill-app-demo.jpg\" width=\"60%\" alt=\"為替レート変換アプリ\" /\u003e\n\u003c/p\u003e\n\n### makepad-component スクリーンショット\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/mc1.png\" width=\"45%\" alt=\"コンポーネント 1\" /\u003e\n  \u003cimg src=\"./assets/mc2.png\" width=\"45%\" alt=\"コンポーネント 2\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/mc3.png\" width=\"45%\" alt=\"コンポーネント 3\" /\u003e\n  \u003cimg src=\"./assets/mc4.png\" width=\"45%\" alt=\"コンポーネント 4\" /\u003e\n\u003c/p\u003e\n\n## リソース\n\n- [Makepad リポジトリ](https://github.com/makepad/makepad)\n- [Makepad サンプル](https://github.com/makepad/makepad/tree/main/examples)\n- [Project Robius](https://github.com/project-robius)\n- [Robrix](https://github.com/project-robius/robrix)\n- [Moly](https://github.com/moxin-org/moly)\n\n## ライセンス\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZhangHanDong%2Fmakepad-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZhangHanDong%2Fmakepad-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZhangHanDong%2Fmakepad-skills/lists"}