Implement custom GPUI UI elements via the Element trait lifecycle.
npx skills add https://github.com/onehr/gpui-skills --skill gpui-elements-onehr
Please help me install this Agent Skill. Skill: gpui-elements Source: https://github.com/onehr/gpui-skills/tree/main/skills/gpui-elements Command: npx skills add https://github.com/onehr/gpui-skills --skill gpui-elements-onehr
This Skill provides the tools and patterns to create highly customized user interface elements in GPUI when standard components like div() are insufficient for complex layout, painting, or input handling needs.
Element trait for unique UI behaviors.canvas() API for bespoke visual elements.Implement a custom element by defining a struct that derives IntoElement and implements the Element trait, handling its request_layout, prepaint, and paint phases.
High-intent search queries and answers about installing and using this skill.
To create a custom GPUI element, define a struct that derives `IntoElement` and implement the `Element` trait, managing its `request_layout`, `prepaint`, and `paint` lifecycle phases for bespoke rendering and interaction.
The GPUI `Element` trait lifecycle consists of three phases: `request_layout` for bespoke layout calculations, `prepaint` for pre-rendering preparation, and `paint` for executing the actual low-level drawing and visual rendering.
You can draw bespoke visuals in GPUI by utilizing the low-level `canvas()` API within the `paint` phase of your custom `Element` trait implementation, enabling fine-grained control over rendering complex visual elements.
You should implement a custom element when standard components like `div()` are insufficient for complex layout, painting, or input handling needs, such as building specialized graph visualizations or custom text editors.
Yes, implementing the `Element` trait requires manual layout management through the `request_layout` phase, allowing you to define bespoke layout calculations before executing the `prepaint` and `paint` rendering phases.
cnwzhuProvide reusable UI patterns for GPUI applications as modular Rust templates.
WirasmBuild GPU-accelerated native UIs with gpui and gpui-component libraries.
zerx-labStyle and lay out GPUI components with a CSS-like API in Rust.
longbridgeImplement custom GPUI elements via the low-level Element API lifecycle.