# syncfusion-react-gantt-chart

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 773 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-gantt-chart/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-gantt-chart

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-gantt-chart/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-gantt-chart/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-gantt-chart/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-gantt-chart/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-gantt-chart
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-gantt-chart/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-gantt-chart
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-gantt-chart/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-gantt-chart/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md