Guide
SKILLS And Components
API
Contribute
Guide
SKILLS And Components
API
Contribute

Makepad Skills

Version License

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

Agent skills for building cross-platform UI applications with the Makepad framework in Rust.

Installation

Plugin Marketplace (Recommended)

Install via Claude Code's plugin marketplace:

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

Using Plugin Skills:

Plugin skills are accessed via namespace format (they won't appear in /skills list, but can be loaded):

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 布局怎么居中？"

Manage installed plugins:

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

Shell Script Install

Use the install script for one-command setup:

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 note: Skills are experimental. Enable experimental.skills in /settings if needed.

Script features:

  • Auto-detects Rust/Makepad projects (checks for Cargo.toml)
  • Backs up existing skills before installation
  • --with-hooks copies and configures self-evolution hooks (Claude Code only)
  • --agent codex|claude-code|gemini chooses Codex, Claude Code, or Gemini CLI (default: claude-code)
  • --target allows installing to any project directory
  • Colored output with clear progress indicators

Available options:

OptionDescription
--target DIRInstall to specific directory (default: current)
--with-hooksEnable self-evolution hooks (Claude Code only)
--agent AGENTSet agent: codex, claude-code, or gemini (default: claude-code)
--branch NAMEUse specific branch (default: main)
--helpShow help message

Manual Install

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

Your project structure should look like (use .codex or .gemini instead of .claude):

your-project/ ├── .claude/ │ └── skills/ │ ├── .claude-plugin/ │ │ └── plugin.json │ │ │ ├── # === Core Skills (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/ │ │ │ ├── # === Extended Skills (3) === │ ├── makepad-deployment/ │ ├── makepad-reference/ │ │ │ ├── evolution/ # Self-evolution system │ │ └── templates/ # Contribution templates │ └── CONTRIBUTING.md ├── src/ └── Cargo.toml

See Claude Code Skills documentation for more details.

Architecture: Atomic Skills for Collaboration

Why Atomic Structure?

v2.1 introduces an atomic skill structure designed for collaborative development:

robius-widget-patterns/ ├── SKILL.md # Index file ├── _base/ # Official patterns (numbered, atomic) │ ├── 01-widget-extension.md │ ├── 02-modal-overlay.md │ ├── ... │ └── 18-drag-drop-reorder.md └── community/ # Your contributions └── {descriptive-pattern-name}.md

Benefits:

  • No merge conflicts: Your community/ files never conflict with official _base/ updates
  • Parallel development: Multiple users can contribute simultaneously
  • Clear attribution: Your GitHub handle in filename provides credit
  • Progressive disclosure: SKILL.md index → individual pattern details

Self-Evolution: Enriching Skills from Your Development

The self-evolution feature allows you to capture patterns discovered during your development and add them to the skills.

How It Works

  1. During Development: You discover a useful pattern, shader, or error solution while building with Makepad

  2. Capture the Pattern: Ask Claude to save it:

    User: This tooltip positioning logic is useful. Save it as a community pattern. Claude: [Creates community/{handle}-tooltip-positioning.md using template]

  3. Auto-Detection (with hooks enabled): When you encounter and fix errors, the system can automatically capture solutions to troubleshooting

Enable Self-Evolution Hooks (Optional)

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

Manual Pattern Creation

Ask Claude directly:

User: Create a community pattern for the drag-drop reordering I just implemented Claude: I'll create a pattern using the template...

Claude will:

  1. Use the template from evolution/templates/pattern-template.md
  2. Create file at robius-widget-patterns/community/{descriptive-pattern-name}.md
  3. Fill in the frontmatter and content

Community Contribution Guide

Contributing Patterns

  1. Create your pattern file in the appropriate robius-* skill's community directory:

    • Widget patterns → robius-widget-patterns/community/
    • State patterns → robius-state-management/community/
    • Async patterns → robius-app-architecture/community/

  2. Use the template: Copy from evolution/templates/pattern-template.md

  3. Required 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---

  4. Submit PR to the main repository

Contributing Shaders/Effects

  1. Create your effect file:

    makepad-shaders/community/{github-handle}-{effect-name}.md

  2. Use the template: Copy from evolution/templates/shader-template.md

Contributing Error Solutions

  1. Create troubleshooting entry:

    makepad-reference/troubleshooting/{error-name}.md

  2. Use the template: Copy from evolution/templates/troubleshooting-template.md

Syncing with Upstream

Keep your local skills updated while preserving your contributions:

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

Promotion Path

High-quality community contributions may be promoted to _base/:

  • Pattern is widely useful and well-tested
  • Documentation is complete
  • Community feedback is positive
  • Credit preserved via author field

Skills Overview (v3.0 Flat Structure)

Core Skills (16)

Makepad Core (10 Skills)

SkillDescriptionWhen to Use
makepad-basicsApp structure, live_design!, app_main!"Create a new Makepad app"
makepad-dslDSL syntax, inheritance, prototypes"How to define widgets in DSL"
makepad-layoutFlow, sizing, spacing, alignment"Center a widget", "Arrange elements"
makepad-widgetsCommon widgets, custom widgets"Create a button", "Build a form"
makepad-event-actionEvent handling, actions"Handle click events"
makepad-animationAnimator, states, transitions"Add hover animation"
makepad-shadersShaders, SDF, gradients, visual effects"Custom visual effects"
makepad-platformPlatform support"Build for Android/iOS"
makepad-fontFont, text, typography"Change font, text styling"
makepad-splashSplash scripting language"Dynamic UI scripting"

Robius Patterns (5 Skills)

SkillDescriptionWhen to Use
robius-app-architectureTokio, async/sync patterns"Structure an async app"
robius-widget-patternsReusable widgets, apply_over"Create reusable components"
robius-event-actionCustom actions, MatchEvent"Custom event handling"
robius-state-managementAppState, persistence"Save/load app state"
robius-matrix-integrationMatrix SDK integration"Chat client features"

MolyKit (1 Skill)

SkillDescriptionWhen to Use
molykitAI chat, SSE streaming, BotClient"AI chat integration"

Extended Skills (3)

Note: Production patterns are now integrated into robius-* skills:

  • Widget patterns (11) → robius-widget-patterns/_base/
  • State patterns (5) → robius-state-management/_base/
  • Async patterns (3) → robius-app-architecture/_base/

makepad-deployment - Build & Package

Build for desktop (Linux, Windows, macOS), mobile (Android, iOS), and web (WebAssembly).

makepad-reference - Reference Materials

FileDescriptionWhen to Use
troubleshooting.mdCommon errors and fixes"Apply error: no matching field"
code-quality.mdMakepad-aware refactoring"Simplify this code"
adaptive-layout.mdDesktop/mobile responsive"Support both desktop and mobile"

evolution - Self-Improvement

ComponentDescription
templates/Pattern, shader, and troubleshooting templates
hooks/Auto-detection and validation hooks
references/Collaboration guidelines

Usage Examples

Create a New Project

User: Create a new Makepad app called "my-app" with a counter button Claude: [Uses makepad-basics for scaffolding, makepad-widgets for button/counter]

Add a Tooltip

User: Add a tooltip that shows user info on hover Claude: [Uses robius-widget-patterns/_base/14-callout-tooltip.md for complete implementation]

Save a Custom Pattern

User: Save this infinite scroll implementation as a community pattern Claude: [Creates robius-widget-patterns/community/infinite-scroll.md]

Fix Compilation Error

User: Getting "no matching field: font" error Claude: [Uses makepad-reference/troubleshooting.md to identify correct text_style syntax]

What You Can Build

With these skills, Claude can help you:

  • Initialize new Makepad projects with proper structure
  • Create custom widgets with live_design! DSL
  • Handle events and user interactions
  • Write GPU shaders for visual effects
  • Implement smooth animations
  • Manage application state with async/tokio
  • Build responsive desktop/mobile layouts
  • Package apps for all platforms
  • Capture and share patterns you discover during development
ON THIS PAGE