Agent skill

Gpui Patterns

by StudentWeis in StudentWeis/ropy

Common GPUI patterns including component composition, state management strategies, event handling, and action dispatching.

MITAuto-check passedFrontend & Design

Install Gpui Patterns

skills CLI
$ npx skills add StudentWeis/ropy --skill gpui-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install StudentWeis/ropy gpui-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/StudentWeis/ropy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/gpui-patterns .claude/skills/gpui-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
gpui-patterns
GitHub stars
193
Token cost
~3.2k tokens
SKILL.md length
164 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
MIT

At a glance

Common GPUI patterns including component composition, state management strategies, event handling, and action dispatching.

  • User needs guidance on GPUI patterns
  • SKILL.md covers Metadata, Instructions and Resources
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Component design

What it does

Gpui Patterns is an agent skill from StudentWeis/ropy. 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.

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering State management and React components. The repository describes itself as: Cross-platform, lightweight clipboard manager written in Rust and GPUI. The licence is MIT.

When your agent uses it

  • User needs guidance on GPUI patterns
  • Component design
  • State management approaches

Example prompts

  • “/gpui-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit 4e784df. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are rust).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Gpui Patterns loads about 3.2k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 164 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from StudentWeis/ropy at commit 4e784df, republished under its MIT licence (© StudentWeis). 164 words, ~3,242 tokens.

Download SKILL.mdSave it as .claude/skills/gpui-patterns/SKILL.md (or your agent's skills folder).
name
gpui-patterns
description
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.

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
rust
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):

rust
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):

rust
struct Presenter {
    data: String,
}

impl Presenter {
    fn new(data: String) -> Self {
        Self { data }
    }
}

impl Render for Presenter {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div().child(self.data.as_str())
    }
}
Compound Components
rust
// Parent component with shared context
pub struct Tabs {
    items: Vec<TabItem>,
    active_index: usize,
}

pub struct TabItem {
    label: String,
    content: Box<dyn Fn() -> AnyElement>,
}

impl Tabs {
    pub fn new() -> Self {
        Self {
            items: Vec::new(),
            active_index: 0,
        }
    }

    pub fn add_tab(
        mut self,
        label: impl Into<String>,
        content: impl Fn() -> AnyElement + 'static,
    ) -> Self {
        self.items.push(TabItem {
            label: label.into(),
            content: Box::new(content),
        });
        self
    }

    fn set_active(&mut self, index: usize, cx: &mut ViewContext<Self>) {
        self.active_index = index;
        cx.notify();
    }
}

impl Render for Tabs {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .child(
                // Tab headers
                div()
                    .flex()
                    .children(
                        self.items.iter().enumerate().map(|(i, item)| {
                            tab_header(&item.label, i == self.active_index, || {
                                self.set_active(i, cx)
                            })
                        })
                    )
            )
            .child(
                // Active tab content
                (self.items[self.active_index].content)()
            )
    }
}
State Management Strategies
Model-View Pattern
rust
// Model: Application state
#[derive(Clone)]
struct AppState {
    count: usize,
    items: Vec<String>,
}

// View: Observes and renders state
struct AppView {
    state: Model<AppState>,
    _subscription: Subscription,
}

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

    fn increment(&mut self, cx: &mut ViewContext<Self>) {
        self.state.update(cx, |state, cx| {
            state.count += 1;
            cx.notify();
        });
    }
}
Context-Based State
rust
// Global state via context
#[derive(Clone)]
struct GlobalSettings {
    theme: Theme,
    language: String,
}

impl Global for GlobalSettings {}

// Initialize in app
fn init_app(cx: &mut AppContext) {
    cx.set_global(GlobalSettings {
        theme: Theme::Light,
        language: "en".to_string(),
    });
}

// Access in components
impl Render for MyView {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let settings = cx.global::<GlobalSettings>();

        div()
            .child(format!("Language: {}", settings.language))
    }
}
Subscription Patterns

Basic Subscription:

rust
struct Observer {
    model: Model<Data>,
    _subscription: Subscription,
}

impl Observer {
    fn new(model: Model<Data>, cx: &mut ViewContext<Self>) -> Self {
        let _subscription = cx.observe(&model, |_, _, cx| {
            cx.notify();  // Rerender on change
        });

        Self { model, _subscription }
    }
}

Selective Updates:

rust
impl Observer {
    fn new(model: Model<Data>, cx: &mut ViewContext<Self>) -> Self {
        let _subscription = cx.observe(&model, |this, model, cx| {
            let data = model.read(cx);

            // Only rerender if specific field changed
            if data.important_field != this.cached_field {
                this.cached_field = data.important_field.clone();
                cx.notify();
            }
        });

        Self {
            model,
            cached_field: String::new(),
            _subscription,
        }
    }
}

Multiple Subscriptions:

rust
struct MultiObserver {
    model_a: Model<DataA>,
    model_b: Model<DataB>,
    _subscriptions: Vec<Subscription>,
}

impl MultiObserver {
    fn new(
        model_a: Model<DataA>,
        model_b: Model<DataB>,
        cx: &mut ViewContext<Self>,
    ) -> Self {
        let mut subscriptions = Vec::new();

        subscriptions.push(cx.observe(&model_a, |_, _, cx| cx.notify()));
        subscriptions.push(cx.observe(&model_b, |_, _, cx| cx.notify()));

        Self {
            model_a,
            model_b,
            _subscriptions: subscriptions,
        }
    }
}
Event Handling Patterns
Click Events
rust
div()
    .on_click(cx.listener(|this, event: &ClickEvent, cx| {
        // Handle click
        this.handle_click(cx);
    }))
    .child("Click me")
Keyboard Events
rust
div()
    .on_key_down(cx.listener(|this, event: &KeyDownEvent, cx| {
        match event.key.as_str() {
            "Enter" => this.submit(cx),
            "Escape" => this.cancel(cx),
            _ => {}
        }
    }))
Event Propagation
rust
// Stop propagation
div()
    .on_click(|event, cx| {
        event.stop_propagation();
        // Handle click
    })

// Prevent default
div()
    .on_key_down(|event, cx| {
        if event.key == "Tab" {
            event.prevent_default();
            // Custom tab handling
        }
    })
Mouse Events
rust
div()
    .on_mouse_down(cx.listener(|this, event, cx| {
        this.mouse_down_position = Some(event.position);
    }))
    .on_mouse_move(cx.listener(|this, event, cx| {
        if let Some(start) = this.mouse_down_position {
            let delta = event.position - start;
            this.handle_drag(delta, cx);
        }
    }))
    .on_mouse_up(cx.listener(|this, event, cx| {
        this.mouse_down_position = None;
    }))
Action System
Define Actions
rust
use gpui::*;

actions!(app, [
    Increment,
    Decrement,
    Reset,
    SetValue
]);

// Action with data
#[derive(Clone, PartialEq)]
pub struct SetValue {
    pub value: i32,
}

impl_actions!(app, [SetValue]);
Register Action Handlers
rust
impl Counter {
    fn register_actions(&mut self, cx: &mut ViewContext<Self>) {
        cx.on_action(cx.listener(|this, _: &Increment, cx| {
            this.model.update(cx, |state, cx| {
                state.count += 1;
                cx.notify();
            });
        }));

        cx.on_action(cx.listener(|this, _: &Decrement, cx| {
            this.model.update(cx, |state, cx| {
                state.count = state.count.saturating_sub(1);
                cx.notify();
            });
        }));

        cx.on_action(cx.listener(|this, action: &SetValue, cx| {
            this.model.update(cx, |state, cx| {
                state.count = action.value;
                cx.notify();
            });
        }));
    }
}
Dispatch Actions
rust
// From within component
fn handle_button_click(&mut self, cx: &mut ViewContext<Self>) {
    cx.dispatch_action(Increment);
}

// With data
fn set_specific_value(&mut self, value: i32, cx: &mut ViewContext<Self>) {
    cx.dispatch_action(SetValue { value });
}

// Global action dispatch
cx.dispatch_action_on_window(Reset, window_id);
Keybindings
rust
// Register global keybindings
fn register_keybindings(cx: &mut AppContext) {
    cx.bind_keys([
        KeyBinding::new("cmd-+", Increment, None),
        KeyBinding::new("cmd--", Decrement, None),
        KeyBinding::new("cmd-0", Reset, None),
    ]);
}
Element Composition
Builder Pattern
rust
fn card(title: &str, content: impl IntoElement) -> impl IntoElement {
    div()
        .flex()
        .flex_col()
        .bg(white())
        .border_1()
        .rounded_lg()
        .shadow_sm()
        .p_6()
        .child(
            div()
                .text_lg()
                .font_semibold()
                .mb_4()
                .child(title)
        )
        .child(content)
}
Conditional Rendering
rust
div()
    .when(condition, |this| {
        this.bg(blue_500())
    })
    .when_some(optional_value, |this, value| {
        this.child(format!("Value: {}", value))
    })
    .map(|this| {
        if complex_condition {
            this.border_1()
        } else {
            this.border_2()
        }
    })
Dynamic Children
rust
div()
    .children(
        items.iter().map(|item| {
            div().child(item.name.as_str())
        })
    )
View Lifecycle
Initialization
rust
impl MyView {
    fn new(cx: &mut ViewContext<Self>) -> Self {
        // Initialize state
        let model = cx.new_model(|_| MyState::default());

        // Set up subscriptions
        let subscription = cx.observe(&model, |_, _, cx| cx.notify());

        // Spawn async tasks
        cx.spawn(|this, mut cx| async move {
            // Async initialization
        }).detach();

        Self {
            model,
            _subscription: subscription,
        }
    }
}
Update Notifications
rust
impl MyView {
    fn update_state(&mut self, new_data: Data, cx: &mut ViewContext<Self>) {
        self.model.update(cx, |state, cx| {
            state.data = new_data;
            cx.notify();  // Trigger rerender
        });
    }
}
Cleanup
rust
impl Drop for MyView {
    fn drop(&mut self) {
        // Manual cleanup if needed
        // Subscriptions are automatically dropped
    }
}
Reactive Patterns
Derived State
rust
impl Render for MyView {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let state = self.model.read(cx);

        // Compute derived values
        let total = state.items.iter().map(|i| i.value).sum::<i32>();
        let average = total / state.items.len() as i32;

        div()
            .child(format!("Total: {}", total))
            .child(format!("Average: {}", average))
    }
}
Async Updates
rust
impl MyView {
    fn load_data(&mut self, cx: &mut ViewContext<Self>) {
        let model = self.model.clone();

        cx.spawn(|_, mut cx| async move {
            let data = fetch_data().await?;

            cx.update_model(&model, |state, cx| {
                state.data = data;
                cx.notify();
            })?;

            Ok::<_, anyhow::Error>(())
        }).detach();
    }
}

Resources

Official Documentation
Common Patterns Reference
  • Model-View: State management pattern
  • Container-Presenter: Separation of concerns
  • Compound Components: Related components working together
  • Action System: Command pattern for user interactions
  • Subscriptions: Observer pattern for reactive updates
Best Practices
  • Store subscriptions to prevent cleanup
  • Use cx.notify() sparingly
  • Prefer composition over inheritance
  • Keep render methods pure
  • Handle errors gracefully
  • Document component APIs
  • Test component behavior

© StudentWeis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/gpui-patterns of StudentWeis/ropy.

Open the folder on GitHubat commit 4e784df

Compare with similar skills

Gpui Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Gpui Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Gpui Patterns this skillStudentWeis/ropy193—~3.2kAutomated safety check: PassMIT
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
Opik Frontend Patternscomet-ml/opik22k—~1.1kAutomated safety check: PassApache-2.0
Frontendredis/RedisInsight8.9k—~3.2kAutomated safety check: PassCustom licence
Acarshub Design Languagesdr-enthusiasts/docker-acarshub117—~1.1kAutomated safety check: PassGPL-3.0
Frontend UI Patternsbiersoeckli/QuickStack361—~704Automated safety check: PassGPL-3.0

Similar skills

  • Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Sets the conventions for the Opik React frontend: TanStack Query for data, Zustand for shared state, one-way layer imports and a fix for Google Translate crashes.

    22k GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Frontend

    redis/RedisInsight

    Official

    React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage.

    8.9k GitHub stars~3.2k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed
  • Acarshub Design Language

    sdr-enthusiasts/docker-acarshub

    Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…

    117 GitHub stars~1.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed
  • Frontend UI Patterns

    biersoeckli/QuickStack

    Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions.

    361 GitHub stars~704 tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Compose Atoms

    lobehub/lobehub

    Splits a heavy front-end domain into capability atoms that each host imports separately, sinking state into each atom instead of adding mode or readOnly flags.

    83k GitHub stars~2.6k tokensUpdated today
    Frontend & DesignAuto-check passed

More from StudentWeis/ropy

All 17 skills in this repo
  • Gpui Element

    StudentWeis/ropy

    Implementing custom elements using GPUI's low-level Element API (vs.

    193 GitHub stars~1.1k tokensUpdated 28 days ago
    Auto-check passed
  • Gpui Entity

    StudentWeis/ropy

    Entity management and state handling in GPUI. An agent skill from StudentWeis/ropy.

    193 GitHub stars~1.1k tokensUpdated 28 days ago
    Auto-check passed
  • Code Quality Review

    StudentWeis/ropy

    Review a code change, diff, pull request, module, or test suite for code quality, comment and documentation quality, and test quality.

    193 GitHub stars~2.2k tokensUpdated 28 days ago
    Auto-check passed
  • Contribution Flow

    StudentWeis/ropy

    Repository contribution workflow. An agent skill from StudentWeis/ropy.

    193 GitHub stars~705 tokensUpdated 28 days ago
    Auto-check passed
  • Gpui Action

    StudentWeis/ropy

    Action definitions and keyboard shortcuts in GPUI. An agent skill from StudentWeis/ropy.

    193 GitHub stars~916 tokensUpdated 28 days ago
    Auto-check passed
  • Gpui Async

    StudentWeis/ropy

    Async operations and background tasks in GPUI. An agent skill from StudentWeis/ropy.

    193 GitHub stars~934 tokensUpdated 28 days ago
    Auto-check passed

Questions about Gpui Patterns

What does Gpui Patterns do?

Common GPUI patterns including component composition, state management strategies, event handling, and action dispatching. Gpui Patterns is an agent skill from StudentWeis/ropy. Common GPUI patterns including component composition, state management strategies, event handling, and action dispatching.

When should I use Gpui Patterns?

Gpui Patterns fits situations like: user needs guidance on GPUI patterns; component design; state management approaches.

How do I install Gpui Patterns in Claude Code?

Run `npx skills add StudentWeis/ropy --skill gpui-patterns -a claude-code`. Or copy the skill folder (.agents/skills/gpui-patterns in StudentWeis/ropy) into .claude/skills/gpui-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Gpui Patterns in Codex?

Run `npx skills add StudentWeis/ropy --skill gpui-patterns -a codex`. Or copy the skill folder (.agents/skills/gpui-patterns in StudentWeis/ropy) into .agents/skills/gpui-patterns in your project. Codex loads it when a task matches its description.

Can I use Gpui Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add StudentWeis/ropy --skill gpui-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gpui-patterns, .gemini/skills/gpui-patterns, .github/skills/gpui-patterns and .opencode/skills/gpui-patterns in your project.

What does Gpui Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Gpui Patterns is instructions for the agent only.

Does Gpui Patterns access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Gpui Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Gpui Patterns use?

Gpui Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Gpui Patterns use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Gpui Patterns?

Skills that share tags, products or a category with Gpui Patterns: Dify Component Writing Guide (langgenius/dify, 158k stars), Opik Frontend Patterns (comet-ml/opik, 22k stars), Frontend (redis/RedisInsight, 8.9k stars) and Acarshub Design Language (sdr-enthusiasts/docker-acarshub, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Gpui Patterns?

StudentWeis (a GitHub user) maintains it in StudentWeis/ropy, which has 193 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 9, 2026.

Source: StudentWeis/ropy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.