Generates Rust code for Makepad widgets like View, Button, Label, Image, TextInput and explains properties, variants, usage from docs.
From antigravity-bundle-makepad-buildernpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-makepad-builderThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Optimizes cloud costs on AWS, Azure, GCP via rightsizing, tagging strategies, reserved instances, spot usage, and spending analysis. Use for expense reduction and governance.
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:
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 property