ReddRadar
Agent skill
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.).
Install this agent skill to your Project
npx add-skill https://github.com/CheekyCodexConjurer/quant-lab/tree/main/skills/create_interactive_menu
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
CheekyCodexConjurer/quant-lab
action_logger
Keep an audit trail of changes, commands, and verification.
CheekyCodexConjurer/quant-lab
size_guard
Enforce line budgets and rotate or split large context files.
CheekyCodexConjurer/quant-lab
analyze_repo_capabilities
Detect repo tooling and patterns, then record a dynamic manifest.
CheekyCodexConjurer/quant-lab
safety_validation
Validate changes against .agentignore before commit.
CheekyCodexConjurer/quant-lab
safe_refactor_migration
Plan and execute large refactors with shadow mode and rollback.
CheekyCodexConjurer/quant-lab
command_guard
Enforce .agentpolicy rules before executing commands.
Didn't find tool you were looking for?