Slint Development Skill

For building, debugging, or reviewing apps that use Slint, a declarative GUI toolkit for desktop, embedded, mobile, and web.

Workflow

1. Find the project's Slint version first (Cargo.toml/Cargo.lock, package.json, pyproject.toml, or the CMake find_package/FetchContent line). This skill targets Slint ≥ 1.17 and its prose assumes the latest release; anything that needs a specific version is flagged inline as (1.17+), (1.18+), … When the project pins an older version, or for exact element/property/widget signatures, trust that version's docs over this file rather than guessing.
2. After editing: in an IDE with the Slint extension, trust the post-edit diagnostics; in a terminal, slint-viewer --check ui/main.slint compiles one file and prints diagnostics, and slint-viewer --screenshot renders it (both (1.17+); debugging-and-mcp.md).
3. Never declare UI work done without looking at a render — a screenshot for appearance, the MCP server for interactions. Review against polish.md.
4. Share the render when the host supports it: inline the screenshot in chat apps, or print its absolute path and summarize the visual checks in CLI-only environments.
5. Offer to run slint-viewer --auto-reload ui/main.slint so the user watches changes live while you edit.

Most "won't compile" / "won't fill" / "padding ignored" questions are answered in gotchas.md and language-and-layout.md.

Reference Files

Skim the matching file before building in that area, not only when stuck.

.slint in 30 seconds

Declarative and reactive: a property binding re-evaluates automatically when anything it reads changes.

import { Button, VerticalBox } from "std-widgets.slint";

component Counter inherits Rectangle {     // root element decides fill behavior
    in property <string> label;            // parent/host writes
    out property <int> count;              // component writes
    callback changed(int);                 // notify the outside world

    VerticalBox {
        Text { text: "\{root.label}: \{root.count}"; }   // interpolation
        Button { text: "+"; clicked => { root.count += 1; root.changed(root.count); } }
    }
}

Property directions: in / out / in-out / private. Two-way bind: a <=> b. Control flow: if cond : E {}, for it[i] in model : E {}. Shared state & host interop: export global Foo { ... }. One-time code: init => { ... }.

Documentation

The docs are the authority on element, property, and widget signatures; this skill only covers what agents commonly get wrong.

When a Slint docs MCP is attached (this plugin declares one at https://docs.slint.dev/mcp), prefer it: search, then fetch a result's url. Otherwise fetch over HTTP — latest at https://slint.dev/docs, a version pinned at https://releases.slint.dev/<version>/docs. Every page also serves its markdown source (1.17+): swap the trailing slash for .md (…/colors-and-brushes/ → …/colors-and-brushes.md), ~10× smaller than the HTML. It is raw MDX, so skip import lines; a few pages pull snippets from external files that won't appear inline.