makepad-reference
This category provides reference materials for debugging, code quality, and advanced layout patterns.
About this skill
The 'Makepad Reference' skill equips an AI agent with a specialized knowledge base for Makepad development. It serves as a comprehensive resource for assisting developers with common challenges and best practices within the Makepad framework. This includes detailed reference materials for debugging build and runtime errors, guidelines for improving code quality through Makepad-aware refactoring, and insights into implementing adaptive layout patterns for cross-platform (desktop/mobile) responsiveness. The skill allows an agent to quickly navigate API documentation, troubleshoot specific error messages, and provide actionable advice to enhance Makepad projects.
Best use case
An AI agent needs to assist a developer in debugging Makepad code, improving its quality, or designing responsive user interfaces within the Makepad framework. It's ideal for quickly retrieving specific technical information or troubleshooting steps.
This category provides reference materials for debugging, code quality, and advanced layout patterns.
The AI agent will retrieve and present relevant Makepad documentation, troubleshooting steps, code quality advice, or layout pattern suggestions, helping to resolve the developer's query or guide them through a Makepad-related task.
Practical example
Example input
What's the quick fix for the `no matching field: fon` error in Makepad? And how can I make a Makepad UI responsive for both desktop and mobile?
Example output
For the `no matching field: fon` error in Makepad, a quick fix might involve checking your font asset path and ensuring it's correctly declared and available. To create a responsive UI in Makepad for both desktop and mobile, you should utilize 'Adaptive Layout' patterns. This often involves using Makepad's layout primitives that can dynamically adjust based on screen size and orientation. Refer to the 'Adaptive Layout' topic in the Makepad reference for detailed guidance on implementing cross-platform responsive designs.
When to use this skill
- Use this skill when: - A developer encounters a common Makepad error and needs a quick fix. - The AI agent is asked to suggest ways to improve Makepad code quality or refactor a section of code. - The AI agent needs to provide guidance on creating responsive Makepad layouts for different devices. - A developer requires specific Makepad API documentation or troubleshooting steps.
When not to use this skill
- Do not use this skill when: - The task is unrelated to Makepad development (e.g., general programming, other frameworks). - The AI agent needs to execute code or interact with external services directly (this skill is purely for information retrieval). - The required information falls outside the scope of debugging, code quality, or advanced layout patterns for Makepad. - The user requires deep, conceptual explanations beyond quick reference data.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/makepad-reference/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How makepad-reference Compares
| Feature / Agent | makepad-reference | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
This category provides reference materials for debugging, code quality, and advanced layout patterns.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# Makepad Reference
This category provides reference materials for debugging, code quality, and advanced layout patterns.
## When to Use
- You need quick-reference material for common Makepad errors, debugging, or API lookups.
- The task is diagnostic or reference-oriented rather than writing a focused feature in one subsystem.
- You want a central starting point before diving into more specialized Makepad skills.
## Quick Navigation
| Topic | File | Use When |
|-------|------|----------|
| API Documentation | Official docs index, quick API reference | Finding detailed API info |
| Troubleshooting | Common errors and fixes | Build fails, runtime errors |
| Code Quality | Makepad-aware refactoring | Simplifying code safely |
| Adaptive Layout | Desktop/mobile responsive | Cross-platform layouts |
## Common Issues Quick Reference
| Error | Quick Fix |
|-------|-----------|
| `no matching field: font` | Use `text_style: <THEME_FONT_*>{}` |
| Color parse error (ends in `e`) | Change last digit (e.g., `#14141e` → `#14141f`) |
| `set_text` missing argument | Add `cx` as first argument |
| UI not updating | Call `redraw(cx)` after changes |
| Widget not found | Check ID spelling, use `ids!()` for paths |
## Debug Tips
```bash
# Run with line info for better error messages
MAKEPAD=lines cargo +nightly run
```
```rust
// Add logging
log!("Value: {:?}", my_value);
log!("State: {} / {}", self.counter, self.is_loading);
```
## Resources
- [Makepad Official Docs](https://publish.obsidian.md/makepad-docs/) - Obsidian-based documentation
- [Makepad Repository](https://github.com/makepad/makepad)
- [Robrix](https://github.com/project-robius/robrix) - Production reference
- [Moly](https://github.com/moxin-org/moly) - Production referenceRelated Skills
makepad-widgets
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets
makepad-splash
CRITICAL: Use for Makepad Splash scripting language. Triggers on: splash language, makepad script, makepad scripting, script!, cx.eval, makepad dynamic, makepad AI, splash 语言, makepad 脚本
makepad-shaders
CRITICAL: Use for Makepad shader system. Triggers on: makepad shader, makepad draw_bg, Sdf2d, makepad pixel, makepad glsl, makepad sdf, draw_quad, makepad gpu, makepad 着色器, makepad shader 语法, makepad 绘制
makepad-platform
CRITICAL: Use for Makepad cross-platform support. Triggers on: makepad platform, makepad os, makepad macos, makepad windows, makepad linux, makepad android, makepad ios, makepad web, makepad wasm, makepad metal, makepad d3d11, makepad opengl, makepad webgl, OsType, CxOs, makepad 跨平台, makepad 平台支持
makepad-layout
CRITICAL: Use for Makepad layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad padding, makepad margin, makepad flow, makepad align, Fit, Fill, Size, Walk, "how to center in makepad", makepad 布局, makepad 宽度, makepad 对齐, makepad 居中
makepad-font
CRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形
makepad-event-action
CRITICAL: Use for Makepad event and action handling. Triggers on: makepad event, makepad action, Event enum, ActionTrait, handle_event, MouseDown, KeyDown, TouchUpdate, Hit, FingerDown, post_action, makepad 事件, makepad action, 事件处理
makepad-dsl
CRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件
makepad-deployment
CRITICAL: Use for Makepad packaging and deployment. Triggers on: deploy, package, APK, IPA, 打包, 部署, cargo-packager, cargo-makepad, WASM, Android, iOS, distribution, installer, .deb, .dmg, .nsis, GitHub Actions, CI, action, marketplace
makepad-basics
CRITICAL: Use for Makepad getting started and app structure. Triggers on: makepad, makepad getting started, makepad tutorial, live_design!, app_main!, makepad project setup, makepad hello world, "how to create makepad app", makepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构
makepad-animation
CRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果
nft-standards
Master ERC-721 and ERC-1155 NFT standards, metadata best practices, and advanced NFT features.