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.zipInstalls 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"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
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 UIs | Building traditional desktop tools |
| Targeting mobile or embedded | Heavy data tables and forms |
| Designers are involved in the UI | Rich text editing required |
| GPU-accelerated rendering needed | Complex platform widget integration |
| Writing a new app from scratch | Extending 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
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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| qt-qml (this skill) | 0 | 5mo | No flags | Intermediate |
| textual | 143 | 9mo | Review | Intermediate |
| pyside6-qml-views | 0 | 5mo | No flags | Intermediate |
| anywidget-marimo | 0 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sleepyvani
View all by sleepyvani →You might also like
textual
KyleKing
Expert guidance for building TUI (Text User Interface) applications with the Textual framework. Invoke when user asks about Textual development, TUI apps, widgets, screens, CSS styling, reactive programming, or testing Textual applications.
pyside6-qml-views
sleepyvani
Use this skill when creating QML view files, designing QML component hierarchies, building layouts, styling QML controls, creating reusable QML components, implementing QML navigation / page switching, or working with QML resources. Covers QML file structure, component patterns, Material/Controls st
anywidget-marimo
diegosouzapw
Toolkit for generating custom widgets from scratch for Marimo.
qml-guidelines
Key2209
Guidelines and best practices for writing QML code and UI components in this project. Apply this skill when the user asks to create, modify, or review QML files.
castella-agent-ui
i2y
Build chat interfaces and agent management UIs with Castella. Create chat components, display tool calls, manage multiple agents, and build agent hubs.
add-uint-support
pytorch
Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.