ApexGantt Skill

AI models routinely get Gantt-chart code wrong: bad date formats, missing render() calls, listening for events on the wrong target, mutating series in place, or treating progress as a fraction.

The ApexGantt Skill is a context file you add to your project once. Your AI assistant reads it and generates correct ApexGantt code from the start.

→ GitHub: apexcharts/apexgantt-skill

Install

Claude Code

mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexcharts/apexgantt-skill.git

Cursor / Windsurf

curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexgantt-skill/main/.cursorrules

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I add task dependencies?

Or paste the contents of .cursorrules into your Copilot custom instructions so it applies to all conversations.

Generic AI (ChatGPT, Gemini, etc.)

Paste the contents of SKILL.md into your system prompt or attach it as context at the start of the conversation.

As an npm dependency

For tools that build on top of this skill (MCP servers, custom AI agents):

npm install apexgantt-skill

import { skillFile, referencePath } from 'apexgantt-skill';
import { readFile } from 'node:fs/promises';

const skill = await readFile(skillFile, 'utf8');
const deps  = await readFile(referencePath('dependencies.md'), 'utf8');

What the skill covers

  • Task data format — id, name, startTime, endTime, progress, hierarchy, milestones, baseline
  • Dependencies — FS / SS / FF / SF types with lag/lead, critical path
  • Lifecycle — render(), update(), updateTask(), destroy(), license key
  • Events — full GanttEventMap with CustomEvent.detail shapes
  • Selection, drag, resize, inline edit with the right opt-in flags
  • Custom toolbar items, columns, parsing for non-standard data shapes
  • Framework wrappers — react-apexgantt, vue-apexgantt, ngx-apexgantt

Repository structure

├── SKILL.md                       # Main entry point — read this first
├── .cursorrules                   # Self-contained Cursor / Windsurf version
├── references/
│   ├── data-format.md             # tasks, hierarchy, milestones, baseline
│   ├── dependencies.md            # FS/SS/FF/SF, lag/lead, critical path
│   ├── columns-and-toolbar.md     # columnConfig, toolbarItems, parsing
│   ├── events.md                  # GanttEventMap, selection, drag, resize
│   └── framework-wrappers.md      # React, Vue, Angular
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

Repository

https://github.com/apexcharts/apexgantt-skill

See also: ApexCharts Skill for the core charting library.