qml-guidelines
Ensures consistent QML component structure and styling for Tesla Dashboard UI development.
Install
mkdir -p .claude/skills/qml-guidelines && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17981" && unzip -o skill.zip -d .claude/skills/qml-guidelines && rm skill.zipInstalls to .claude/skills/qml-guidelines
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.
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.Key capabilities
- →Enforce QML file naming conventions.
- →Structure QML components with ordered imports and property grouping.
- →Apply consistent styling using global configuration.
- →Manage state with declarative data binding.
- →Encapsulate complex JavaScript logic in separate files.
How it works
The skill applies predefined coding standards and best practices to QML code, covering naming, structure, styling, and interaction. It ensures consistency across the UI components.
Inputs & outputs
When to use qml-guidelines
- →Review qml code
- →Create new ui component
- →Check style guidelines
- →Structure qml module
About this skill
QML Guidelines for Tesla Dashboard UI
This skill defines the coding standards and best practices for our Qt/QML project. Whenever I assist you with writing or modifying QML code, I will automatically read and follow these rules.
1. 命名规范 (Naming Conventions)
- 文件与组件名：QML 文件名和自定义组件必须以大写字母开头（例如：
CustomButton.qml）。 - 属性与 ID：使用驼峰命名法（camelCase）命名
id、属性（property）以及 JavaScript 变量（例如：id: playMusicButton）。 - 有意义的 ID：请勿使用
btn1、rect2等无意义的 ID，必须能够清晰表达该组件的作用。
2. 文件与代码结构 (Component Structure)
- Imports 排序：将
import QtQuick等官方库放在顶部，随后是应用内的自定义目录导入。 - 模块化：尽可能将功能独立的 UI 区域拆分到
Components/目录中，避免单个.qml文件过于臃肿。 - 属性分组：在定义对象时，优先排列
id，接着是自定义 property、位置与布局属性 (x, y, width, anchors)，其次是视觉属性 (color, font)，最后是信号处理函数 (onClicked等) 及其它子对象。
3. 样式与资源 (Styling & Assets)
- 统一配色与字体：项目中存在
Style.qml等全局配置时，请务必引用全局变量，不要在代码中硬编码颜色值（如color: "#FF0000"）。 - 图标引用：项目已将不同类型的资源分好类（
icons/，driving_icons/，network_icons/等），添加图标时请使用相对路径或通过 qrc 正确引用这些目录中的资源。
4. 交互与信号 (State & Signals)
- 声明式优先：能用属性绑定解决的状态，请优先使用声明式数据绑定，减少命令式的 JavaScript 赋值代码。
- 私有函数：如果需要在 QML 中编写复杂的 JavaScript 逻辑，建议封装在独立的
.js文件中或使用QtObject以避免污染 QML 上下文。
提示：你可以随时修改这个文件，添加你们团队特定的规范、C++ 和 QML 交互的习惯等。下次你让我写 QML 代码时，我就会遵守这份准则了！
When not to use it
- →When not working with QML code or UI components.
- →When the task does not involve creating, modifying, or reviewing QML files.
- →When the project does not use Qt/QML.
Limitations
- →The guidelines are specific to the Tesla Dashboard UI project.
- →The skill does not cover C++ and QML interaction habits.
- →The skill focuses on QML code, not other parts of the application.
How it compares
This skill provides a structured set of mandatory guidelines for QML development, ensuring maintainability and consistency across the project, unlike an unguided approach that might lead to varied coding styles.
Compared to similar skills
qml-guidelines side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| qml-guidelines (this skill) | 0 | 3mo | No flags | Beginner |
| qt-qml | 0 | 4mo | No flags | Intermediate |
| unity-developer | 142 | 3mo | No flags | Advanced |
| frontend-design | 481 | 1mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
qt-qml
sleepyvani
>
unity-developer
sickn33
Build Unity games with optimized C# scripts, efficient rendering, and proper asset management. Masters Unity 6 LTS, URP/HDRP pipelines, and cross-platform deployment. Handles gameplay systems, UI implementation, and platform optimization. Use PROACTIVELY for Unity performance issues, game mechanics, or cross-platform builds.
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
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.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.