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.
Install this agent skill to your Project
npx add-skill https://github.com/johnlindquist/script-kit-next/tree/main/.opencode/skill/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)
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.
- Identify the task - What are you building?
- Load relevant references - Read the appropriate .md file(s) FIRST
- Follow patterns exactly - Use code patterns from references
- 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
[dependencies]
gpui = "0.2.2"
gpui-component = "0.6.0-preview0"
Common Patterns
State Update Pattern
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
Button::new("btn-id")
.label("Click Me")
.on_click(|_, _, cx| {
// handle click
})
Stateful Component Pattern
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.
johnlindquist/script-kit-next
Generate Component Documentation
Based on existing docs styles and specific API implementations, and referencing same name stories, generate comprehensive documentation for the new component.
johnlindquist/script-kit-next
Generate Component Story
Generate a comprehensive story for a new component for as example.
johnlindquist/script-kit-next
new-component
How to write a new component of GPUI Component.
johnlindquist/script-kit-next
troubleshooting
Diagnose and fix common Script Kit issues. Use when the user reports bugs, crashes, missing features, or unexpected behavior in Script Kit GPUI.
johnlindquist/script-kit-next
script-authoring
Create and manage TypeScript scripts for Script Kit. Use when the user wants to write a new script, edit an existing script, or understand Script Kit's SDK and metadata system.
johnlindquist/script-kit-next
agents
Create mdflow-backed agent files for Script Kit. Use when the user wants to create AI agents, configure agent backends (Claude, Gemini, Codex), or manage agent metadata.
Didn't find tool you were looking for?