Source Of Truth
Use only:
- The current project's files, structure, and established patterns
- DHTMLX MCP for React Gantt API details: https://docs.dhtmlx.com/mcp
- Official DHTMLX React Gantt docs as fallback: https://docs.dhtmlx.com/gantt/integrations/react/
Never invent props, hooks, templates, callback signatures, event names, or backend behavior.
If any React Gantt API detail is unclear, resolve it through DHTMLX MCP before writing code.
Preflight
Before writing code, identify:
- package:
@dhtmlx/trial-react-gantt or @dhx/react-gantt — check package.json, imports, lockfiles
- runtime: React, Next.js (needs
"use client"), Remix, or other React-based setup
- ownership model: React-managed (default) or Gantt-managed (large datasets, Gantt-centric app)
- persistence: local only,
data.save (default, single-entity), or data.batchSave (bulk sync)
Workflow
- Confirm the installed DHTMLX React Gantt package and import path.
- Decide the data ownership model before implementing features.
- Read only the reference file needed for the task:
- React integration/setup: references/react-integration.md
- CRUD, state, persistence, wrapper task types, and v9 -> v10 migration: references/data-and-crud.md
- Failure cases and guardrails: references/known-failures.md
- Advanced patterns (reorder, resources, undo/redo, schema): references/advanced-patterns.md
- Styling, theming, CSS variables, selectors, and template-based visual customization: references/styling-and-theming.md
- Use DHTMLX MCP before relying on advanced or unfamiliar APIs.
- Implement with documented APIs only.
MCP Server
This skill relies on DHTMLX MCP for API verification. If the dhtmlx-mcp tool is not available, ask the user to add it:
Claude Code:
claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp
Codex:
codex mcp add dhtmlx-mcp --url https://docs.dhtmlx.com/mcp
If MCP is not available, use the official docs at https://docs.dhtmlx.com/gantt/integrations/react/ as fallback.
Consult MCP First For
Consult DHTMLX MCP before using or changing:
- template callbacks you have not already verified
- wrapper hooks such as
useWorkTime, useGanttDatastore, or useResourceAssignments
- advanced props such as
batchSave, inlineEditors, modals, customLightbox, or groupTasks
- theme names beyond the known project usage
- resource panel, calendars, or advanced layout details
- resource timeline templates and cell rendering callbacks
- workload cell templates and overload threshold logic
Hard Rules
- The Gantt container must have explicit height.
- Use the app theme as the single source of truth.
- Prefer CSS variables and documented templates before selector-heavy overrides.
- Normalize date values before persistence.
- Build backend payloads explicitly from normalized task/link models.
- Do not use undocumented internals when a documented prop, hook, or ref API exists.
- Do not mix React-managed props and imperative instance mutations unless synchronization is intentional.
Quick Checklist
1---2name: dhtmlx-react-gantt3description: Builds and integrates DHTMLX React Gantt into React applications. Covers setup, props, templates, themes, data.save, data.batchSave, resources, calendars, undo/redo, row reorder, sortorder, and React integration patterns for @dhtmlx/trial-react-gantt and @dhx/react-gantt. Applies when working with gantt charts, project timelines, task dependencies, task CRUD, resource panels, working calendars, lightboxes, or weekend highlighting in React — regardless of whether "DHTMLX" is mentioned by name. Provides verified API guidance rather than guessing React Gantt APIs.4---56## Source Of Truth78Use only:91. The current project's files, structure, and established patterns102. DHTMLX MCP for React Gantt API details: https://docs.dhtmlx.com/mcp113. Official DHTMLX React Gantt docs as fallback: https://docs.dhtmlx.com/gantt/integrations/react/1213Never invent props, hooks, templates, callback signatures, event names, or backend behavior.1415If any React Gantt API detail is unclear, resolve it through DHTMLX MCP before writing code.1617## Preflight1819Before writing code, identify:20- **package**: `@dhtmlx/trial-react-gantt` or `@dhx/react-gantt` — check `package.json`, imports, lockfiles21- **runtime**: React, Next.js (needs `"use client"`), Remix, or other React-based setup22- **ownership model**: React-managed (default) or Gantt-managed (large datasets, Gantt-centric app)23- **persistence**: local only, `data.save` (default, single-entity), or `data.batchSave` (bulk sync)2425## Workflow26271. Confirm the installed DHTMLX React Gantt package and import path.282. Decide the data ownership model before implementing features.293. Read only the reference file needed for the task:30 - React integration/setup: [references/react-integration.md](references/react-integration.md)31 - CRUD, state, persistence, wrapper task types, and v9 -> v10 migration: [references/data-and-crud.md](references/data-and-crud.md)32 - Failure cases and guardrails: [references/known-failures.md](references/known-failures.md)33 - Advanced patterns (reorder, resources, undo/redo, schema): [references/advanced-patterns.md](references/advanced-patterns.md)34 - Styling, theming, CSS variables, selectors, and template-based visual customization: [references/styling-and-theming.md](references/styling-and-theming.md)354. Use DHTMLX MCP before relying on advanced or unfamiliar APIs.365. Implement with documented APIs only.3738## MCP Server3940This skill relies on DHTMLX MCP for API verification. If the `dhtmlx-mcp` tool is not available, ask the user to add it:4142Claude Code:43```bash44claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp45```4647Codex:48```bash49codex mcp add dhtmlx-mcp --url https://docs.dhtmlx.com/mcp50```5152If MCP is not available, use the official docs at https://docs.dhtmlx.com/gantt/integrations/react/ as fallback.5354## Consult MCP First For5556Consult DHTMLX MCP before using or changing:57- template callbacks you have not already verified58- wrapper hooks such as `useWorkTime`, `useGanttDatastore`, or `useResourceAssignments`59- advanced props such as `batchSave`, `inlineEditors`, `modals`, `customLightbox`, or `groupTasks`60- theme names beyond the known project usage61- resource panel, calendars, or advanced layout details62- resource timeline templates and cell rendering callbacks63- workload cell templates and overload threshold logic6465## Hard Rules6667- The Gantt container must have explicit height.68- Use the app theme as the single source of truth.69- Prefer CSS variables and documented templates before selector-heavy overrides.70- Normalize date values before persistence.71- Build backend payloads explicitly from normalized task/link models.72- Do not use undocumented internals when a documented prop, hook, or ref API exists.73- Do not mix React-managed props and imperative instance mutations unless synchronization is intentional.7475## Quick Checklist7677- [ ] Correct package identified78- [ ] Matching CSS import used79- [ ] Explicit height provided80- [ ] Data ownership model chosen81- [ ] Dates normalized before persistence82- [ ] Advanced APIs verified with MCP
DHTMLX