Skip to content
Skillpedia
Websites & UI (frontend)48k · #3538

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-reference/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-reference/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-reference

Or 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.md
Technical 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

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.

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#3538
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills