gpui-focus-handle
Facilitates focus tracking and keyboard navigation implementation in GPUI-based applications.
Install
mkdir -p .claude/skills/gpui-focus-handle-reviu-dev && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18694" && unzip -o skill.zip -d .claude/skills/gpui-focus-handle-reviu-dev && rm skill.zipInstalls to .claude/skills/gpui-focus-handle-reviu-dev
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Focus management and keyboard navigation in GPUI. Use when handling focus, focus handles, or keyboard navigation. Enables keyboard-driven interfaces with proper focus tracking and navigation between focusable elements.Key capabilities
- →Create FocusHandles for components
- →Make UI elements focusable
- →Manage focus state (focus, blur, is_focused)
- →Handle focus and blur events
- →Control keyboard navigation with Tab order
- →Implement custom focus navigation within containers
How it works
The system uses FocusHandles to track the currently focused element and provides methods to explicitly focus or blur elements. It automatically enables Tab/Shift-Tab navigation for elements with track_focus().
Inputs & outputs
When to use gpui-focus-handle
- →Implementing keyboard navigation
- →Managing focus states in components
- →Creating accessible input forms
About gpui-focus-handle
Provides patterns for managing FocusHandles, tracking component focus state, and responding to focus events for accessible UI interaction.
Focus management and keyboard navigation in GPUI. Use when handling focus, focus handles, or keyboard navigation. Enables keyboard-driven interfaces with proper focus tracking and navigation between focusable elements.
When not to use it
- →When focus management is not required
- →When keyboard navigation is not a concern
- →When UI elements do not need to be focusable
Limitations
- →Elements must use `track_focus()` to participate in Tab navigation
- →Custom focus navigation logic needs to be implemented for specific container behaviors
- →Visual focus indicators must be explicitly provided
How it compares
This approach provides a structured way to manage focus and keyboard navigation within GPUI, offering explicit control over focus states and events, unlike a generic UI framework that might lack built-in focus management.
Compared to similar skills
gpui-focus-handle side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| gpui-focus-handle (this skill) | 0 | 7mo | No flags | Intermediate |
| radix-ui-design-system | 33 | 3mo | Review | Intermediate |
| ui | 4 | 2mo | Review | Intermediate |
| reusable-ui-components | 1 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
reusable-ui-components
EvanBacon
Guidelines for creating reusable, portable UI components with native-first design, compound patterns, and accessibility
verify-bulk-action-bar
junnv93
BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.
frontend-patterns
forgivesam168
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.