gpui-patterns
For always-loaded rules see CLAUDE.md. This skill provides detailed patterns and examples.
GPUI Patterns
Essential patterns for building UI with GPUI in Script Kit.
Quick Reference (Things That Break Most Often)
- Layout chain order: Layout (
flex*) → Sizing (w/h) → Spacing (px/gap) → Visual (bg/border) - Lists:
uniform_list(fixed height 52px) +UniformListScrollHandle - Theme colors: use
theme.colors.*(neverrgb(0x...)) - Focus colors: use
theme.get_colors(is_focused); re-render on focus change - State updates: after render-affecting changes, must
cx.notify() - Keyboard: primary pattern is
.on_key_down(handler)+crate::ui_foundation::is_key_*helpers - Printable chars:
printable_char(event.keystroke.key_char.as_deref()) - Focus events: keyboard handlers need the focus trio:
.track_focus(...) + .on_key_down(...) + .child(...)
Keyboard Handling (CRITICAL)
More from johnlindquist/script-kit-next
dev-loop
Run ./dev.sh in background, monitor logs, iterate on code changes until the expected behavior is observed. Use when making changes that need runtime verification — UI behavior, protocol handling, camera capture, keyboard events. Spawns cargo-watch, tails logs, checks for expected output.
1visual-test
Visual iteration workflow for Script Kit GPUI. Use when making UI changes that need visual verification — focus indicators, colors, layout, shadows, spacing. Covers the named-pipe test pattern, captureWindow screenshots, and the build-capture-verify loop.
1testing-skill
A brief description of what this skill does
1script-kit-hive
Hive/beads task management for Script Kit agents. Use when working with the issue tracking system, managing beads, or coordinating agent work. Covers issue lifecycle, progress reporting, and file reservations.
1layout-inspector
Layout debugging for GPUI windows. Use when diagnosing layout bugs — missing elements, clipped content, flex sizing issues, overflow problems. Covers debug div probing, layout dump JSON protocol, computed bounds assertions, and the agentic fix-verify loop.
1script-kit-scripting
Script metadata and scriptlet bundle patterns for Script Kit. Use when writing scripts, test files, or scriptlet bundles. Covers global metadata, legacy comment-based metadata, and YAML frontmatter for bundles.
1