🎯

new-component

🎯Skill

from longbridge/gpui-component

What it does

Generates new GPUI UI components following existing patterns, styles, and API conventions for consistent and well-structured user interface elements.

new-component

Installation

Install skill:

npx skills add https://github.com/longbridge/gpui-component --skill new-component

Last UpdatedJan 26, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.

Instructions

When creating new GPUI components:

Follow existing patterns: Base implementation on components in crates/ui/src (examples: Button, Select)
Style consistency: Follow existing component styles and Shadcn UI patterns
Component type decision:

- Use stateless elements for simple components (like Button)

- Use stateful elements for complex components with data (like Select and SelectState)

API consistency: Maintain the same API style as other elements
Documentation: Create component documentation
Stories: Write component stories in the story folder

Component Types

Stateless: Pure presentation components without internal state
Stateful: Components that manage their own state and data

More from this repository10

🎯

gpui-style-guide🎯Skill

Enforces consistent GPUI component design patterns by providing a comprehensive style guide for creating and reviewing Rust UI components.

🎯

gpui-async🎯Skill

Enables asynchronous operations and background tasks in GPUI, allowing seamless coordination between UI updates and concurrent computations.

🎯

gpui-event🎯Skill

Enables type-safe event handling, subscriptions, and observations for coordinating component interactions in GPUI applications.

🎯

gpui-layout-and-style🎯Skill

Provides CSS-like layout and styling for Rust GPUI components using type-safe, chainable methods for flexbox, sizing, colors, and spacing.

🎯

gpui-entity🎯Skill

Manages application state through safe, concurrent entities with read, update, and weak reference capabilities for reactive and async-friendly state handling in GPUI.

🎯

gpui-focus-handle🎯Skill

Enables keyboard-driven focus management and navigation between focusable elements in GPUI user interfaces.

🎯

gpui-action🎯Skill

Defines and manages keyboard-driven actions and key bindings for declarative UI interactions in GPUI applications.

🎯

gpui-context🎯Skill

gpui-context skill from longbridge/gpui-component

🎯

gpui-test🎯Skill

Enables comprehensive testing of GPUI applications with deterministic, single-threaded test execution for UI components and async operations.

🎯

gpui-element🎯Skill

Enables low-level, performance-critical custom UI element creation with precise control over layout, painting, and interaction phases in GPUI.