Claude Code skills for building cross-platform UI applications with the Makepad framework in Rust.
Makepad is a next-generation UI framework written in Rust that enables building high-performance, cross-platform applications. Key features include:
- Cross-Platform: Single codebase for Desktop (macOS, Windows, Linux), Mobile (Android, iOS), and Web (WebAssembly)
- GPU-Accelerated: Custom shader-based rendering with SDF (Signed Distance Field) drawing
- Live Design: Hot-reloadable
live_design!DSL for rapid UI development - High Performance: Native compilation, no virtual DOM, minimal runtime overhead
Project Robius is an open-source initiative to build a full-featured application development framework in Rust. Production applications built with Makepad include:
- Robrix - A Matrix chat client showcasing real-time messaging, E2E encryption, and complex UI patterns
- Moly - An AI model manager demonstrating data-heavy interfaces and async operations
These skills are extracted from patterns used in Robrix and Moly.
Copy the skills folder to .claude/skills in your Makepad project:
# Clone this repo
git clone https://github.com/project-robius/makepad-skills.git
# Copy to your project
cp -r makepad-skills/skills your-project/.claude/skillsYour project structure should look like:
your-project/
├── .claude/
│ └── skills/
│ ├── .claude-plugin/
│ │ └── plugin.json
│ ├── makepad-init/
│ ├── makepad-fundamentals/
│ └── ... (other skills)
├── src/
└── Cargo.toml
See Claude Code Skills documentation for more details.
| Skill | Description | When to Use |
|---|---|---|
| makepad-init | Project scaffolding | "Create a new Makepad app" |
| makepad-project-structure | Directory organization best practices | "How should I organize my Makepad project?" |
| Skill | Description | When to Use |
|---|---|---|
| makepad-fundamentals | live_design! macro, widgets, events, timers |
"How do I create a button?", "Handle click events" |
| makepad-rust | Ownership, derives, async/tokio, state management | "Borrow checker error", "How to do async in Makepad?" |
| makepad-shaders | SDF drawing, custom shaders, visual effects | "Create a gradient background", "Animate a glow effect" |
| makepad-patterns | Modals, lists, navigation, theming | "Add a modal dialog", "Implement infinite scroll" |
| makepad-adaptive-layout | Responsive layouts, AdaptiveView, StackNavigation | "Support both desktop and mobile" |
| Skill | Description | When to Use |
|---|---|---|
| makepad-packaging | Build for desktop, Android, iOS, WebAssembly | "Build APK for Android", "Deploy to web" |
| Skill | Description | When to Use |
|---|---|---|
| makepad-troubleshooting | Common errors and fixes | "Apply error: no matching field", "UI not updating" |
| makepad-code-quality | Makepad-aware refactoring | "Simplify this code" (knows what NOT to simplify) |
| Skill | Description | When to Use |
|---|---|---|
| makepad-evolution | Capture learnings during development | Auto-triggered when discovering new patterns |
User: Create a new Makepad app called "my-app" with a counter button
Claude: [Uses makepad-init to scaffold project, makepad-fundamentals for button/counter]
User: Fetch user data from an API without blocking the UI
Claude: [Uses makepad-rust for tokio architecture, makepad-patterns for loading states]
User: Build my app for Android
Claude: [Uses makepad-packaging for APK generation]
User: Getting "no matching field: font" error
Claude: [Uses makepad-troubleshooting to identify correct text_style syntax]
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
Real-world projects created using makepad-skills and Claude Code:
| Project | Description | Time |
|---|---|---|
| makepad-skills-demo | Currency converter app demo | ~20 min |
| makepad-component | Reusable Makepad component library | - |
MIT
