makepad-reference
Guides your agent to diagnose build, widget, and layout issues in Makepad. Helps keep your app development running smoothly.
What it does
This guide helps fix common issues when using the Makepad tool. It provides quick solutions for build, interface, and update errors.
When to use it
- ✓When your Makepad code doesn't compile.
- ✓If the user interface isn't updating as expected.
- ✓To quickly find a fix for a specific error.
Example of what to ask your AI
“My text isn't showing with the correct font, what do I do?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It compares your code against the exact Makepad version you're using to find problems. It lists common errors and how to fix them.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill makepad-referenceOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-reference/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 | Check the installed live-design parser syntax; changing a valid hex color is not a general fix |
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
# Run with line info for better error messages
MAKEPAD=lines cargo run # Use the project-pinned toolchain; verify this diagnostic flag for its revision
// Add logging
log!("Value: {:?}", my_value);
log!("State: {} / {}", self.counter, self.is_loading);
Resources
- Makepad Official Docs - Obsidian-based documentation
- Makepad Repository
- Robrix - Production reference
- Moly - Production reference
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
The navigation table names topics, not bundled reference files. Verify exact Makepad API signatures and the project toolchain before changing code; preserve private values in logs, and test widget updates, input and target layouts rather than assuming a redraw call fixes every issue.
FAQ
What is Makepad?
Makepad is a tool for building user interfaces for applications.
How do I know which Makepad version I'm using?
The guide suggests running `MAKEPAD=lines cargo run` for more version details.
What does 'redraw(cx)' mean?
It's a command to tell Makepad that the interface needs to be updated after a change.
Details
Original description by the author
Guide to diagnosing Makepad build, widget, redraw and layout issues against the exact runtime revision.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3538
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC