syncfusion-react-popups — Claude Code skill for dialogs and tooltips
A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-codeWhat syncfusion-react-popups does
The skill covers two components from @syncfusion/ej2-react-popups: Dialog and ToolTip. Reference files walk through modal and modeless modes, nine preset positions plus custom X/Y, header dragging, resize grips, header/content/footer templates and sixteen animation effects. Separate pages handle action buttons, events like beforeClose, localization and WCAG 2.2 accessibility.
For an agent the value is in the prop names. It knows allowDragging, enableResize, closeOnEscape, enableRtl, the shape of ButtonPropsModel, and show()/hide() through a ref. There are sections on nested dialogs, forms with validation and AJAX content loading.
Check your versions before installing. Every @syncfusion/ej2-* package has to sit on the same major version, or peer dependencies will fight. The skill suggests installing @syncfusion/ej2-react-popups, @syncfusion/ej2-base, @syncfusion/ej2-buttons and @syncfusion/ej2-popups together. You also need a CSS theme — material, bootstrap or tailwind.
What it helps with
- build a delete confirmation modal
- put a validated form inside a dialog
- make a draggable window that resizes
- show a tooltip on hover
- wire Escape-to-close and screen reader focus
Example prompts for the agent
- Build a confirmation dialog with DialogComponent and OK/Cancel buttons
- Add header dragging and resize to this dialog
- Show a tooltip explaining this icon on hover
How to install syncfusion-react-popups
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-popups/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-popups/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-popups/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-popups/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-popups2Manually: put the files in place
.github/skills/syncfusion-react-popups/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-popupsManually: put the files in place
.devin/skills/syncfusion-react-popups/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-popups
How do I install syncfusion-react-popups in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-code. The skill file lands at ~/.claude/skills/syncfusion-react-popups/SKILL.md.
What does syncfusion-react-popups do?
It gives your agent a reference for the Dialog and ToolTip components in Syncfusion for React: modes, positioning, templates, animations, events and accessibility.
What do I need for the skill to work?
The @syncfusion/ej2-react-popups, @syncfusion/ej2-base, @syncfusion/ej2-buttons and @syncfusion/ej2-popups packages on one major version, plus a CSS theme import.
