From antigravity-awesome-skills
Generates and explains Makepad widget code (View, Button, Label, TextInput, Image) with styling patterns. Loads local reference docs for core, advanced, and rich-text widgets.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:makepad-widgetsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19
Check for updates: https://crates.io/crates/makepad-widgets
You are an expert at Makepad widgets. Help users by:
View, Button, labels, rich text, or other makepad-widgets building blocks.Refer to the local files for detailed documentation:
./references/widgets-core.md - Core widgets (View, Button, Label, etc.)./references/widgets-advanced.md - Helper and advanced widgets./references/widgets-richtext.md - Rich text widgets (Markdown, Html, TextFlow)Before answering questions, Claude MUST:
/sync-crate-skills makepad --force 更新文档"<View> {
width: Fill
height: Fill
flow: Down
padding: 16.0
show_bg: true
draw_bg: { color: #1A1A1A }
<Label> { text: "Content" }
}
<Button> {
text: "Click Me"
draw_bg: {
color: #0066CC
color_hover: #0088FF
border_radius: 4.0
}
draw_text: {
color: #FFFFFF
text_style: { font_size: 14.0 }
}
}
<Label> {
width: Fit
height: Fit
text: "Hello World"
draw_text: {
color: #FFFFFF
text_style: {
font_size: 16.0
line_spacing: 1.4
}
}
}
<Image> {
width: 200.0
height: 150.0
source: dep("crate://self/resources/photo.png")
fit: Contain
}
<TextInput> {
width: Fill
height: Fit
text: "Default value"
draw_text: {
text_style: { font_size: 14.0 }
}
}
pub trait WidgetNode: LiveApply {
fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet);
fn walk(&mut self, cx: &mut Cx) -> Walk;
fn area(&self) -> Area;
fn redraw(&mut self, cx: &mut Cx);
}
pub trait Widget: WidgetNode {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {}
fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep;
fn draw(&mut self, cx: &mut Cx2d, scope: &mut Scope) -> DrawStep;
fn widget(&self, path: &[LiveId]) -> WidgetRef;
}
| Category | Widgets |
|---|---|
| Basic | View, Label, Button, Icon, Image |
| Input | TextInput, CheckBox, RadioButton, Slider, DropDown, ColorPicker |
| Container | ScrollBars, PortalList, FlatList, StackNavigation, Dock, Splitter |
| Navigation | TabBar, Tab, FoldHeader, FoldButton, ExpandablePanel |
| Overlay | Modal, Tooltip, PopupMenu, PopupNotification |
| Media | Video, RotatedImage, ImageBlend, MultiImage |
| Layout | AdaptiveView, SlidePanel, PageFlip, SlidesView |
| Special | Markdown, Html, TextFlow, WebView, KeyboardView |
| Utility | LoadingSpinner, DesktopButton, LinkLabel, ScrollShadow |
| Widget | Purpose | Key Properties |
|---|---|---|
View | Container | flow, align, show_bg, draw_bg, optimize |
Button | Clickable | text, draw_bg, draw_text, draw_icon |
Label | Text display | text, draw_text |
Image | Image display | source, fit |
TextInput | Text entry | text, draw_text, draw_cursor, draw_selection |
CheckBox | Toggle | text, selected |
RadioButton | Selection | text, selected |
Slider | Value slider | min, max, step |
DropDown | Select menu | labels, selected |
PortalList | Virtual list | Efficient scrolling for large lists |
Modal | Dialog | Overlay dialog boxes |
Tooltip | Hint | Hover tooltips |
| Variant | Description |
|---|---|
SolidView | Solid background color |
RoundedView | Rounded corners |
RoundedAllView | Individual corner control |
RectView | Rectangle with border/gradient |
CircleView | Circle/ellipse shape |
GradientXView | Horizontal gradient |
GradientYView | Vertical gradient |
RoundedShadowView | Rounded with shadow |
ScrollXView | Horizontal scroll |
ScrollYView | Vertical scroll |
ScrollXYView | Both directions scroll |
CachedView | Texture-cached |
| Variant | Description |
|---|---|
ButtonFlat | Flat style |
ButtonFlatIcon | Flat with icon |
ButtonFlatter | No background |
ButtonGradientX | Horizontal gradient |
ButtonGradientY | Vertical gradient |
ButtonIcon | Standard with icon |
| Value | Description |
|---|---|
Stretch | Stretch to fill |
Contain | Fit within, preserve ratio |
Cover | Cover area, may crop |
Fill | Fill without ratio |
width and height on widgetsshow_bg: true to enable background renderingdraw_bg, draw_text, draw_icon for shader uniformsdep("crate://self/...") for resource pathsdraw_bg, draw_text) control appearanceanimator propertynpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-aas-mobile-app-builderGenerates Makepad widget code for View, Button, Label, TextInput, Image and explains properties, variants, composition. For Rust UI apps using makepad-widgets crate.
Catalogs Makepad 2.0 UI widgets for containers, text, buttons, toggles, inputs, and layouts like View, ScrollYView, PortalList, Dock. Includes properties and advanced patterns.
Guides creation of reusable Makepad widgets with patterns for modal, collapsible, drag-drop, text/image toggle, and page flip. Triggers on widget design keywords like 'reusable widget'.