skills.rest
SageV1
SageV1COMMUNITY
Explore all skills by this author →
GitHub

robius-widget-patterns

Organize reusable Makepad widget patterns into a consistent Robius-style design system.

1|1|Updated Apr 10, 2025
Search Tags:#modal#design-patterns#widget-patterns#makepad#robrix#dock#tooltip
One-click install
npx skills add https://github.com/SageV1/makepad-skills --skill robius-widget-patterns-sagev1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: robius-widget-patterns
Source: https://github.com/SageV1/makepad-skills/tree/main/skills/robius-widget-patterns
Command: npx skills add https://github.com/SageV1/makepad-skills --skill robius-widget-patterns-sagev1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pattern library for Makepad enables building reusable, well-structured widgets by providing battle-tested patterns and clear guidance for Robius-style UIs.

Core Features & Use Cases

  • A catalog of production patterns (01-widget-extension, 02-modal-overlay, 03-collapsible, 04-list-template, 05-lru-view-cache, 14-callout-tooltip, 15-dock-studio-layout, 16-hover-effect, 17-row-based-grid-layout, 18-drag-drop-reorder, 19-pageflip-optimization) to accelerate UI development.
  • Clear guidance on structuring widgets with inner APIs, Ref wrappers, and optional resources (scripts/references/assets) to enable modular design across desktop and mobile.
  • Real-world scenarios include dashboards, chat UIs, editors, and IDE-like layouts requiring consistent UX and rapid composition.

Quick Start

Apply the 01-widget-extension and 02-modal-overlay patterns to bootstrap a reusable widget API for Makepad.

Frequently Asked Questions about robius-widget-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build reusable Makepad widgets for desktop and mobile UIs?▼

Reusable Makepad widgets are built by applying structured patterns featuring inner APIs, Ref wrappers, and optional resources to enable modular design across desktop and mobile interfaces.

What is the best way to create a modal overlay in Makepad?▼

Modal overlays in Makepad are created using the 02-modal-overlay pattern, which provides a tested structure for layering interactive components over existing views.

Can I use these widget patterns for complex IDE-like layouts in Robius?▼

Yes, these Makepad widget patterns support real-world scenarios including dashboards, chat UIs, editors, and IDE-like layouts requiring consistent UX and rapid composition.

How do I implement drag and drop reordering in Makepad?▼

Drag and drop reordering in Makepad is implemented using the 18-drag-drop-reorder pattern from the production catalog to handle interactive list manipulations safely.

Does Makepad support collapsible sections and tooltips for responsive layouts?▼

Makepad supports collapsible sections and tooltips through dedicated catalog patterns like 03-collapsible and 14-callout-tooltip to ensure responsive interface composition.

Why do I need a design system for Makepad widget development?▼

A design system for Makepad widget development organizes reusable patterns into a consistent structure, preventing fragmented code and accelerating UI creation for Robius-style applications.

Related Skills

Explore More Software Engineering Skills→
SageV1SageV1
1

makepad-widgets

Provide Makepad UI widgets including View, Label, Button, Image, and TextInput.

Community
Basic
1k-off1k-off
1

umbraco-sorter

Enables drag-and-drop sorting in the web-based Umbraco backoffice via the UmbSorterController.

Community
Intermediate
RoooyHeRoooyHe

robius-event-action

Centralize event and action routing in Makepad apps with Rust patterns.

Community
Intermediate
MacPhobosMacPhobos

rust-desktop-applications

Develop cross-platform desktop applications using Rust with Tauri or native GUI frameworks.

Community
Advanced