Slint Development Skill
For building, debugging, or reviewing apps that use Slint,
a declarative GUI toolkit for desktop, embedded, mobile, and web.
Workflow
- 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.
- 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).
- Never declare UI work done without looking at a render — a screenshot for
appearance, the MCP server for interactions. Review against
polish.md.
- 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.
- 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.
| File |
Read when… |
| setup.md |
Starting a project / wiring the build (Rust/C++/Node/Python). |
| language-and-layout.md |
Writing components; an element won't size/fill as expected. |
| gotchas.md |
A file won't compile, or colors/units/math/enums behave oddly. |
| events-and-overlays.md |
Clicks/keys/modifiers, or popovers/menus/context menus. |
| icons-and-theming.md |
Icons, or light/dark theming. |
| interop.md |
Connecting the UI to host-language logic (models, callbacks, globals). |
| polish.md |
The UI works but looks rough; reviewing a rendered screenshot. |
| debugging-and-mcp.md |
Runtime debugging, headless/CI rendering, screenshots, the MCP server. |
| tools-install.md |
Installing slint-lsp (language server) or slint-viewer (preview / screenshots). |
.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.
1---2name: slint3description: Use when writing, editing, debugging, or reviewing `.slint` UI code, or wiring it to Rust/C++/JS/Python — the Slint language, layout, compile-time gotchas, interop, and the MCP server for runtime checks.4---56# Slint Development Skill78For building, debugging, or reviewing apps that use [Slint](https://slint.dev),9a declarative GUI toolkit for desktop, embedded, mobile, and web.1011## Workflow12131. Find the project's Slint version first (`Cargo.toml`/`Cargo.lock`,14 `package.json`, `pyproject.toml`, or the CMake `find_package`/`FetchContent`15 line). This skill targets Slint **≥ 1.17** and its prose assumes the latest16 release; anything that needs a specific version is flagged inline as17 `(1.17+)`, `(1.18+)`, … When the project pins an *older* version, or for18 exact element/property/widget signatures, trust that version's docs over19 this file rather than guessing.202. After editing: in an IDE with the Slint extension, trust the post-edit21 diagnostics; in a terminal, `slint-viewer --check ui/main.slint` compiles22 one file and prints diagnostics, and `slint-viewer --screenshot` renders it23 (both `(1.17+)`; [debugging-and-mcp.md](reference/debugging-and-mcp.md)).243. Never declare UI work done without looking at a render — a screenshot for25 appearance, the MCP server for interactions. Review against26 [polish.md](reference/polish.md).274. Share the render when the host supports it: inline the screenshot in chat28 apps, or print its absolute path and summarize the visual checks in CLI-only29 environments.305. Offer to run `slint-viewer --auto-reload ui/main.slint` so the user watches31 changes live while you edit.3233Most "won't compile" / "won't fill" / "padding ignored" questions are answered34in [gotchas.md](reference/gotchas.md) and35[language-and-layout.md](reference/language-and-layout.md).3637## Reference Files3839Skim the matching file *before* building in that area, not only when stuck.4041| File | Read when… |42|---|---|43| [setup.md](setup.md) | Starting a project / wiring the build (Rust/C++/Node/Python). |44| [language-and-layout.md](reference/language-and-layout.md) | Writing components; an element won't size/fill as expected. |45| [gotchas.md](reference/gotchas.md) | A file won't compile, or colors/units/math/enums behave oddly. |46| [events-and-overlays.md](reference/events-and-overlays.md) | Clicks/keys/modifiers, or popovers/menus/context menus. |47| [icons-and-theming.md](reference/icons-and-theming.md) | Icons, or light/dark theming. |48| [interop.md](reference/interop.md) | Connecting the UI to host-language logic (models, callbacks, globals). |49| [polish.md](reference/polish.md) | The UI works but looks rough; reviewing a rendered screenshot. |50| [debugging-and-mcp.md](reference/debugging-and-mcp.md) | Runtime debugging, headless/CI rendering, screenshots, the MCP server. |51| [tools-install.md](tools-install.md) | Installing `slint-lsp` (language server) or `slint-viewer` (preview / screenshots). |5253## `.slint` in 30 seconds5455Declarative and reactive: a property binding re-evaluates automatically when56anything it reads changes.5758```slint59import { Button, VerticalBox } from "std-widgets.slint";6061component Counter inherits Rectangle { // root element decides fill behavior62 in property <string> label; // parent/host writes63 out property <int> count; // component writes64 callback changed(int); // notify the outside world6566 VerticalBox {67 Text { text: "\{root.label}: \{root.count}"; } // interpolation68 Button { text: "+"; clicked => { root.count += 1; root.changed(root.count); } }69 }70}71```7273Property directions: `in` / `out` / `in-out` / `private`. Two-way bind: `a <=> b`.74Control flow: `if cond : E {}`, `for it[i] in model : E {}`. Shared state & host75interop: `export global Foo { ... }`. One-time code: `init => { ... }`.7677## Documentation7879The docs are the authority on element, property, and widget signatures; this80skill only covers what agents commonly get wrong.8182When a Slint docs MCP is attached (this plugin declares one at83`https://docs.slint.dev/mcp`), prefer it: `search`, then `fetch` a result's84`url`. Otherwise fetch over HTTP — latest at https://slint.dev/docs, a version85pinned at `https://releases.slint.dev/<version>/docs`. Every page also serves86its markdown source `(1.17+)`: swap the trailing slash for `.md`87(`…/colors-and-brushes/` → `…/colors-and-brushes.md`), ~10× smaller than the88HTML. It is raw MDX, so skip `import` lines; a few pages pull snippets from89external files that won't appear inline.
slint-ui