gpui-component_skill

Overview

This skill documents gpui-component library patterns for building reusable, theme-aware UI components in GPUI applications. It captures component architecture, trait conventions, theme integration, dialog/popover rules, form handling, and animation patterns. Use it to align new components with Longbridge conventions and ensure consistent behavior across the app.

How this skill works

The skill inspects and codifies best-practice rules grouped by priority: component architecture, trait system, theme system, dialogs/popovers, forms, and animations. It provides concrete templates (component structure, builder patterns, entity-based state), trait interfaces (Styled, Disableable, Selectable), and guidance for layering UI (Root, Window, render layers). Individual rule files include rationale, examples, and common mistakes.

When to use it

• Building reusable components like buttons, inputs, dialogs, and menus
• Implementing theme-aware styles or size/variant systems
• Creating stateful form controls with focus and validation
• Designing dialogs, popovers, sheets, or overlay behaviors
• Adding animations, keyed animation state, or smooth easing transitions

Best practices

• Follow the comp- prefixed architecture rules: render-once components, builder patterns, and clear state separation
• Implement trait- interfaces for composability: Styled, Disableable, Selectable, Sizable, InteractiveElement
• Use ThemeColor, ActiveTheme, and variant enums for consistent theming and size-based styling
• Manage overlays via Root and WindowExt; choose Popover vs PopupMenu vs Sheet based on anchoring and overlay needs
• Use entity-based state for inputs, keyed focus for forms, and use_keyed_state for persistent animation state

Example use cases

• Create a themed Button with ButtonVariant, Size enum, Styled and Disableable implementations
• Build a stateful Input component using Entity-backed state, focus keys, and validation hooks
• Implement a confirm dialog layered in Root with WindowExt and stackable dialogs support
• Author a popover anchored to a target element versus a full-screen sheet for side-drawer UX
• Add animated transitions to component mount/unmount using with_animation and cubic_bezier easing