Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-gantt-chart — Claude Code skill: how to install

Configures the Syncfusion React Gantt Chart component. It helps set up task schedules, dependencies, resource planning, and Excel or PDF exports.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a claude-code
Open on GitHub

What syncfusion-react-gantt-chart does

This skill guides developers through integrating GanttComponent into React setups such as Vite and Create React App. It details importing CSS theme packages, injecting required chart modules, and binding local arrays or remote endpoints using DataManager, UrlAdaptor, and RemoteSaveAdaptor.

Scheduling workflows include automatic, manual, and custom modes with time units from minutes to months. The guide covers task constraints such as ASAP, MSO, or FNET, predecessor links (FS, SS, FF, SF) with offset values, critical path calculations, and baseline tracking.

Interactive taskbar drawing requires enabling edit settings first, because drawing on unscheduled items depends on validation rules and calendar definitions.

What it helps with

  • connect GanttComponent to remote APIs using UrlAdaptor
  • configure predecessor dependencies like FS and SS with custom offsets
  • enforce task constraints such as ASAP, MSO, and FNET
  • implement export routines for Excel and PDF files

Example prompts for the agent

  • Show how to set up GanttComponent in Vite with theme CSS and module injection.
  • Configure task dependencies using 2FS+1d syntax and enable offset recalculation on drag.
  • Bind remote data to the Gantt chart via UrlAdaptor and handle HTTP failures.

How to install syncfusion-react-gantt-chart

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-gantt-chart/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-gantt-chart/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-gantt-chart

How do I install syncfusion-react-gantt-chart in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a claude-code in your terminal. It adds the skill files directly to your agent environment.

What data binding options are covered?

It covers local arrays, flat self-referential lists, and remote data binding via DataManager. For server-side CRUD, it explains UrlAdaptor and RemoteSaveAdaptor.

Which task dependency types can be configured?

The skill details Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), and Start-to-Finish (SF). You can add duration offsets such as 2FS+3d or 2SS-1h.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set57

syncfusion-react-grid Guides AI coding agents through configuring Syncfusion React Grid tables with sorting, filtering, editing, and virtual scrolling. CX Codex +1 823installs syncfusion-react-scheduler Guides coding assistants through configuring Syncfusion React Scheduler components with multiple calendar views and drag-and-drop bookings. Useful when building room reservation tools. CX Codex +1 783installs syncfusion-react-rich-text-editor Configures the Syncfusion React Rich Text Editor for HTML or Markdown editing. Useful for setting up toolbars, media uploads, and document export in React apps. CX Codex +1 757installs syncfusion-react-charts This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views. CX Codex +1 749installs syncfusion-react-treegrid Guides AI agents through configuring Syncfusion React TreeGrid components, handling nested data binding, and column setups. CX Codex +1 746installs syncfusion-react-common This skill guides Syncfusion React setup for localization, RTL, animation, drag-and-drop, persistence, templates, and security-related component work. CX Codex +1 732installs syncfusion-react-file-manager Configures the Syncfusion React File Manager component for web apps. Guides agents through local JSON state, S3 or Azure integration, and custom toolbar controls. CX Codex +1 729installs syncfusion-react-themes This skill helps configure Syncfusion React themes, dark mode, CSS variables, icons, and component sizing. Use it when changing an app’s visual styling. CX Codex +1 729installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor