npx claudepluginhub slint-ui/slint --plugin slintThis skill uses the workspace's default tool permissions.
Use this skill when building, debugging, or reviewing applications that use [Slint](https://slint.dev), a declarative GUI toolkit for native user interfaces across desktop, embedded, mobile, and web platforms.
Guides building MCP Apps for rendering interactive HTML UIs in sandboxed iframes inside MCP hosts like Claude Desktop, ChatGPT, VS Code Copilot.
Converts existing web apps to hybrid MCP Apps that render standalone or inline in MCP hosts, using shared UI code, context detection, and server tool registration.
Builds MCP apps adding interactive UI widgets like forms, pickers, dashboards, and confirmation dialogs to MCP servers for inline rendering in Claude and ChatGPT chats.
Share bugs, ideas, or general feedback.
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.
Use this skill when the task involves:
.slint filesWhen using this skill:
Slint UIs are written in .slint markup files. The language is declarative and reactive.
# Cargo.toml
[dependencies]
slint = "1.x"
[build-dependencies]
slint-build = "1.x"
// 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()
}
Use CMake with FetchContent or find_package:
find_package(Slint)
slint_target_sources(my_app ui/main.slint)
const slint = require("slint-ui");
const app = new slint.MainWindow();
app.run();
import slint
# Load .slint files dynamically
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.
Elements not visible: Check width, height (may be 0 if not in a layout), visible, opacity, and parent clipping.
Layout sizing: Elements outside layouts need explicit width/height. Inside layouts, they get sized automatically. Use preferred-width, min-width, max-width to constrain.
Type mismatches: length and int/float are different types. Use 1px * my_int to convert, or my_length / 1px to get a number.
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("message", expression) prints to stderr at runtimeSLINT_DEBUG_PERFORMANCE=refresh_lazy,console enables performance diagnosticsSLINT_BACKEND=winit-skia or other backend variants for testingSlint 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.
Important: The MCP server is exposed through the internal crate i-slint-backend-selector, not the public slint crate. This internal crate does not follow semver and must be pinned to the exact Slint version using =. If the project uses slint = "1.16.0", then the backend selector must use version = "=1.16.0". A version mismatch will cause build failures.
Step 1: Add the i-slint-backend-selector crate with the mcp feature to the project's Cargo.toml, pinned to the exact same version as the slint crate:
[dependencies]
slint = "1.16.0"
i-slint-backend-selector = { version = "=1.16.0", features = ["mcp"] }
If the project is part of a workspace that depends on Slint from a path (e.g. working within the Slint repo itself), use the workspace reference instead and enable the feature via --features i-slint-backend-selector/mcp on the cargo command line.
Step 2: Build with SLINT_EMIT_DEBUG_INFO=1 so that element IDs and source locations are preserved in the compiled output. Without this, elements will lack the debug metadata needed for meaningful introspection. Set SLINT_MCP_PORT to an available port when running:
SLINT_EMIT_DEBUG_INFO=1 SLINT_MCP_PORT=9315 cargo run -p my-app
Step 3: Connect to the running application's MCP server at http://localhost:9315/mcp using Streamable HTTP transport and use the available tools to inspect and interact with the UI.
The MCP server uses internal Slint APIs (i-slint-backend-selector), so the available features depend on the Slint version:
| Slint Version | MCP Support |
|---|---|
| < 1.16.0 | Not available |
| >= 1.16.0 | Full MCP server with i-slint-backend-selector mcp feature |
The i-slint-backend-selector crate does not follow semver. It must be pinned to the exact Slint version with =. MCP features and tools may change between Slint releases without notice.
Suggest enabling the MCP server when the user is:
Full documentation for the latest version is at https://slint.dev/docs. Key sections:
For a specific Slint version, the documentation can be found at https://releases.slint.dev/<version>/docs, for example https://releases.slint.dev/1.15.1/docs.