Implement Reusable Makepad Widget Patterns

Robius Widget Patterns is a skill covering best practices for designing reusable Makepad widgets, drawn from two real codebases: Robrix (Matrix chat client - Avatar, RoomsList, RoomScreen widgets) and Moly (AI chat application - Slot, ChatLine, PromptInput, AdaptiveView widgets). It points to a _base/ directory of production patterns: widget-reference helper extensions, modal overlays via DrawList2d, collapsible sections, dynamic list templates with LivePtr, an LRU view cache, callout tooltips with arrow positioning, redraw optimization, IDE-style resizable dock layouts, hover effects via instance variables, row-based grid layouts, drag-and-drop reordering, PageFlip transition optimization (instant destroy/cache mode), auto-grouping consecutive portal-list items with FoldHeader, and dropdown overlays.

It lays out the standard widget structure: a live_design! DSL block defining layout and child widgets, paired with a Rust struct using #[deref] to delegate to an inner View, #[live] for DSL-configurable properties (with optional defaults), #[rust] for internal state not exposed to the DSL, and #[animator] for animation support, implementing the Widget trait's handle_event and draw_walk.

A detailed text/image toggle pattern (as used by Avatar) shows a flow: Overlay DSL layout stacking a text view and an image view, with show_text/show_image/status methods that toggle visibility between them, apply an optional background color via apply_over, and derive the displayed initial from the username's first character. Dynamic styling at runtime uses apply_over to change single or multiple properties, including interpolated Rust variables (e.g. a highlight color computed from selection state). External widget APIs follow a *Ref pattern - AvatarRef methods borrow the inner widget mutably and delegate to the underlying struct's methods, giving external callers a stable reference-based API. Further patterns cover a collapsible/expandable section (toggling content visibility and rotating a header icon) and a loading-state widget with three overlaid views (content, a loading overlay with a BouncingDots indicator, and an error view) driven by a LoadingState enum (Idle, Loading, Loaded, Error(String)).

Use this skill when creating reusable Makepad widgets, designing a widget's public component API via the *Ref pattern, implementing text/image toggle behavior, or applying dynamic runtime styling in Makepad.

Do not use it for widget design in other Rust UI frameworks - the live_design! DSL, apply_over, and *Ref patterns are specific to Makepad's architecture.

Input: the widget's visual states and the data/behavior it needs to expose externally.

Output: a Makepad widget with DSL layout, Rust state, and an external *Ref API, for example the text/image toggle method:

pub fn show_text<T: AsRef<str>>(
    &mut self,
    cx: &mut Cx,
    bg_color: Option<Vec4>,
    info: Option<AvatarTextInfo>,
    username: T,
) {
    self.info = info.map(|i| i.into());
    let first_char = utils::first_letter(username.as_ref())
        .unwrap_or("?").to_uppercase();
    self.label(ids!(text_view.text)).set_text(cx, &first_char);
    self.view(ids!(text_view)).set_visible(cx, true);
    self.view(ids!(img_view)).set_visible(cx, false);
    if let Some(color) = bg_color {
        self.view(ids!(text_view)).apply_over(cx, live! {
            draw_bg: { background_color: (color) }
        });
    }
}

Along with this it produces collapsible-section, loading-state, and dynamic-styling widget code.

Rust developers building Makepad UIs who need proven, reusable widget patterns - toggling, dynamic styling, collapsible sections, loading states, and a clean external API - rather than designing widget architecture from scratch.