Agent skill

gpui

Build desktop apps with GPUI, the GPU-accelerated UI framework from Zed. Covers Entity state, Render trait, div() Tailwind API, actions/keybindings, gpui-component widgets, theming. Use when building Rust desktop applications with GPUI or gpui-component.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/gpui

SKILL.md

GPUI Development

GPUI is a hybrid immediate/retained mode, GPU-accelerated UI framework for Rust from Zed.

Quick Reference

Topic When to Use Reference
Fundamentals Starting new projects, understanding architecture fundamentals.md
State Management Entity<T>, notify(), emit(), subscribe() state-management.md
Rendering div() API, layout, conditional rendering rendering.md
Actions Keyboard shortcuts, key bindings actions.md
Components gpui-component widgets (Button, Input, Table) components.md
Theming Colors, cx.theme(), Root view theming.md
Anti-patterns Common mistakes to avoid anti-patterns.md

Critical Setup (MUST DO)

rust
use gpui::{Application, App};
use gpui_component::Root;

fn main() {
    Application::new().run(|cx: &mut App| {
        gpui_component::init(cx);  // REQUIRED when using gpui-component
        
        cx.open_window(opts, |window, cx| {
            let view = cx.new(|cx| MyView::new(window, cx));
            cx.new(|cx| Root::new(view, window, cx))  // REQUIRED for theming
        });
    });
}

Key Mental Model (React vs GPUI)

React GPUI Key Difference
useState Struct fields + cx.notify() State in struct, manual re-render trigger
Component View (impl Render) Views are Entities that render
Virtual DOM GPU rendering No diffing - rebuild elements each frame
Props drilling Entity<T> handles Pass entity handles, not callbacks

Instructions

REQUIRED: Before implementing GPUI code, load the relevant reference file(s) using the Read tool.

  1. Identify the task - What are you building?
  2. Load relevant references - Read the appropriate .md file(s) FIRST
  3. Follow patterns exactly - Use code patterns from references
  4. Check anti-patterns - Read anti-patterns.md before writing code

Reference Selection Guide

  • New project setup → Read fundamentals.md FIRST
  • Managing state, events → Read state-management.md FIRST
  • Building UI layouts → Read rendering.md FIRST
  • Adding keyboard shortcuts → Read actions.md FIRST
  • Using Button, Input, Select, Table → Read components.md FIRST
  • Styling, colors, themes → Read theming.md FIRST
  • Debugging issues → Read anti-patterns.md FIRST

Cargo.toml

toml
[dependencies]
gpui = "0.2.2"
gpui-component = "0.6.0-preview0"

Common Patterns

State Update Pattern

rust
impl MyView {
    fn update_something(&mut self, cx: &mut Context<Self>) {
        self.value = new_value;
        cx.notify();  // ALWAYS call after state changes
    }
}

Button Click Pattern

rust
Button::new("btn-id")
    .label("Click Me")
    .on_click(|_, _, cx| {
        // handle click
    })

Stateful Component Pattern

rust
struct MyView {
    input: Entity<InputState>,  // Store entity in struct
}

impl MyView {
    fn new(window: &Window, cx: &mut Context<Self>) -> Self {
        Self {
            input: cx.new(|cx| InputState::new(window, cx)),  // Create once
        }
    }
}

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results