Skip to content
Skillpedia
Websites & UI (frontend)48k · #3537

makepad-platform

Helps your agent ensure Makepad apps work across different operating systems and platforms. Useful for reaching a wider audience.

What it does

This tool helps you understand and write code for different operating systems (like Windows, macOS, Linux, Android, iOS, and Web) using the Makepad platform. It explains which systems are supported and how code adapts to each.

When to use it

  • ✓When you want to know which systems (mobile, desktop, web) your Makepad app can run on.
  • ✓If you need to write code sections that only work on a specific system (e.g., only on Windows).
  • ✓To understand how Makepad uses different graphics technologies (like Metal, OpenGL) on each system.

Example of what to ask your AI

“How do I make my Makepad app work on Android and also in a web browser?”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-platform/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-platform/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The AI checks information about the platforms Makepad supports and how code can be adapted. It uses both general knowledge about Makepad and specific information from documentation files, if available.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add sickn33/agentic-awesome-skills --skill makepad-platform

Or download just the file:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-platform/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Supporting material availability

This catalog copy contains the inline guidance below, but does not include the following supporting paths. They are external prerequisites, not bundled files:

  • ./references/platform-support.md

Ask for the original supporting material or an existing installation before using a step that depends on these paths; this catalog does not identify a verified download source for them. Resolve each path relative to that installation, inspect its contents, and verify any applicable license and execution prerequisites. Do not run a command or claim a referenced procedure was followed until its required file exists. Do not fabricate the missing scripts or treat an unrelated file with the same name as equivalent. Independent steps fully documented here can proceed within the user’s authorized scope; report any dependent step as unavailable.

Makepad Platform Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad cross-platform development. Help users by:

  • Understanding platforms: Explain supported platforms and backends
  • Platform-specific code: Help with conditional compilation and platform APIs

When to Use

  • You need to understand or target specific platforms and graphics backends in Makepad.
  • The task involves platform compatibility, conditional compilation, or OS-specific behavior across desktop, mobile, or web.
  • You need guidance on backend differences such as Metal, D3D11, OpenGL, WebGL, or platform modules.

Documentation

Refer to the local files for detailed documentation:

  • ./references/platform-support.md - Platform details and OsType

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

  1. Read the relevant reference file(s) listed above
  2. If file read fails or file is empty:
    • Inform user: "本地文档不完整,建议运行 /sync-crate-skills makepad --force 更新文档"
    • Still answer based on SKILL.md patterns + built-in knowledge
  3. If reference file exists, incorporate its content into the answer

Supported Platforms

Platform Graphics Backend OS Module
macOS Metal apple/metal_*.rs, apple/cocoa_*.rs
iOS Metal apple/metal_*.rs, apple/ios_*.rs
Windows D3D11 mswindows/d3d11_*.rs, mswindows/win32_*.rs
Linux OpenGL linux/opengl_*.rs, linux/x11*.rs, linux/wayland*.rs
Web WebGL2 web/*.rs, web_browser/*.rs
Android OpenGL ES android/*.rs
OpenHarmony OHOS open_harmony/*.rs
OpenXR VR/AR open_xr/*.rs

OsType Enum

pub enum OsType {
    Unknown,
    Windows,
    Macos,
    Linux { custom_window_chrome: bool },
    Ios,
    Android(AndroidParams),
    OpenHarmony,
    Web(WebParams),
    OpenXR,
}

// Check platform in code
fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
    match cx.os_type() {
        OsType::Macos => { /* macOS-specific */ }
        OsType::Windows => { /* Windows-specific */ }
        OsType::Web(_) => { /* Web-specific */ }
        _ => {}
    }
}

Platform Detection

// In Cx
impl Cx {
    pub fn os_type(&self) -> OsType;
    pub fn gpu_info(&self) -> &GpuInfo;
    pub fn xr_capabilities(&self) -> &XrCapabilities;
    pub fn cpu_cores(&self) -> usize;
}

Conditional Compilation

// Compile-time platform detection
#[cfg(target_os = "macos")]
fn macos_only() { }

#[cfg(target_os = "windows")]
fn windows_only() { }

#[cfg(target_os = "linux")]
fn linux_only() { }

#[cfg(target_arch = "wasm32")]
fn web_only() { }

#[cfg(target_os = "android")]
fn android_only() { }

#[cfg(target_os = "ios")]
fn ios_only() { }

Platform-Specific Features

Desktop (macOS/Windows/Linux)

  • Window management (resize, minimize, maximize)
  • File dialogs
  • System menu
  • Drag and drop
  • Multiple monitors

Mobile (iOS/Android)

  • Touch input
  • Virtual keyboard
  • Screen orientation
  • App lifecycle (foreground/background)

Web (WebGL2)

  • DOM integration
  • Browser events
  • Local storage
  • HTTP requests

Entry Point

// App entry macro
app_main!(App);

pub struct App {
    ui: WidgetRef,
}

impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        // Register components
        crate::makepad_widgets::live_design(cx);
    }
}

impl AppMain for App {

…
FAQ

What are 'graphics backends'?

These are the technologies Makepad uses to draw on the screen for each system. Examples include Metal (for Apple), D3D11 (for Windows), and OpenGL (for Linux and Android).

How does the code know which system it's running on?

There are two ways: the code can check at runtime (when the program is running) using `cx.os_type()`, or at compile time (before the program is built) using `#[cfg(target_os = '...')`.

What does 'Makepad cross-platform' mean?

It means Makepad allows you to write code that works on multiple different operating systems (desktop, mobile, web) without needing to rewrite everything for each one.

Details

Original description by the author

CRITICAL: Use for Makepad cross-platform support. Triggers on: makepad platform, makepad os, makepad macos, makepad windows, makepad linux, makepad android, makepad ios, makepad web, makepad wasm, makepad metal, makepad d3d11, makepad opengl, makepad webgl, OsType, CxOs, makepad 跨平台, makepad 平台支持

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#3537
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills