from accelerator14
Patterns and small hooks (useDismiss, useFocusReturn, useInert) for building accessible dialogs, popovers, and overlays that dismiss correctly and restore focus
Provides compact, reusable React hooks for managing overlay behaviour: dismissing on outside click or Escape, restoring focus to the triggering element after close, and making background content inert while a modal or overlay is open. The skill contains usage examples and common pitfalls.
Use this skill when implementing accessible dialogs, popovers, sheets, or modals in React UIs where focus management and dismissal semantics matter — especially for keyboard and screen-reader users. Good for component libraries and app-level overlays.
{ when: open } to useDismiss), and common mistakes to avoid.Frontend-focused agents or any agent that helps author React/TypeScript UI code and can read repository sources.
This skill has not been reviewed by our automated audit pipeline yet.
