← Back to list
create-interactive-menu
by CheekyCodexConjurer
AERA: local-first workstation for quantitative research, visualization, and backtesting.
⭐ 0🍴 0📅 Jan 6, 2026
Run in ManusSKILL.md
name: Create Interactive Menu description: Use this skill when creating dropdowns, context menus, or overlays that need a polished UX (open/close animation, click-outside, Escape, etc.).
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:
- Open animation (fade-in + small translate/scale)
- Close animation (fade-out via CSS transitions)
- Click outside closes
- Escape closes
- Pointer-safe UX (hover delay when applicable)
- Viewport safety (flip/fit near edges when needed)
- Reduced-motion friendly (opacity/transform, no layout shift)
Templates
template_menu.tsx: a minimal menu component with animated open/closeuseMenuInteraction.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
Score
Total Score
55/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
✓最近の活動
3ヶ月以内に更新
+5
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon
