Skills
.Work. You
Rest

gpui-patterns

Community

Apply common UI patterns and advanced GPUI techniques.

Software Engineering#forms#state-management#modals#lists#component-patterns#gpui-patterns#focus-management
Authorcnwzhu
Version1.0.0
Installs0

System Documentation

What problem does it solve?

GPUI developers need reusable, battle-tested UI patterns to accelerate development and ensure consistent behavior across modals, lists, forms, and complex component compositions.

Core Features & Use Cases

  • Modal/Overlay pattern for modal dialogs and transient UI.
  • Dynamic List rendering patterns for lists, grids, and tables.
  • Form pattern with validation, error handling, and accessible feedback.
  • Global state pattern for sharing state across components and screens.
  • Parent-Child communication via events and subscriptions for decoupled components.
  • Tab navigation pattern for multi-view interfaces.
  • Loading and async state patterns for data-driven UI and progress feedback.
  • Dropdowns, focus management, and accessibility considerations.
  • Production component patterns: Builder, Component Structure, Variant System for scalable UI.
  • Focus management and responsive sizing strategies for varying DPIs.

Quick Start

Load the gpui-patterns package and start applying these patterns to a sample GPUI screen (modals, lists, and forms).

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: gpui-patterns
Download link: https://github.com/cnwzhu/gpui-skills/archive/main.zip#gpui-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.