# Agent Skills

AI coding assistants such as Claude Code or Codex can generate DHTMLX Gantt code, but they often make mistakes with specialized APIs: wrong prop names, missing CSS imports, incorrect callback signatures, or mixing incompatible data patterns. Agent skills address this by teaching the assistant the correct patterns and known pitfalls before it writes code.

**GitHub:** [DHTMLX/skills](https://github.com/DHTMLX/skills)

## Available Skills

### DHTMLX JS Gantt

Covers integration of the core JavaScript Gantt into plain JavaScript and TypeScript applications. The skill recognises all delivery channels - the free `dhtmlx-gantt` package (the Community edition under MIT for v10+, the legacy GPL edition for v9.x and earlier), the `@dhx/trial-gantt` evaluation package, the commercial `@dhx/gantt` package, and `<script>` / CDN loading - and adapts setup, data, and theming guidance to each.

Review the rules in the [GitHub repository](https://github.com/DHTMLX/skills/tree/main/dhtmlx-js-gantt).

### DHTMLX React Gantt

Covers integration of `@dhtmlx/trial-react-gantt` and `@dhx/react-gantt` into React applications. The skill teaches the assistant the wrapper-specific setup, data ownership and persistence patterns, and theming approach that are easy to get wrong - and lists known pitfalls extracted from real projects with concrete fixes.

Review the rules in the [GitHub repository](https://github.com/DHTMLX/skills/tree/main/dhtmlx-react-gantt).

For a worked example of these patterns applied end-to-end, see the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) - a multi-project planner generated in Lovable, with the full build recipe in its [`lovable/`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/lovable) folder.

### DHTMLX Angular Gantt

Covers `@dhtmlx/trial-angular-gantt` and `@dhx/angular-gantt` for Angular applications - wrapper-specific setup, data ownership and persistence (`data.save` / `data.batchSave`), and theming, with known failure modes and concrete fixes.

Review the rules in the [GitHub repository](https://github.com/DHTMLX/skills/tree/main/dhtmlx-angular-gantt).

### DHTMLX Vue Gantt

Covers `@dhtmlx/trial-vue-gantt` and `@dhx/vue-gantt` for Vue 3 applications - the same wrapper patterns, plus events, `@ready`, refs, and composables.

Review the rules in the [GitHub repository](https://github.com/DHTMLX/skills/tree/main/dhtmlx-vue-gantt).

## Installing

```bash
npx skills add DHTMLX/skills --skill dhtmlx-js-gantt
npx skills add DHTMLX/skills --skill dhtmlx-react-gantt
npx skills add DHTMLX/skills --skill dhtmlx-angular-gantt
npx skills add DHTMLX/skills --skill dhtmlx-vue-gantt
```

### Manual Installation

Clone or download the [DHTMLX/skills](https://github.com/DHTMLX/skills) repository and copy the relevant skill folder (`dhtmlx-js-gantt`, `dhtmlx-react-gantt`, `dhtmlx-angular-gantt`, or `dhtmlx-vue-gantt`) into your project's skills directory (e.g., `.claude/skills/` for Claude Code, `.cursor/skills/` for Cursor).

## Using Skills with MCP

Skills and the MCP server are complementary. MCP gives your assistant access to real-time API documentation - method signatures, property values, configuration options. Skills teach it the integration patterns that prevent common mistakes. For best results, use both. See [DHTMLX MCP Server](integrations/ai-tools/mcp-server.md) for setup instructions.