interaction-utilities

Provide headless interaction primitives for keyboard navigation and accessibility in pocopine components.

Updated Jun 1, 2026

Search Tags:#accessibility #keyboard navigation #interaction #focus management #pocopine

Ready to run

npx skills add https://github.com/mambisi/pocopine-skills --skill interaction-utilities

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-utilities
Source: https://github.com/mambisi/pocopine-skills/tree/main/interaction-utilities
Command: npx skills add https://github.com/mambisi/pocopine-skills --skill interaction-utilities

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of implementing complex interactions and accessibility features in pocopine components, providing a set of directives and modules that simplify the process.

Core Features & Use Cases

Keyboard Navigation: Facilitates tab cycling through items with pp-roving.
Floating Panels: Positions dropdowns, tooltips, and popovers using pp-anchor.
Focus Management: Manages focus trapping with focus::trap() and restoration with focus::restore().
Scroll Blocking: Locks and unlocks scroll behavior with scroll_lock::lock() and scroll_lock::unlock().
Accessibility: Generates accessible IDs with $id and manages aria-labelledby and role attributes.
Use Case: When building a pocopine component that requires keyboard navigation, floating panels, and accessibility features, this Skill provides the necessary tools to implement these functionalities efficiently.

Quick Start

Use the interaction-utilities skill to add keyboard navigation to a pocopine component with the directive 'pp-roving'.

Frequently Asked Questions about interaction-utilities

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement keyboard navigation in pocopine components?▼

Use the pp-anchor directive to position floating dropdowns, tooltips, and popovers in pocopine. It provides headless floating positioning primitives to calculate and apply dynamic coordinates for overlay elements.

How do I trap and restore focus for accessible web dialogs?▼

Trap and restore focus for accessible web dialogs using the focus::trap() and focus::restore() modules. These interaction utilities manage focus boundaries within pocopine components, ensuring keyboard users cycle correctly within overlays.

Do I need the pocopine framework to use these accessibility utilities?▼

Use the scroll_lock::lock() and scroll_lock::unlock() utilities to lock and unlock scroll behavior in web applications. These pocopine modules prevent background page scrolling when floating panels or overlays are active.

What's the best way to generate accessible IDs and aria attributes for components?▼

Generate accessible IDs and aria attributes using the $id module to create unique identifiers, then manage aria-labelledby and role attributes. This accessibility wiring ensures pocopine components meet screen reader requirements.