Build cross-platform apps with Makepad and AI skills. Developers use this to create applications with Rust, integrating Claude for code assistance. Connects to Makepad's design and development tools.
git clone https://github.com/ZhangHanDong/makepad-skills.githttps://docs.anthropic.com/en/docs/claude-code/skills
[{"step":"Set up your Makepad environment","action":"Install Rust (rustup), Makepad (cargo install makepad-build), and your target platform toolchains (e.g., `rustup target add x86_64-pc-windows-msvc` for Windows). Run `makepad new my_app` to generate a starter project.","tip":"Use `makepad build --platform [PLATFORM]` to test cross-platform compatibility early in development."},{"step":"Define your app's UI structure","action":"Edit the `live_design!` macro in `src/main.rs` to define your app's layout using Makepad's widget system. Use the example's PortalList for scrollable content and Button/Label for interactive elements.","tip":"Start with a simple layout and iterate. Makepad's live reloading lets you see changes instantly without full rebuilds."},{"step":"Implement core functionality","action":"Write Rust code in `main.rs` to handle user interactions (button clicks, form submissions) and manage state. Use the `App` struct to store your app's data and implement methods like `add_task()` for business logic.","tip":"Leverage Makepad's `LiveHook` trait for hot-reloading. Store mutable state in `#[rust]` fields to avoid live reloading issues."},{"step":"Add platform-specific features","action":"Use Makepad's platform abstraction layer (`makepad-platform`) to add features like file dialogs, system tray icons, or native menus. Check the Makepad documentation for platform-specific APIs.","tip":"Test platform-specific code on each target early to catch compatibility issues."},{"step":"Build and distribute","action":"Run `makepad build --release --platform [PLATFORM]` to compile your app. Use `makepad bundle` to create distributable packages (e.g., `.exe`, `.app`, `.deb`).","tip":"Set up CI/CD pipelines using Makepad's build scripts to automate cross-platform releases."}]
Rapidly develop cross-platform UI applications using Makepad.
Implement GPU-accelerated graphics for enhanced application performance.
Utilize live design features for quick iterations on UI components.
Integrate community-contributed patterns to extend application functionality.
No install command available. Check the GitHub repository for manual installation instructions.
git clone https://github.com/ZhangHanDong/makepad-skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Build a cross-platform desktop app for [APP_NAME] using Makepad and Rust. The app should have [FEATURES] and follow Makepad's design system. Use [SPECIFIC_LIBRARY] for [FUNCTIONALITY]. Generate the complete project structure, including Cargo.toml, main.rs, and UI files. Write idiomatic Rust code with comments explaining key sections. Include error handling for [COMMON_ERROR_CASES].
```rust
// Makepad App: Task Manager v1.0
// Project structure generated for cross-platform (Windows/macOS/Linux)
// Cargo.toml
[package]
name = "task_manager"
version = "0.1.0"
edition = "2021"
[dependencies]
makepad-widgets = "0.3.0"
makepad-platform = "0.3.0"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
[lib]
crate-type = ["cdylib", "rlib"]
// src/main.rs
use makepad_widgets::*;
live_design! {
import makepad_widgets::base::*;
import makepad_widgets::theme_desktop_dark::*;
App = {{App}} {
flow: Down, spacing: 10.0
width: Fill, height: Fill
header = <View> {
width: Fill, height: 60
flow: Right, spacing: 10
<Label> { text: "Task Manager" }
<Button> { text: "Add Task" }
}
task_list = <PortalList> {
width: Fill, height: Fill
flow: Down, spacing: 5
Task = {{Task}} {
width: Fill, height: 50
flow: Right, spacing: 10
<Checkbox> {
checked: false
on_toggle: self.set_checked()
}
<Label> { text: "[TASK_DESCRIPTION]" }
<Button> { text: "Delete" }
}
}
}
}
#[derive(Live, LiveHook)]
pub struct App {
#[live] task_list: PortalListRef,
#[rust] tasks: Vec<TaskData>
}
#[derive(Clone, Debug, Default, Serialize, Deserialize)]
struct TaskData {
id: u64,
description: String,
completed: bool
}
impl LiveRegister for App {
fn live_register(cx: &mut Cx) {
crate::makepad_task_manager::live_design(cx);
}
}
impl AppMain for App {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
// Event handling for button clicks, checkbox toggles, etc.
self.task_list.handle_event(cx, event, scope);
if let Event::Actions(actions) = event {
if self.button(id!(add_task)).clicked(actions) {
self.add_task(cx, "New Task".to_string());
}
}
}
fn draw_walk(&mut self, cx: &mut Cx2d, walk: Walk) {
// Render the UI
self.task_list.draw_walk(cx, walk);
}
}
impl App {
pub fn add_task(&mut self, cx: &mut Cx, description: String) {
let task = TaskData {
id: self.tasks.len() as u64,
description,
completed: false
};
self.tasks.push(task);
self.task_list.redraw(cx);
}
}
app_main!(App);
```
**Project Structure:**
```
task_manager/
├── Cargo.toml
├── src/
│ ├── main.rs
│ └── makepad_task_manager/
│ ├── live_design.rs
│ └── lib.rs
├── assets/
│ └── icons/
└── makepad.toml
```
**Key Features Implemented:**
1. Cross-platform compatible (Windows/macOS/Linux)
2. Task list with checkboxes and delete functionality
3. Add task button with real-time updates
4. Persistent state using serde_json
5. Makepad's responsive design system
**Next Steps:**
- Run `makepad build --release` to compile
- Test on target platforms
- Extend with additional features like task categories or due datesVisual workflow builder for no-code automation and integration
IronCalc is a spreadsheet engine and ecosystem
ITIL-aligned IT service management platform
Customer feedback management made simple
Enterprise workflow automation and service management platform
Automate your spreadsheet tasks with AI power
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan