Slint

Slint Development Skill

Use this skill when building, debugging, or reviewing applications that use Slint, a declarative GUI toolkit for native user interfaces across desktop, embedded, mobile, and web platforms.

When to Use This Skill

Use this skill when the task involves:

• Writing or debugging .slint files
• Integrating Slint with Rust, C++, JavaScript, or Python
• Investigating layout, binding, rendering, or event-handling issues
• Enabling the Slint MCP server for runtime inspection and UI debugging
• Explaining or reviewing Slint-specific code patterns

How to Help

When using this skill:

• Prefer idiomatic Slint patterns over manual UI workarounds
• Match guidance to the user's language binding and Slint version
• Watch for common pitfalls such as binding loops, missing layout constraints, and type mismatches
• Suggest the MCP server when runtime inspection or interaction would make debugging easier
• Prefer solutions that preserve Slint's declarative and reactive model

The .slint Language

Slint UIs are written in .slint markup files. The language is declarative and reactive.

Naming Conventions

Follow these project naming conventions when writing .slint and related Rust files:

1. Components and Structs: Use PascalCase for component names and struct types (e.g., QueuePage, SongModel, TextInputGroup, ModalSize).
2. Properties, Variables, Callbacks, and Functions: All Slint variables, properties, callbacks, and functions MUST be snake_case and NEVER kebab-case (e.g., in property <bool> is_active;, in-out property <string> new_playlist_name;, callback remove_clicked();, save_queue_as_playlist(string)).
3. Rust Function Names: Follow standard Rust snake_case, keep names simple and obvious, and avoid repeating struct/module context in function names (e.g., save_queue rather than save_queue_page_queue_songs).

Project Setup

Rust

# BUILD.bazel
load("@rules_rust//rust:defs.bzl", "rust_binary")
load("@rules_rust//cargo:cargo_build_script.bzl", "cargo_build_script")

cargo_build_script(
    name = "build_script",
    srcs = ["build.rs"],
    # Ensure the build script watches the .slint files for rebuilds
    data = glob(["ui/**/*.slint"]),
    deps = [
        "@crates//:slint-build",
    ],
)

rust_binary(
    name = "my_app",
    srcs = ["main.rs"],
    deps = [
        ":build_script",
        "@crates//:slint",
    ],
)

// build.rs
fn main() {
    slint_build::compile("ui/main.slint").unwrap();
}

// main.rs
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = MainWindow::new()?;
    // Set up callbacks, models, etc.
    app.run()
}

Debugging Slint Applications

Common Issues

1. Binding loops: A property depends on itself through a chain of bindings. The compiler warns about these. Break the cycle by introducing an intermediate property or restructuring.
2. Elements not visible: Check width, height (may be 0 if not in a layout), visible, opacity, and parent clipping.
3. Layout sizing: Elements outside layouts need explicit width/height. Inside layouts, they get sized automatically. Use preferred-width, min-width, max-width to constrain.
4. Type mismatches: length and int/float are different types. Use 1px * my_int to convert, or my_length / 1px to get a number.
5. Performance: Use ListView (not for in ScrollView) for long lists because it virtualizes. Use image-rendering: pixelated only when needed. Avoid deeply nested opacity or clip layers.

Debug Helpers

• debug("message", expression) prints to stderr at runtime
• SLINT_DEBUG_PERFORMANCE=refresh_lazy,console enables performance diagnostics
• Run with SLINT_BACKEND=winit-skia or other backend variants for testing

MCP Server for AI-Assisted Debugging

Slint includes an embedded MCP (Model Context Protocol) server that lets you inspect and interact with a running Slint application in real time. The server provides tools for exploring the UI tree, taking screenshots, clicking elements, dragging, typing, and more.

Once enabled, an AI coding assistant can connect to the MCP endpoint to inspect and interact with the running UI.