Modal
lobehub/lobe-chatModals and popups are common in web apps. This skill shows you how to build them using the LobeHub imperative API. You do not need to track an open state. Just call createModal when you want to show a dialog.
The skill uses base-ui primitives from @lobehub/ui/base-ui. You also get confirmModal for simple yes/no flows. A global ModalHost component must be mounted near the root. This approach makes your modals easy to reuse and test.
Developers working on LobeHub projects will benefit most. You will learn file structure, content components, and how to use useModalContext inside modal body. The guide also covers i18n and common options.
Add Modal skill to your workflow
Global
mkdir -p ~/.claude/skills/modalProject
mkdir -p .claude/skills/modalSource Repository
More Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density