ApexTree Skill

AI models routinely get tree-chart code wrong: passing data to the constructor, missing children: [] on leaves, treating enableSelection as a boolean, or hand-rolling org-card markup when the built-in template covers it.

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

→ GitHub: apexcharts/apextree-skill

Install

Claude Code

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

Cursor / Windsurf

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

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I build an org chart?

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

npm install apextree-skill

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

const skill = await readFile(skillFile, 'utf8');
const api   = await readFile(referencePath('graph-api.md'), 'utf8');

What the skill covers

  • NestedNode data shape — id / name / children rules, recursive children, per-node options
  • Org-card mode — contentKey: 'data' and the built-in avatar / title / badge template
  • Custom nodeTemplate — receiving the value at contentKey
  • Lifecycle — setLicense(), construct, render(), the returned Graph, destroy()
  • Graph API — collapse/expand, layout direction, search, breadcrumb, selection, exporting
  • Framework wrappers — react-apextree, vue-apextree, ngx-apextree

Repository structure

├── SKILL.md                         # Main entry point
├── .cursorrules                     # Self-contained Cursor / Windsurf version
├── references/
│   ├── data-format.md               # NestedNode, org-card, nodeTemplate
│   ├── graph-api.md                 # collapse/expand, search, selection, layout
│   └── framework-wrappers.md        # React, Vue, Angular
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

Repository

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

See also: ApexCharts Skill for the core charting library.