# Create Interactive Menu

> Use this skill when creating dropdowns, context menus, or overlays that need a polished UX (open/close animation, click-outside, Escape, etc.).

- Skill: `majiayu000/create-interactive-menu` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/create-interactive-menu`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/create-interactive-menu/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/create-interactive-menu

---


# Create Interactive Menu

Preferred baseline: reuse the existing Lumina menu patterns (check `src/lumina/components/common/Menu.tsx` first).

## Mandatory UX checklist

Any interactive menu/overlay must include:

1. Open animation (fade-in + small translate/scale)
2. Close animation (fade-out via CSS transitions)
3. Click outside closes
4. Escape closes
5. Pointer-safe UX (hover delay when applicable)
6. Viewport safety (flip/fit near edges when needed)
7. Reduced-motion friendly (opacity/transform, no layout shift)

## Templates

- `template_menu.tsx`: a minimal menu component with animated open/close
- `useMenuInteraction.ts`: click-outside + Escape + optional hover delay

## Style guide (Lumina)

- Background: `bg-white`
- Border: `border border-slate-200`
- Shadow: `shadow-[0_10px_24px_rgba(15,23,42,0.12)]`
- Rounding: `rounded-2xl` / `rounded-xl`