What UI patterns does this skill support?

This skill supports dropdowns, context menus, and overlays, ensuring they include animations, click-outside logic, and Escape-key handling.

Does it follow a specific design system?

Yes, it is optimized for the Lumina design system, utilizing specific Tailwind CSS classes for consistent shadows, borders, and rounding.

What templates are provided with this skill?

It provides a minimal menu component (template_menu.tsx) and a custom hook (useMenuInteraction.ts) for handling common menu logic.

Will my menus get cut off at the edge of the screen?

No, the skill includes viewport safety features that automatically flip or fit the menu near the edges of the screen to prevent clipping.

How does it handle accessibility?

The skill enforces a mandatory checklist including keyboard navigation (Escape key), pointer-safe interactions, and reduced-motion friendly transitions.

Lumina Interactive Menu Creator

Name: Lumina Interactive Menu Creator
Author: CheekyCodexConjurer

byCheekyCodexConjurer

设计工具

Generates polished, accessible UI menus and overlays with built-in animations and UX best practices.

关于

The Lumina Interactive Menu skill streamlines the creation of professional-grade frontend components such as dropdowns, context menus, and overlays. It ensures every interactive element adheres to high-quality UX standards by automatically implementing fade-in/out animations, 'click-outside' detection, Escape-key dismissal, and viewport safety logic. By following the standardized Lumina design system, this skill helps developers maintain visual consistency and accessibility across complex web applications with minimal effort.

主要功能

Built-in accessibility with Escape-key and click-outside dismissal
Viewport-aware positioning to prevent menus from clipping at screen edges
Reduced-motion support for inclusive user experiences
Pre-configured Lumina style guide integration for consistent branding
0 GitHub stars
Animated transitions for smooth open and close interactions

使用场景

Developing interactive overlays that require precise positioning and focus management
Implementing right-click context menus with custom animations
Building accessible navigation dropdowns for complex web dashboards

关于

主要功能

Built-in accessibility with Escape-key and click-outside dismissal
Viewport-aware positioning to prevent menus from clipping at screen edges
Reduced-motion support for inclusive user experiences
Pre-configured Lumina style guide integration for consistent branding
0 GitHub stars
Animated transitions for smooth open and close interactions

使用场景

Developing interactive overlays that require precise positioning and focus management
Implementing right-click context menus with custom animations
Building accessible navigation dropdowns for complex web dashboards