Designing the skill-tree curriculum map

A flat list of lessons tells you what exists. It does not tell you what unlocks what, or how far you are from a meaningful milestone. We wanted the curriculum to look like what it actually is: a dependency graph.

Why D3, and only for this

Recharts handles every standard chart type with a clear axis and legend. The skill tree is not a chart — it is a custom interactive diagram with no Recharts primitive that fits. Using D3 here, and nowhere else, keeps our dependency surface intentional rather than sprawling.

Locked nodes render at 50% opacity. Completed nodes get the XP-gem checkmark treatment instead of a generic checkmark, because completing a lesson is a reward moment, not a checkbox.