syncfusion-react-scheduler — Claude Code skill: how to install
Guides coding assistants through configuring Syncfusion React Scheduler components with multiple calendar views and drag-and-drop bookings. Useful when building room reservation tools.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a claude-codeWhat syncfusion-react-scheduler does
This skill guides assistants on implementing the Syncfusion React Scheduler. It details setup steps for timeline layouts, monthly grids, agenda lists, and REST data wiring with DataManager. Support covers RRULE recurrence rules and timezone conversions.
Buffer periods before and after appointments set up via eventSettings.enableBuffer. Buffer durations use minutes. Setting allowOverlap to false prevents booking clashes during drag operations. The integration also exposes WebMCP endpoints, allowing external clients to call addEvent and deleteEvent.
Event titles and descriptions are treated strictly as untrusted text. The agent ignores any prompts hidden inside booking summaries. For WebMCP exposure, you must restrict callers using webMcpSettings.exposedTo.
What it helps with
- assemble an interactive appointment schedule with drag-and-drop duration resizing
- configure preparation and wrap-up buffers to prevent overlapping appointments
- group timeline slots across doctors, meeting rooms, or equipment
- connect external MCP tools to manage appointments remotely
Example prompts for the agent
- Create a Syncfusion React schedule with Week and Timeline views, adding a 10-minute cleanup buffer
- Set up appointment grouping across three team members and disable overlaps
- Add WebMCP tool support to the scheduler and limit access to trusted domains
How to install syncfusion-react-scheduler
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-scheduler/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-scheduler/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-scheduler/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-scheduler/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-scheduler2Manually: put the files in place
.github/skills/syncfusion-react-scheduler/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-schedulerManually: put the files in place
.devin/skills/syncfusion-react-scheduler/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -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-scheduler
How do I install syncfusion-react-scheduler in Claude Code?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-scheduler -a claude-code in your terminal. The configuration is saved to ~/.claude/skills/syncfusion-react-scheduler/SKILL.md.
What does the syncfusion-react-scheduler skill do?
It provides implementation guidelines for the Syncfusion React Scheduler, covering view injection, data fetching, recurrence patterns, and event buffer templates.
How does the skill handle untrusted event data?
Booking payloads are treated as display-only strings. The assistant ignores text commands found inside schedule fields and runs updates strictly through verified APIs.
