skills.rest
kkkaoru
kkkaoruCOMMUNITY
Explore all skills by this author →
𝕏@kkk4oruGitHub

gpui-component

Builds GPUI desktop application UIs with gpui-component widgets and normative design and coding guides.

Updated Oct 15, 2019
Search Tags:#theming#design system#component library#rust#gpui#gpui-component#desktop ui
One-click install
npx skills add https://github.com/kkkaoru/dotfiles --skill gpui-component-kkkaoru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpui-component
Source: https://github.com/kkkaoru/dotfiles/tree/main/.agents/skills-stroage/gpui-component
Command: npx skills add https://github.com/kkkaoru/dotfiles --skill gpui-component-kkkaoru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Rust desktop UIs with the gpui-component library requires knowing dozens of component APIs, state ownership patterns, theming rules, and desktop interaction conventions; this Skill supplies the component catalog, setup patterns, and normative design and coding guides so generated code follows the library's real APIs instead of invented ones. ## Core Features & Use Cases - Component Catalog & API Lookup: Maps UI needs to the right component (Button, Input, Select, Dialog, DataTable, Tree, Charts, etc.) with import paths, stateful vs stateless usage, and links to per-component documentation. - Normative Design Guides: Enforces desktop-first rules for hierarchy, spacing tokens, density, alignment, interaction states, overlays, and interface copy. - Normative Coding Guides: Governs crate architecture, RenderOnce vs Entity state ownership, ElementId stability, theming via cx.theme() tokens, focus handling, and public API naming conventions. - Use Case: When asked to add a settings panel to a GPUI app, the Skill directs the agent to use Form fields with Input/Select state entities, semantic theme tokens, rem-based spacing, and correct dialog focus restoration rather than improvised web-style markup. ## Quick Start Use the gpui-component skill to build a settings dialog with a text input, a select dropdown, and primary and cancel buttons in my GPUI application.

Frequently Asked Questions about gpui-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up gpui-component in a GPUI application?▼

Call gpui_component::init(cx) first inside app.run(), then wrap the first-level view of every window in Root::new(view, window, cx). Root coordinates dialogs, sheets, notifications, focus traps, and tooltip layers.

What is the difference between stateless and stateful gpui-component components?▼

Stateless components like Button, Checkbox, and Icon are used directly in render with values supplied by the caller. Stateful components like Input, Select, and DataTable require an Entity<State> created with cx.new() and stored in the owning view.

How do I theme and style gpui-component applications?▼

Read semantic colors from cx.theme() such as primary, background, foreground, border, and muted, and use rem-based helpers like p_2(), gap_3(), and text_sm(). Application UI must not contain raw hex, rgb, or hsla values.

When should I use Button versus Link in gpui-component?▼

Use Button for every in-app command, choosing ghost or outline variants when it should read quietly. Reserve Link for external URLs and email addresses opened by a browser or mail client.

Why does my gpui-component code fail with nonexistent API methods?▼

The most common failure is inventing plausible method names by translating React, CSS, or older GPUI examples. Search the current source or fetch the per-component docs at longbridge.github.io/gpui-component to confirm real signatures.

How do dialogs and focus management work in gpui-component?▼

Open dialogs via window.open_dialog and alert dialogs via window.open_alert_dialog. Modal surfaces trap focus, Escape dismisses the topmost overlay, and focus returns to the triggering element on dismissal.

Related Skills

Explore More Software Engineering Skills→
cnwzhucnwzhu
27

gpui-init

Scaffolds GPUI projects with ready-to-use templates and boilerplate structure.

Community
Intermediate
kettleofketchupkettleofketchup

wails

Scaffold Wails v2 projects and bind Go methods to JavaScript frontends.

Community
Advanced
alfadocsalfadocs

alfadocs-accessibility-review

Audit AlfaDocs interfaces for WCAG compliance and accessibility defects.

Official
Advanced
MacPhobosMacPhobos

rust-desktop-applications

Develop cross-platform desktop applications using Rust with Tauri or native GUI frameworks.

Community
Advanced