rust-gpui-developer

Experienced Rust developer with expertise in user interface development using the gpui crate

View on GitHub
Author Geoff Johnson
Namespace @geoffjay/geoffjay-claude-plugins
Category languages
Version 1.0.0
Stars 7
Downloads 5
self.md verified
Table of content

Experienced Rust developer with expertise in user interface development using the gpui crate

Installation

npx claude-plugins install @geoffjay/geoffjay-claude-plugins/rust-gpui-developer

Contents

Folders: agents, commands, skills

Included Skills

This plugin includes 4 skill definitions:

gpui-patterns

Common GPUI patterns including component composition, state management strategies, event handling, and action dispatching. Use when user needs guidance on GPUI patterns, component design, or state management approaches.

View skill definition

GPUI Patterns

Metadata

This skill provides comprehensive guidance on common GPUI patterns and best practices for building maintainable, performant applications.

Instructions

Component Composition Patterns

Basic Component Structure

use gpui::*;

// View component with state
struct MyView {
    state: Model<MyState>,
    _subscription: Subscription,
}

impl MyView {
    fn new(state: Model<MyState>, cx: &mut ViewContext<Self>) -> Self {
        let _subscription = cx.observe(&state, |_, _, cx| cx.notify());
        Self { state, _subscription }
    }
}

impl Render for MyView {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let state = self.state.read(cx);

        div()
            .flex()
            .flex_col()
            .child(format!("Value: {}", state.value))
    }
}

Container/Presenter Pattern

Container (manages state and logic):

struct Container {
    model: Model<AppState>,
    _subscription: Subscription,
}

impl Container {
    fn new(model: Model<AppState>, cx: &mut ViewContext<Self>) -> Self {
        let _subscription = cx.observe(&model, |_, _, cx| cx.notify());
        Self { model, _subscription }
    }
}

impl Render for Container {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let state = self.model.read(cx);

        // Pass data to presenter
        Presenter::new(state.data.clone())
    }
}

Presenter (pure rendering): ``

…(truncated)

gpui-performance

Performance optimization techniques for GPUI including rendering optimization, layout performance, memory management, and profiling strategies. Use when user needs to optimize GPUI application performance or debug performance issues.

View skill definition

GPUI Performance Optimization

Metadata

This skill provides comprehensive guidance on optimizing GPUI applications for rendering performance, memory efficiency, and overall runtime speed.

Instructions

Rendering Optimization

Understanding the Render Cycle

State Change → cx.notify() → Render → Layout → Paint → Display

Key Points:

Avoiding Unnecessary Renders

// BAD: Renders on every frame
impl MyComponent {
    fn start_animation(&mut self, cx: &mut ViewContext<Self>) {
        cx.spawn(|this, mut cx| async move {
            loop {
                cx.update(|_, cx| cx.notify()).ok();  // Forces rerender!
                Timer::after(Duration::from_millis(16)).await;
            }
        }).detach();
    }
}

// GOOD: Only render when state changes
impl MyComponent {
    fn update_value(&mut self, new_value: i32, cx: &mut ViewContext<Self>) {
        if self.value != new_value {
            self.value = new_value;
            cx.notify();  // Only notify on actual change
        }
    }
}

Optimize Subscription Updates

// BAD: Always rerenders on model change
let _subscription = cx.observe(&model, |_, _, cx| {
    cx.notify();  // Rerenders even if nothing relevant changed
});

// GOOD: Selective updates
let _subscription = cx.observe(&model, |this, model,

...(truncated)

</details>

### gpui-styling

> GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition. Use when user needs help with styling, theming, or visual design in GPUI.

<details>
<summary>View skill definition</summary>

# GPUI Styling

## Metadata

This skill provides comprehensive guidance on GPUI's styling system, theme management, and visual design patterns for creating beautiful, consistent user interfaces.

## Instructions

### Styling API Fundamentals

#### Basic Styling

```rust
use gpui::*;

div()
    // Colors
    .bg(rgb(0x2563eb))           // Background
    .text_color(white())          // Text color
    .border_color(rgb(0xe5e7eb)) // Border color

    // Spacing
    .p_4()                        // Padding: 1rem
    .px_6()                       // Padding horizontal
    .py_2()                       // Padding vertical
    .m_4()                        // Margin
    .gap_3()                      // Gap between children

    // Sizing
    .w_64()                       // Width: 16rem
    .h_32()                       // Height: 8rem
    .w_full()                     // Width: 100%
    .h_full()                     // Height: 100%

    // Borders
    .border_1()                   // Border: 1px
    .rounded_lg()                 // Border radius: large

Color Types

// RGB from hex
let blue = rgb(0x2563eb);

// RGBA with alpha
let transparent_blue = rgba(0x2563eb, 0.5);

// HSLA (hue, saturation, lightness, alpha)
let hsla_color = hsla(0.6, 0.8, 0.5, 1.0);

// Named colors
let white = white();
let black = black();

Layout with Flexbox

div()
    .flex()                      // Enable flexbox
    .flex_row()                  // Horizontal layout
 

...(truncated)

</details>

### rust-ui-architecture

> Architecture patterns for Rust UI applications including GPUI-specific patterns, code organization, modularity, and scalability. Use when user needs guidance on application architecture, code organization, or scaling UI applications.

<details>
<summary>View skill definition</summary>

# Rust UI Architecture

## Metadata

This skill provides comprehensive guidance on architecting scalable, maintainable Rust UI applications using GPUI, covering project structure, design patterns, and best practices.

## Instructions

### Application Structure

#### Recommended Project Layout

my-gpui-app/ ├── Cargo.toml ├── src/ │ ├── main.rs # Application entry point │ ├── app.rs # Main application struct │ ├── ui/ # UI layer │ │ ├── mod.rs │ │ ├── views/ # High-level views │ │ │ ├── mod.rs │ │ │ ├── main_view.rs │ │ │ ├── sidebar.rs │ │ │ └── editor.rs │ │ ├── components/ # Reusable components │ │ │ ├── mod.rs │ │ │ ├── button.rs │ │ │ ├── input.rs │ │ │ └── modal.rs │ │ └── theme.rs # Theme definitions │ ├── models/ # Application state │ │ ├── mod.rs │ │ ├── document.rs │ │ ├── project.rs │ │ └── settings.rs │ ├── services/ # External integrations │ │ ├── mod.rs │ │ ├── file_service.rs │ │ └── api_client.rs │ ├── domain/ # Core business logic │ │ ├── mod.rs │ │ └── operations.rs │ └── utils/ # Utilities │ ├── mod.rs │ └── helpers.rs ├── examples/ # Example applications │ └── basic.rs └── tests/ # Integration tests ├── integration/ └── ui/


### Layer Se

...(truncated)

</details>

## Source

[View on GitHub](https://github.com/geoffjay/claude-plugins)
Tags: languages rustgpuiuiguiinterfaceframeworkzed