Provides architectural guidance and best practices for developing fluid UIs with QML and Qt Quick.

Install

mkdir -p .claude/skills/qt-qml && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9660" && unzip -o skill.zip -d .claude/skills/qt-qml && rm skill.zip

Installs to .claude/skills/qt-qml

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

QML and Qt Quick — declarative UI language for modern Qt applications. Use when building a QML-based UI, embedding QML in a Python/C++ app, exposing Python/C++ objects to QML, creating QML components, or choosing between QML and widgets. Trigger phrases: "QML", "Qt Quick", "declarative UI", "QQmlApplicationEngine", "expose to QML", "QML component", "QML signal", "pyqtProperty", "QML vs widgets", "QtQuick.Controls", "Item", "Rectangle"
438 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • Declarative UI creation
  • Component design
  • Exposing C++/Python objects
  • Fluid animation implementation

How it works

Uses declarative QML language to define UI structure and behavior with Qt Quick.

Inputs & outputs

You give it
QML/UI requirements
You get back
Declarative UI components

When to use qt-qml

  • Develop QML UI component
  • Expose c++ object to qml
  • Compare qml vs widgets
  • Create fluid animations

About this skill

QML and Qt Quick

QML vs Widgets: When to Choose QML

Use QML when...Use Widgets when...
Building modern, animated, fluid UIsBuilding traditional desktop tools
Targeting mobile or embeddedHeavy data tables and forms
Designers are involved in the UIRich text editing required
GPU-accelerated rendering neededComplex platform widget integration
Writing a new app from scratchExtending an existing widget app

For new Python/PySide6 desktop applications, QML offers better visual results with less code. For data-heavy enterprise tools, widgets remain the pragmatic choice.

Bootstrap and architecture — see references/qml-architecture.md

Official Best Practices (Qt Quick)

1. Type-safe property declarations — Always use explicit types, not var:

// WRONG — prevents static analysis, unclear errors
property var name

// CORRECT
property string name
property int count
property MyModel optionsModel

2. Prefer declarative bindings over imperative assignments:

// WRONG — imperative assignment overwrites bindings, breaks Qt Design Studio
Rectangle {
    Component.onCompleted: color = "red"
}

// CORRECT — declarative binding, evaluates once at load
Rectangle {
    color: "red"
}

3. Interaction signals over value-change signals:

// WRONG — valueChanged fires on clamping/rounding, causes event cascades
Slider { onValueChanged: model.update(value) }

// CORRECT — moved only fires on user interaction
Slider { onMoved: model.update(value) }

4. Don't anchor the immediate children of Layouts:

// WRONG — anchors on direct Layout children cause binding loops
RowLayout {
    Rectangle { anchors.fill: parent }
}

// CORRECT — use Layout attached properties
RowLayout {
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredHeight: 40
    }
}

5. Don't customize native styles — Windows and macOS native styles ignore QSS. Base all custom styling on cross-platform styles: Basic, Fusion, Material, or Universal:

// In main() — must be set before QGuiApplication
QQuickStyle.setStyle("Material")

6. Make all user-visible strings translatable from the start:

Label { text: qsTr("Save File") }
Button { text: qsTr("Cancel") }

Exposing Python Objects to QML

Three methods: Required Properties (preferred), Context Property, Registered QML Type.

Key rule: @Slot is mandatory for any Python method callable from QML. Missing it causes TypeError at runtime.

Full patterns — see references/qml-pyside6.md

QML Signals and Connections

Full patterns — see references/qml-signals-properties.md

Common QtQuick.Controls Components

Full component reference — see references/qml-components.md

When not to use it

  • Data-heavy enterprise forms
  • Traditional desktop widget apps

Prerequisites

Python or C++

Limitations

  • Not for rich text editing
  • Requires Qt framework

How it compares

Provides a modern, animated, and fluid UI approach compared to traditional widget-based systems.

Compared to similar skills

qt-qml side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
qt-qml (this skill)05moNo flagsIntermediate
textual1439moReviewIntermediate
pyside6-qml-views05moNo flagsIntermediate
anywidget-marimo05moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry