gpui-action

Define actions and bind keyboard shortcuts in GPUI applications.

12.5k|757|Updated Jun 13, 2024
One-click install
npx skills add https://github.com/longbridge/gpui-component --skill gpui-action-longbridge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpui-action
Source: https://github.com/longbridge/gpui-component/tree/main/.claude/skills/gpui-action
Command: npx skills add https://github.com/longbridge/gpui-component --skill gpui-action-longbridge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GPUI apps often require consistent, reusable patterns for defining user actions and keyboard shortcuts. This skill provides a structured approach to declare actions and bind keys, enabling predictable, accessible, and maintainable interactions across components.

Core Features & Use Cases

  • Define actions with the actions! macro or derive(Action)
  • Bind keys using cx.bind_keys() to dispatch actions
  • Handle actions with on_action on elements
  • Support context-aware bindings via key_context()

Quick Start

Define an action set for your UI, bind keys to those actions, and attach action handlers in your rendering code.

Frequently Asked Questions about gpui-action

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

FAQPage Schema
How do I define keyboard shortcuts for actions in a GPUI application?

You can define keyboard shortcuts for GPUI applications by declaring actions using the actions! macro or derive(Action), then binding keys to those actions with cx.bind_keys() to dispatch them. This structured approach ensures consistent and maintainable UI interactions across components.

What is the best way to create context-aware key bindings in GPUI?

Context-aware key bindings in GPUI are created by utilizing the key_context() method alongside cx.bind_keys(). This allows your application to apply responsive UI behaviors and dispatch actions only when specific contexts are active within your Render implementation.

How do I handle dispatched actions on GPUI elements?

You handle dispatched actions by attaching on_action handlers to elements within a Render implementation. This captures the actions declared via actions!(...) or derive(Action) and bound through cx.bind_keys(), executing the desired UI logic.

Do I need a Render implementation to use declarative actions in GPUI?

Yes, a Render implementation is required to attach on_action handlers to elements. Declarative actions and keyboard bindings in GPUI depend on this rendering structure to properly capture and respond to the dispatched events.

Why should I use declarative action definitions instead of inline event listeners in GPUI?

Declarative action definitions provide a structured approach for GPUI apps, ensuring predictable, accessible, and maintainable interactions. Unlike inline listeners, they allow you to centrally manage reusable shortcuts and context-aware bindings across multiple components.