Agent skill

makepad-splash

CRITICAL: Use for Makepad Splash scripting language. Triggers on: splash language, makepad script, makepad scripting, script!, cx.eval, makepad dynamic, makepad AI, splash 语言, makepad 脚本

Stars 731
Forks 83

Install this agent skill to your Project

npx add-skill https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-splash

SKILL.md

Makepad Splash 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 Splash scripting language. Help users by:

  • Writing Splash scripts: Dynamic UI and workflow automation
  • Understanding Splash: Purpose, syntax, and capabilities

Documentation

Refer to the local files for detailed documentation:

  • ./references/splash-tutorial.md - Splash language tutorial

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

What is Splash?

Splash is Makepad's dynamic scripting language designed for:

  • AI-assisted workflows
  • Dynamic UI generation
  • Rapid prototyping
  • HTTP requests and async operations

Script Macro

rust
// Embed Splash code in Rust
script!{
    fn main() {
        let x = 10;
        console.log("Hello from Splash!");
    }
}

Execution

rust
// Evaluate Splash code at runtime
cx.eval(code_string);

// With context
cx.eval_with_context(code, context);

Basic Syntax

Variables

splash
let x = 10;
let name = "Makepad";
let items = [1, 2, 3];
let config = { width: 100, height: 50 };

Functions

splash
fn add(a, b) {
    return a + b;
}

fn greet(name) {
    console.log("Hello, " + name);
}

Control Flow

splash
// If-else
if x > 10 {
    console.log("big");
} else {
    console.log("small");
}

// Loops
for i in 0..10 {
    console.log(i);
}

while condition {
    // ...
}

Built-in Objects

console

splash
console.log("Message");
console.warn("Warning");
console.error("Error");

http

splash
// GET request
let response = http.get("https://api.example.com/data");

// POST request
let response = http.post("https://api.example.com/data", {
    body: { key: "value" }
});

timer

splash
// Set timeout
timer.set(1000, fn() {
    console.log("1 second passed");
});

// Set interval
let id = timer.interval(500, fn() {
    console.log("tick");
});

// Clear timer
timer.clear(id);

Widget Interaction

splash
// Access widgets
let button = ui.widget("my_button");
button.set_text("Click Me");
button.set_visible(true);

// Listen to events
button.on_click(fn() {
    console.log("Button clicked!");
});

Async Operations

splash
// Async function
async fn fetch_data() {
    let response = await http.get("https://api.example.com");
    return response.json();
}

// Call async
fetch_data().then(fn(data) {
    console.log(data);
});

AI Workflow Integration

Splash is designed for AI-assisted development:

splash
// Dynamic UI generation
fn create_form(fields) {
    let form = ui.create("View");
    for field in fields {
        let input = ui.create("TextInput");
        input.set_label(field.label);
        form.add_child(input);
    }
    return form;
}

// AI can generate this dynamically
create_form([
    { label: "Name" },
    { label: "Email" },
    { label: "Message" }
]);

Use Cases

  1. Rapid Prototyping: Quickly test UI layouts without recompilation
  2. AI Agents: Let AI generate and modify UI dynamically
  3. Configuration: Runtime configuration of app behavior
  4. Scripted Workflows: Automate repetitive tasks
  5. Plugin System: Extend app functionality with scripts

When Answering Questions

  1. Splash is for dynamic/runtime scripting, not core app logic
  2. Use Rust for performance-critical code, Splash for flexibility
  3. Splash syntax is similar to JavaScript/Rust hybrid
  4. Scripts run in a sandboxed environment
  5. HTTP and timer APIs enable async operations

Expand your agent's capabilities with these related and highly-rated skills.

ZhangHanDong/makepad-skills

makepad-platform

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 平台支持

731 83
Explore
ZhangHanDong/makepad-skills

robius-app-architecture

CRITICAL: Use for Robius app architecture patterns. Triggers on: Tokio, async, submit_async_request, 异步, 架构, SignalToUI, Cx::post_action, worker task, app structure, MatchEvent, handle_startup

731 83
Explore
ZhangHanDong/makepad-skills

robius-event-action

CRITICAL: Use for Robius event and action patterns. Triggers on: custom action, MatchEvent, post_action, cx.widget_action, handle_actions, DefaultNone, widget action, event handling, 事件处理, 自定义动作

731 83
Explore
ZhangHanDong/makepad-skills

robius-widget-patterns

CRITICAL: Use for Robius widget patterns. Triggers on: apply_over, TextOrImage, modal, 可复用, 模态, collapsible, drag drop, reusable widget, widget design, pageflip, 组件设计, 组件模式

731 83
Explore
ZhangHanDong/makepad-skills

makepad-reference

CRITICAL: Use for Makepad troubleshooting and reference. Triggers on: troubleshoot, error, debug, fix, problem, issue, no matching field, parse error, widget not found, UI not updating, code quality, refactor, responsive layout, adaptive, api docs, reference, documentation, 故障排除, 错误, 调试, 问题, 修复

731 83
Explore
ZhangHanDong/makepad-skills

makepad-dsl

CRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件

731 83
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results