Toolverse
All skills

gpui-focus-handle

by longbridge

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.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
4

About this skill

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.

How to use

  1. Utwórz strukturę komponentu z polem FocusHandle — w metodzie new() pobierz uchwyt fokusa za pomocą cx.focus_handle() i przypisz go do pola struktury.

  2. W metodzie render() oznacz element jako focusable, dodając .track_focus() z referencją do focus_handle, aby system śledził jego stan.

  3. Dodaj obsługę akcji klawiszowych za pomocą .on_action() — na przykład obsłuż Enter, aby wyzwolić logikę biznesową komponentu.

  4. Użyj metody focus_handle.focus(cx) aby programowo ustawić fokus na element, lub is_focused(cx) aby sprawdzić, czy element ma aktualnie fokus.

  5. Obsługuj zdarzenia fokusa — w render() sprawdź is_focused() i dostosuj wygląd lub zachowanie elementu na podstawie stanu fokusa.

  6. Implementuj rozmycie fokusa za pomocą cx.blur(), gdy użytkownik opuści element lub zatwierdzisz akcję.

Related skills

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135