skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

robius-widget-patterns

Implement reusable Makepad widget patterns for overlays, modals, and lists.

745|87|Updated Jan 10, 2026
Search Tags:#collapsible#design-patterns#drag-and-drop#widget-patterns#overlay#makepad#portal-list
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill robius-widget-patterns-zhanghandong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: robius-widget-patterns
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/robius-widget-patterns
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill robius-widget-patterns-zhanghandong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Patterns library provides standardized, reusable widget solutions for Makepad projects, enabling teams to implement common UI patterns consistently.

Core Features & Use Cases

  • 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, 20-redraw-optimization, 21-collapsible-row-portal-list, 22-dropdown-overlay
  • Includes Standard Widget Structures, PortalList integration patterns, and Dock/Grid-based layouts for scalable UI systems.
  • Real-world usage spans building robust, composable widgets and pattern libraries across Makepad apps.

Quick Start

Start by exploring the base patterns in _base and the references to begin composing reusable widgets with live_design.

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 consistently across different projects?▼

Building reusable Makepad widgets consistently requires standardized design patterns for UI structures. This library provides solutions for overlays, modals, collapsible sections, lists, and responsive docks to ensure UI consistency across desktop and mobile apps.

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

Implementing a modal overlay in Makepad is best achieved by applying the 02-modal-overlay widget pattern. It provides a standardized structure for rendering overlays consistently within your Live DSL composition.

How do I create a collapsible section with a portal list in Makepad?▼

Creating a collapsible section with a portal list requires implementing the 21-collapsible-row-portal-list pattern. It combines portal list integration with collapsible UI structures to manage scalable content rendering in Makepad.

Do I need to know Live DSL to use these Makepad widget patterns?▼

Knowing Live DSL is required to use these Makepad widget patterns effectively. Implementing pattern-specific widgets also requires knowledge of Makepad Widgets and exploring the base pattern docs in the references.

How do I optimize drag and drop reorder performance in Makepad?▼

Optimizing drag and drop reorder performance in Makepad involves applying the 18-drag-drop-reorder pattern. This approach provides a standardized structure for handling interactive widget reordering within your application.

What patterns are available for responsive dock and grid layouts in Makepad?▼

Patterns available for responsive dock and grid layouts in Makepad include the 15-dock-studio-layout and 17-row-based-grid-layout. These patterns provide scalable UI systems for both desktop and mobile applications.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

makepad-dsl

Assist developers in writing and understanding Makepad DSL syntax and inheritance for widget definitions.

Community
Intermediate
erbsland-deverbsland-dev

erbsland-color-term

Integrate the Erbsland Color Terminal library into C++ projects for colorful terminal output and UI rendering.

Community
Advanced
RoooyHeRoooyHe

robius-event-action

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

Community
Intermediate
MayaDispelerMayaDispeler
3

design-system-implementation

Select and integrate UI component libraries with design token and accessibility standards.

Community
Advanced