Source Of Truth
Use only:
- The current project's files, structure, and established patterns
- DHTMLX MCP for Vue Gantt API details: https://docs.dhtmlx.com/mcp
- Official DHTMLX Vue Gantt docs as fallback: https://docs.dhtmlx.com/gantt/integrations/vue/
Never invent props, helper names, composables, templates, callback signatures, event names, or backend behavior.
If any Vue Gantt API detail is unclear, resolve it through DHTMLX MCP before writing code.
Preflight
Before writing code, identify:
- package:
@dhtmlx/trial-vue-gantt or @dhx/vue-gantt - check package.json, imports, lockfiles
- runtime: Vue 3, Nuxt, Vite, or another Vue-based setup
- ownership model: Application-managed (default) or Gantt-managed (large datasets, Gantt-centric apps)
- persistence: local only,
data.save (default, single-entity), or data.batchSave (bulk sync)
Workflow
- Confirm the installed DHTMLX Vue Gantt package and import path.
- Decide the data ownership model before implementing features.
- Read only the reference file needed for the task:
- Vue integration/setup: references/vue-integration.md
- CRUD, state, and persistence: 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/vue/ as fallback.
Consult MCP First For
Consult DHTMLX MCP before using or changing:
- template callbacks you have not already verified
- helper factories such as
defineGanttConfig, defineGanttTemplates, defineGanttEvents, or defineInlineEditors
- composables such as
useWorkTime, useGanttDatastore, useResourceAssignments, useGanttActions, or useGanttEvent
- advanced props such as
batchSave, inlineEditors, modals, customLightbox, groupTasks, or events
- 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, composable, event map,
@ready, or ref API exists.
- Do not mix Vue-managed props and imperative instance mutations unless synchronization is intentional.
Quick Checklist
1---2name: dhtmlx-vue-gantt3description: Builds and integrates DHTMLX Vue Gantt into Vue 3 applications. Covers setup, props, templates, themes, events, @ready, refs, data.save, data.batchSave, resources, calendars, undo/redo, row reorder, sortorder, and Vue integration patterns for @dhtmlx/trial-vue-gantt and @dhx/vue-gantt. Applies when working with gantt charts, project timelines, task dependencies, task CRUD, resource panels, working calendars, lightboxes, inline editors, or weekend highlighting in Vue - regardless of whether "DHTMLX" is mentioned by name. Provides verified API guidance rather than guessing Vue Gantt APIs.4---56## Source Of Truth78Use only:91. The current project's files, structure, and established patterns102. DHTMLX MCP for Vue Gantt API details: https://docs.dhtmlx.com/mcp113. Official DHTMLX Vue Gantt docs as fallback: https://docs.dhtmlx.com/gantt/integrations/vue/1213Never invent props, helper names, composables, templates, callback signatures, event names, or backend behavior.1415If any Vue Gantt API detail is unclear, resolve it through DHTMLX MCP before writing code.1617## Preflight1819Before writing code, identify:20- **package**: `@dhtmlx/trial-vue-gantt` or `@dhx/vue-gantt` - check `package.json`, imports, lockfiles21- **runtime**: Vue 3, Nuxt, Vite, or another Vue-based setup22- **ownership model**: Application-managed (default) or Gantt-managed (large datasets, Gantt-centric apps)23- **persistence**: local only, `data.save` (default, single-entity), or `data.batchSave` (bulk sync)2425## Workflow26271. Confirm the installed DHTMLX Vue 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 - Vue integration/setup: [references/vue-integration.md](references/vue-integration.md)31 - CRUD, state, and persistence: [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/vue/ as fallback.5354## Consult MCP First For5556Consult DHTMLX MCP before using or changing:57- template callbacks you have not already verified58- helper factories such as `defineGanttConfig`, `defineGanttTemplates`, `defineGanttEvents`, or `defineInlineEditors`59- composables such as `useWorkTime`, `useGanttDatastore`, `useResourceAssignments`, `useGanttActions`, or `useGanttEvent`60- advanced props such as `batchSave`, `inlineEditors`, `modals`, `customLightbox`, `groupTasks`, or `events`61- theme names beyond the known project usage62- resource panel, calendars, or advanced layout details63- resource timeline templates and cell rendering callbacks64- workload cell templates and overload threshold logic6566## Hard Rules6768- The Gantt container must have explicit height.69- Use the app theme as the single source of truth.70- Prefer CSS variables and documented templates before selector-heavy overrides.71- Normalize date values before persistence.72- Build backend payloads explicitly from normalized task/link models.73- Do not use undocumented internals when a documented prop, composable, event map, `@ready`, or ref API exists.74- Do not mix Vue-managed props and imperative instance mutations unless synchronization is intentional.7576## Quick Checklist7778- [ ] Correct package identified79- [ ] Matching CSS import used80- [ ] Explicit height provided81- [ ] Data ownership model chosen82- [ ] Dates normalized before persistence83- [ ] Advanced APIs verified with MCP
DHTMLX