Agent skill

qt-qml-component-generator

Generate QML components with proper property bindings, signal/slot connections, and Qt Quick Controls integration

View SKILL.md on GitHub Repository
Stars 514
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/desktop-development/skills/qt-qml-component-generator

SKILL.md

qt-qml-component-generator

Generate QML components with proper property bindings, signal/slot connections, and Qt Quick Controls integration. This skill creates well-structured QML components following Qt best practices.

Capabilities

  • Generate QML components with property bindings
  • Create custom QML types with proper registration
  • Set up signal/slot connections between QML and C++
  • Configure Qt Quick Controls styling
  • Generate model/view components (ListView, GridView)
  • Create reusable component libraries
  • Set up QML module structure
  • Generate TypeScript-like type annotations

Input Schema

json
{
  "type": "object",
  "properties": {
    "projectPath": {
      "type": "string",
      "description": "Path to the Qt project"
    },
    "componentName": {
      "type": "string",
      "description": "Name of the QML component"
    },
    "componentType": {
      "enum": ["item", "control", "popup", "view", "delegate", "singleton"],
      "default": "item"
    },
    "properties": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "type": { "type": "string" },
          "defaultValue": { "type": "string" },
          "readonly": { "type": "boolean" }
        }
      }
    },
    "signals": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "parameters": { "type": "array" }
        }
      }
    },
    "cppBackend": {
      "type": "boolean",
      "description": "Generate C++ backend class",
      "default": false
    },
    "useControls": {
      "enum": ["none", "basic", "material", "universal", "fusion"],
      "default": "basic"
    }
  },
  "required": ["projectPath", "componentName"]
}

Output Schema

json
{
  "type": "object",
  "properties": {
    "success": { "type": "boolean" },
    "files": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "path": { "type": "string" },
          "type": { "enum": ["qml", "cpp", "cmake"] }
        }
      }
    },
    "registrationCode": {
      "type": "string",
      "description": "C++ code to register the component"
    }
  },
  "required": ["success"]
}

Generated QML Component Example

qml
// CustomButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Control {
    id: root

    // Properties
    property string text: ""
    property color backgroundColor: "#2196F3"
    property color textColor: "white"
    property bool loading: false
    readonly property bool pressed: mouseArea.pressed

    // Signals
    signal clicked()
    signal pressAndHold()

    // Size hints
    implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 12

    // Background
    background: Rectangle {
        radius: 4
        color: root.pressed ? Qt.darker(root.backgroundColor, 1.2) : root.backgroundColor

        Behavior on color {
            ColorAnimation { duration: 100 }
        }
    }

    // Content
    contentItem: RowLayout {
        spacing: 8

        BusyIndicator {
            visible: root.loading
            running: root.loading
            Layout.preferredWidth: 20
            Layout.preferredHeight: 20
        }

        Text {
            text: root.text
            color: root.textColor
            font.pixelSize: 14
            font.weight: Font.Medium
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            Layout.fillWidth: true
        }
    }

    // Interaction
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        enabled: !root.loading
        onClicked: root.clicked()
        onPressAndHold: root.pressAndHold()
    }
}

C++ Backend Integration

cpp
// custombutton.h
#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QObject>
#include <QQmlEngine>

class CustomButtonBackend : public QObject
{
    Q_OBJECT
    QML_ELEMENT

    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
    Q_PROPERTY(bool loading READ loading WRITE setLoading NOTIFY loadingChanged)

public:
    explicit CustomButtonBackend(QObject *parent = nullptr);

    QString text() const;
    void setText(const QString &text);

    bool loading() const;
    void setLoading(bool loading);

signals:
    void textChanged();
    void loadingChanged();
    void clicked();

public slots:
    void handleClick();

private:
    QString m_text;
    bool m_loading = false;
};

#endif // CUSTOMBUTTON_H

QML Module Structure

qml/
├── MyComponents/
│   ├── qmldir
│   ├── CustomButton.qml
│   ├── CustomTextField.qml
│   └── CustomDialog.qml
└── main.qml

# qmldir
module MyComponents
CustomButton 1.0 CustomButton.qml
CustomTextField 1.0 CustomTextField.qml
CustomDialog 1.0 CustomDialog.qml

CMake QML Module

cmake
qt_add_qml_module(myapp
    URI MyComponents
    VERSION 1.0
    QML_FILES
        qml/MyComponents/CustomButton.qml
        qml/MyComponents/CustomTextField.qml
    SOURCES
        src/custombutton.cpp
        src/custombutton.h
)

Model/View Component

qml
// UserListView.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

ListView {
    id: root

    property alias model: root.model
    signal itemSelected(int index, var data)

    clip: true
    spacing: 4

    delegate: ItemDelegate {
        width: ListView.view.width
        height: 60

        contentItem: Row {
            spacing: 12

            Image {
                source: model.avatar
                width: 48
                height: 48
                fillMode: Image.PreserveAspectCrop
            }

            Column {
                anchors.verticalCenter: parent.verticalCenter

                Text {
                    text: model.name
                    font.bold: true
                }

                Text {
                    text: model.email
                    color: "gray"
                    font.pixelSize: 12
                }
            }
        }

        onClicked: root.itemSelected(index, model)
    }

    ScrollBar.vertical: ScrollBar {}
}

Best Practices

  1. Use property bindings: Avoid imperative updates
  2. Define proper interfaces: Clear properties and signals
  3. Use implicit size: Let components size themselves
  4. Separate logic from UI: Use C++ for complex logic
  5. Follow naming conventions: PascalCase for components
  6. Use Qt Quick Controls: Consistent platform look

Related Skills

  • qt-cmake-project-generator - Project setup
  • qt-translation-workflow - Internationalization
  • qt-widget-accessibility-audit - Accessibility

Related Agents

  • qt-cpp-specialist - Qt/C++ expertise
  • desktop-ux-analyst - UX review

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

a5c-ai/babysitter

gsd-tools

Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).

514 31
Explore
a5c-ai/babysitter

model-profile-resolution

Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.

514 31
Explore
a5c-ai/babysitter

verification-suite

Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.

514 31
Explore
a5c-ai/babysitter

state-management

STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.

514 31
Explore
a5c-ai/babysitter

git-integration

Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.

514 31
Explore
a5c-ai/babysitter

frontmatter-parsing

YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.

514 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results