menu-usage

Create data-driven contextual menus for React apps with Zag.js wrappers.

2|Updated Dec 2, 2024
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill menu-usage
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: menu-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/menu-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill menu-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use after component-usage-ux when an app needs @techsio/ui-kit Menu for action, radio, checkbox, separator, or submenu items using the Zag.js menu wrapper, Button trigger, icons, and supported open/highlight/select props.

Core Features & Use Cases

  • Provides a data-driven MenuItem model for consistent command lists across apps.
  • Supports action, radio, checkbox, separator, and submenu items with accessible keyboard navigation.
  • Use case: Add a consistent contextual menu to a settings page or admin panel with minimal boilerplate.

Quick Start

Integrate Menu usage in your frontend to present a consistent action list with a default Button trigger.

Frequently Asked Questions about menu-usage

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

FAQPage Schema
How do I create a contextual menu in React with accessible keyboard navigation?

The Zag.js menu wrapper provides a data-driven MenuItem model for React interfaces, delivering accessible keyboard navigation across action, radio, checkbox, separator, and submenu item types.

What is the best way to add radio and checkbox items to a frontend UI-kit menu?

The best way to add radio and checkbox items to a UI-kit menu is using a data-driven model that explicitly supports these item types natively, reducing boilerplate while maintaining consistent behavior across settings or admin panels.

Does the Zag.js menu wrapper support submenu structures in React applications?

Yes, the Zag.js menu wrapper supports submenu structures in React applications by utilizing a data-driven MenuItem model that includes submenu item types alongside action, radio, and checkbox entries for hierarchical navigation.

Can I use a data-driven menu model to build settings page tools without boilerplate?

You can use a data-driven menu model to build settings page tools without boilerplate by defining menu items as structured data, which automatically renders consistent command lists with default Button triggers and icons.

When do I need a Zag.js wrapper for frontend menu components instead of native HTML?

You need a Zag.js wrapper for frontend menu components instead of native HTML when your application requires complex item types like radio, checkbox, and submenus with robust accessible keyboard navigation and open/highlight/select props.