简体中文

Makepad Skills

ZhangHanDong/makepad-skills: https://github.com/ZhangHanDong/makepad-skills

用于基于 Rust 的 Makepad 框架构建跨平台 UI 应用的 Agent 技能集。

安装

插件市场（推荐）

通过 Claude Code 插件市场安装：

1# Step 1: Add marketplace
2/plugin marketplace add ZhangHanDong/makepad-skills
3
4# Step 2: Install the plugin (includes all 20 skills)
5/plugin install makepad-skills@makepad-skills-marketplace

使用插件技能：

插件技能通过命名空间访问（不会出现在 /skills 列表中，但可加载）：

1# Load specific skills by namespace
2/makepad-skills:makepad-widgets
3/makepad-skills:makepad-layout
4/makepad-skills:robius-widget-patterns
5
6# Or just ask questions - hooks will auto-route to relevant skills
7"How do I create a Makepad button?"
8"makepad 布局怎么居中？"

管理已安装插件：

1/plugin                  # List installed plugins
2/plugin uninstall makepad-skills@makepad-skills-marketplace  # Uninstall

Shell 脚本安装

使用安装脚本一键安装：

1# Install to current project
2curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash
3
4# Install with hooks enabled
5curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --with-hooks
6
7# Install to specific project
8curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --target /path/to/project
9
10# Install for Codex (.codex/skills)
11curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --agent codex
12
13# Install for Gemini CLI (.gemini/skills)
14curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --agent gemini

Gemini CLI 提示：Skills 仍处于实验阶段，如需使用请在 /settings 中启用 experimental.skills。

脚本特性：

自动检测 Rust/Makepad 项目（检查 Cargo.toml）
安装前备份已有 skills
--with-hooks 会复制并配置自我进化 hooks（仅 Claude Code）
--agent codex|claude-code|gemini 选择 Codex、Claude Code 或 Gemini CLI（默认：claude-code）
--target 支持安装到任意项目目录
彩色输出与清晰的进度提示

可用选项：

选项	说明
`--target DIR`	安装到指定目录（默认：当前目录）
`--with-hooks`	启用自我进化 hooks（仅 Claude Code）
`--agent AGENT`	选择 agent：`codex`、`claude-code` 或 `gemini`（默认：`claude-code`）
`--branch NAME`	使用指定分支（默认：main）
`--help`	显示帮助信息

手动安装

1# Clone this repo
2git clone https://github.com/ZhangHanDong/makepad-skills.git
3
4# Copy to your project (https://code.claude.com/docs/en/skills)
5cp -r makepad-skills/skills your-project/.claude/skills
6
7# Copy to your project for Codex (https://developers.openai.com/codex/skills)
8cp -r makepad-skills/skills your-project/.codex/skills
9
10# Copy to your project for Gemini CLI (https://geminicli.com/docs/cli/skills/)
11cp -r makepad-skills/skills your-project/.gemini/skills

你的项目结构应如下所示（可用 .codex 或 .gemini 替代 .claude）：

your-project/
├── .claude/
│   └── skills/
│       ├── .claude-plugin/
│       │   └── plugin.json
│       │
│       ├── # === 核心技能（16） ===
│       ├── makepad-basics/
│       ├── makepad-dsl/
│       ├── makepad-layout/
│       ├── makepad-widgets/
│       ├── makepad-event-action/
│       ├── makepad-animation/
│       ├── makepad-shaders/
│       ├── makepad-platform/
│       ├── makepad-font/
│       ├── makepad-splash/
│       ├── robius-app-architecture/
│       ├── robius-widget-patterns/
│       ├── robius-event-action/
│       ├── robius-state-management/
│       ├── robius-matrix-integration/
│       ├── molykit/
│       │
│       ├── # === 扩展技能（3） ===
│       ├── makepad-deployment/
│       ├── makepad-reference/
│       │
│       ├── evolution/          # 自我进化系统
│       │   └── templates/      # 贡献模板
│       └── CONTRIBUTING.md
├── src/
└── Cargo.toml

更多详情请参考 Claude Code Skills 文档。

架构：面向协作的原子化技能

为什么采用原子化结构？

v2.1 引入了面向协作开发的 原子化技能结构：

robius-widget-patterns/
├── SKILL.md              # 索引文件
├── _base/                # 官方模式（编号、原子化）
│   ├── 01-widget-extension.md
│   ├── 02-modal-overlay.md
│   ├── ...
│   └── 18-drag-drop-reorder.md
└── community/            # 你的贡献
    └── {descriptive-pattern-name}.md

优势：

不会产生合并冲突：你的 community/ 文件不会与官方 _base/ 更新冲突
并行开发：多人可同时贡献
清晰归属：文件名中的 GitHub handle 提供署名
渐进式披露：SKILL.md 索引 → 具体模式详情

自我进化：在开发中丰富技能

自我进化功能允许你将开发中发现的模式沉淀到技能库中。

工作原理

开发中：你在使用 Makepad 构建时发现了有用的模式、着色器或错误解决方案
捕获模式：让 Claude 保存它：

用户：这个 Tooltip 定位逻辑很有用，保存为社区模式。 Claude：[使用模板创建 community/{handle}-tooltip-positioning.md]
自动检测（启用 hooks）：当你遇到并修复错误时，系统会自动记录故障排查方案

启用自我进化 Hooks（可选）

1# Copy hooks from evolution to your project
2cp -r your-project/.claude/skills/evolution/hooks your-project/.claude/skills/hooks
3
4# Make hooks executable
5chmod +x your-project/.claude/skills/hooks/*.sh
6
7# Add hooks config to your .claude/settings.json
8# See skills/evolution/hooks/settings.example.json for the configuration

手动创建模式

直接询问 Claude：

用户：为我刚实现的拖拽排序创建一个社区模式
Claude：我会使用模板创建一个模式...

Claude 将会：

使用 evolution/templates/pattern-template.md 模板
在 robius-widget-patterns/community/{descriptive-pattern-name}.md 创建文件
填写 frontmatter 与内容

社区贡献指南

贡献模式

在对应 robius- 技能的 community 目录中创建文件*：
- Widget 模式 → robius-widget-patterns/community/
- 状态模式 → robius-state-management/community/
- 异步模式 → robius-app-architecture/community/
使用模板：复制 evolution/templates/pattern-template.md

必需的 frontmatter：

1---
2name: my-pattern-name
3author: your-github-handle
4source: project-where-you-discovered-this
5date: 2024-01-15
6tags: [tag1, tag2, tag3]
7level: beginner|intermediate|advanced
8---

提交 PR 到主仓库

贡献着色器/特效

创建特效文件：

makepad-shaders/community/{github-handle}-{effect-name}.md
使用模板：复制 evolution/templates/shader-template.md

贡献错误解决方案

创建排错条目：

makepad-reference/troubleshooting/{error-name}.md
使用模板：复制 evolution/templates/troubleshooting-template.md

与上游同步

在保留个人贡献的同时保持本地技能更新：

1# If you've forked the repo
2git fetch upstream
3git merge upstream/main --no-edit
4# Your community/ files won't conflict with _base/ changes

晋升路径

高质量的社区贡献可能被提升到 _base/：

模式具有广泛的适用性且经过充分验证
文档完整
社区反馈积极
通过 author 字段保留署名

技能总览（v3.0 扁平结构）

核心技能（16）

Makepad 核心（10 项）

技能	说明	使用场景
makepad-basics	应用结构、`live_design!`、`app_main!`	"创建新的 Makepad 应用"
makepad-dsl	DSL 语法、继承、原型	"如何在 DSL 中定义组件"
makepad-layout	流式布局、尺寸、间距、对齐	"组件居中"、"排列元素"
makepad-widgets	常见组件、自定义组件	"创建按钮"、"构建表单"
makepad-event-action	事件处理、actions	"处理点击事件"
makepad-animation	动画器、状态、过渡	"添加悬停动画"
makepad-shaders	着色器、SDF、渐变、视觉效果	"自定义视觉效果"
makepad-platform	平台支持	"构建 Android/iOS"
makepad-font	字体、文本、排版	"修改字体/文本样式"
makepad-splash	Splash 脚本语言	"动态 UI 脚本"

Robius 模式（5 项）

技能	说明	使用场景
robius-app-architecture	Tokio、异步/同步模式	"组织异步应用结构"
robius-widget-patterns	可复用组件、`apply_over`	"创建可复用组件"
robius-event-action	自定义 actions、`MatchEvent`	"自定义事件处理"
robius-state-management	AppState、持久化	"保存/加载应用状态"
robius-matrix-integration	Matrix SDK 集成	"聊天客户端功能"

MolyKit（1 项）

技能	说明	使用场景
molykit	AI 聊天、SSE 流式输出、`BotClient`	"AI 聊天集成"

扩展技能（3）

注意： 生产级模式已整合进 robius-* 技能：

Widget 模式（11）→ robius-widget-patterns/_base/
状态模式（5）→ robius-state-management/_base/
异步模式（3）→ robius-app-architecture/_base/

makepad-deployment - 构建与打包

构建桌面端（Linux、Windows、macOS）、移动端（Android、iOS）以及 Web（WebAssembly）。

makepad-reference - 参考资料

文件	说明	使用场景
troubleshooting.md	常见错误与修复	"应用错误：no matching field"
code-quality.md	Makepad 相关重构	"简化这段代码"
adaptive-layout.md	桌面/移动端自适应	"同时支持桌面与移动端"

evolution - 自我进化

组件	说明
`templates/`	模式、着色器与排错模板
`hooks/`	自动检测与验证 hooks
`references/`	协作指南

使用示例

创建新项目

用户：创建一个名为 "my-app" 的 Makepad 应用，并带一个计数按钮
Claude：[使用 makepad-basics 搭建脚手架，makepad-widgets 实现按钮/计数]

用户：添加一个悬停时显示用户信息的 Tooltip
Claude：[使用 robius-widget-patterns/_base/14-callout-tooltip.md 完整实现]

保存自定义模式

用户：将这个无限滚动实现保存为社区模式
Claude：[创建 robius-widget-patterns/community/infinite-scroll.md]

修复编译错误

用户：遇到 "no matching field: font" 错误
Claude：[使用 makepad-reference/troubleshooting.md 查找正确的 text_style 语法]

你可以做什么

借助这些技能，Claude 可以帮助你：

初始化新的 Makepad 项目结构
使用 live_design! DSL 创建自定义组件
处理事件与用户交互
编写 GPU 着色器实现视觉效果
实现流畅动画
使用 async/tokio 管理应用状态
构建桌面/移动端响应式布局
为全平台打包应用
捕获并分享 你在开发中发现的模式

#Makepad Skills

#安装

#插件市场（推荐）

#Shell 脚本安装

#手动安装

#架构：面向协作的原子化技能

#为什么采用原子化结构？

#自我进化：在开发中丰富技能

#工作原理

#启用自我进化 Hooks（可选）

#手动创建模式

#社区贡献指南

#贡献模式

#贡献着色器/特效

#贡献错误解决方案

#与上游同步

#晋升路径

#技能总览（v3.0 扁平结构）

#核心技能（16）

#Makepad 核心（10 项）

#Robius 模式（5 项）

#MolyKit（1 项）

#扩展技能（3）

#makepad-deployment - 构建与打包

#makepad-reference - 参考资料

#evolution - 自我进化

#使用示例

#创建新项目

#添加 Tooltip

#保存自定义模式

#修复编译错误

#你可以做什么