# qt-ui-design

A skill that walks an AI agent through designing or auditing interfaces for Qt/QML apps, the web and embedded panels: layout, navigation, contrast, hit targets.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 507
- Author: qt-ai-skills
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-ui-design/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/qt-ui-design

## What it does

Ask for a screen or a UX review on a Qt/QML project, a web front end or an embedded board, and this skill takes over. Before any UI code appears the agent works through seven points: what the target is, the shape of the screen, its resolution and DPI, the design system in play, which content comes first, how far the viewer sits, plus locale and input methods. Whatever the repo already answers stays unasked. When nothing answers it, the agent picks a Qt default and says so out loud, so you can overturn the choice.

Design principles get applied silently: Hick's law, proximity, feedback within 400 ms. Animation comes with duration budgets — 100–150 ms for icons and badges, 200–300 ms for cards, 300–400 ms for full-screen moves, never past 500 ms. If the project has no design system yet, the skill suggests a Qt Quick Controls style: Basic, Fusion, Imagine, Material, Universal, iOS or FluentWinUI3.

iOS and FluentWinUI3 need Qt 6.7 or later, so an older branch gets a different suggestion. Small edits such as shifting a button or rewording a label skip the checklist. Reviewing a finished design follows a separate audit path. On MCU targets the embedded section overrides several desktop defaults.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-ui-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/qt-ui-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/qt-ui-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-ui-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/qt-ui-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-ui-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/qt-ui-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install TheQtCompanyRnD/agent-skills qt-ui-design
```

2. **Manually: put the files in place**
- File: `.github/skills/qt-ui-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-ui-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-ui-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/qt-ui-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-ui-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-ui-design/SKILL.md

## When to use it
- Audit an existing QML screen for contrast and tap-target size
- Pick a Qt Quick Controls style that matches a third-party design language
- Decide what belongs on the first screen of an embedded panel
- Design a layout for a round or square display
- Set animation timings that keep transitions from feeling slow

## Example prompts
- Design a settings screen for a Qt Quick app on a square display, viewers stand about 1.5 m away
- Audit this QML layout: contrast, hit targets, navigation
- Pick a Qt Quick Controls style for a project built on Material Design 3

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [theqtcompanyrnd/agent-skills](https://affpapa.org/en/nevibecode/by/theqtcompanyrnd/agent-skills.md) — 13 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md