makepad-2-0-widgets
Helps your agent with widgets (components) in Makepad 2.0. It's useful when building or debugging user interface (UI) code made with Makepad.
What it does
This guide helps you build visual interfaces (screens) for your apps using Makepad 2.0. It shows you the available building blocks, like buttons, text fields, and images, and how to use them.
When to use it
- ✓When designing an app's look and feel.
- ✓When you want to add buttons or text input fields.
- ✓When you need to display images or lists.
Example of what to ask your AI
“How do I create a clickable button with the text 'Save'?”
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
Makepad 2.0 provides 'widgets', which are like Lego bricks for building interfaces. Each widget has a specific job (like showing text or taking input) and properties you can adjust.
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-2-0-widgetsOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-2-0-widgets/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
When to Use
- Use when this upstream workflow matches the user's stated goal.
- Use when the task requires the procedures documented in this skill.
Makepad 2.0 Widget Catalog Skill
Version: makepad-widgets (dev branch) | Last Updated: 2026-03-03
Overview
Makepad 2.0 provides a rich set of built-in widgets for building UIs. All widgets are defined in Splash syntax and registered via script_mod!.
Documentation
Refer to the local files for detailed documentation:
./references/widget-catalog.md- Complete widget list with properties./references/widget-advanced.md- Advanced patterns: PortalList, Dock, custom widgets, MapView
IMPORTANT: Documentation Completeness Check
Before answering questions, Claude MUST:
- Read the relevant reference file(s) listed above
- Incorporate reference content into the answer
Widget Categories Quick Reference
Containers (Layout)
| Widget | Description | Key Properties |
|---|---|---|
View |
Basic container (transparent) | width, height, flow, spacing, padding, align |
SolidView |
View with solid background | + show_bg: true, draw_bg.color |
RoundedView |
View with rounded corners | + draw_bg.border_radius |
RoundedAllView |
All corners same radius | + border_radius shorthand |
GradientXView |
Horizontal gradient bg | + draw_bg colors |
GradientYView |
Vertical gradient bg | + draw_bg colors |
ScrollXView |
Horizontal scrolling | scroll property |
ScrollYView |
Vertical scrolling | scroll property |
ScrollXYView |
Both-axis scrolling | scroll property |
Text Widgets
| Widget | Description | Key Properties |
|---|---|---|
Label |
Single/multi-line text | text, draw_text.color, draw_text.text_style.font_size |
H1 - H4 |
Heading levels | text (pre-styled) |
P |
Paragraph text | text |
TextInput |
Editable text field | text, empty_text, password, read_only, numeric_only |
Markdown |
Markdown renderer | body |
Html |
HTML renderer | body |
LinkLabel |
Clickable link text | text, url |
Buttons
| Widget | Description | Key Properties |
|---|---|---|
Button |
Standard button | text |
ButtonFlat |
Flat style button | text |
ButtonFlatter |
Minimal button | text |
Toggles
| Widget | Description | Key Properties |
|---|---|---|
CheckBox |
Check box | text, active |
Toggle |
Toggle switch | text, active |
RadioButton |
Radio button | text, active |
Input Widgets
| Widget | Description | Key Properties |
|---|---|---|
Slider |
Horizontal slider | min, max, step, default, precision |
DropDown |
Dropdown select | labels: ["a", "b", "c"] |
Media
| Widget | Description | Key Properties |
|---|---|---|
Image |
Image display | source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size) |
Svg |
External SVG file renderer | draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color |
Icon |
SVG icon (tinted) | draw_icon.svg, draw_icon.color, icon_walk |
Vector |
Inline vector graphics | viewbox, Path{d: "..."} |
LoadingSpinner |
Loading indicator | color, rotation_speed |
MapView |
Map widget | center_lon, center_lat, zoom (MUST use fixed height!) |
Layout Helpers
| Widget | Description | Usage |
|---|---|---|
Hr |
Horizontal rule | Divider line |
Vr |
Vertical rule | Vertical divider |
Filler |
Flexible space | Push siblings apart (use between Fit siblings only!) |
Splitter |
Resizable split | axis: Horizontal/Vertical, a/b children |
FoldHeader |
Collapsible section | header + body children |
Lists
| Widget | Description | Usage |
|---|---|---|
PortalList |
Virtualized list | For large lists (100+ items), only renders visible items |
FlatList |
Simple list | For small lists, renders all items |
Navigation
| Widget | Description | Control |
|---|---|---|
Modal |
Modal dialog | .open(cx) / .close(cx) from Rust |
Tooltip |
Tooltip popup | Hover-triggered |
PopupNotification |
Toast notification | Timed display |
SlidePanel |
Sliding panel | slide_from |
ExpandablePanel |
Expandable area | open/close |
PageFlip |
Page switcher | active_page: page_name |
…
FAQ
What's the difference between `View` and `SolidView`?
`View` is a basic transparent container, while `SolidView` is a `View` that can have a solid background color.
How do I make text appear on a colored background?
Use `new_batch: true` along with background color properties to ensure the text is drawn correctly on top of the background.
How do I create a scrollable list?
Use `ScrollXView` for horizontal scrolling, `ScrollYView` for vertical, or `ScrollXYView` for both directions.
Details
Original description by the author
Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3529
- 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