ApexTree AI Skill

AI coding skill for building ApexTree organizational / hierarchical SVG tree charts. Works with Claude Code, Cursor, GitHub Copilot, and any AI coding assistant.

What This Does

AI models routinely get tree-chart code wrong: passing data to the constructor, missing children: [] on leaves, treating enableSelection as a boolean, hand-rolling org-card markup when the built-in template covers it. This skill ships structured reference files so the assistant generates correct ApexTree code on the first try.

Coverage

• 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

Installation

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 SKILL.md in Copilot Chat: @workspace #file:SKILL.md, or paste the contents of .cursorrules into Copilot's custom instructions.

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');

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

Links

• ApexTree Documentation
• ApexTree GitHub
• npm: apextree
• react-apextree
• vue-apextree
• ngx-apextree

License

MIT