Claude Code Plugins

Community-maintained marketplace

Feedback

vue-threejs-skilltree

@Cloudhabil/AGI-Server
0
0

Build Vue 3 components that render a 3D skill tree using Three.js and OrbitControls. Use when asked to visualize skills as an interactive 3D constellation or to turn skills/INDEX.json into a Vue scene.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name vue-threejs-skilltree
description Build Vue 3 components that render a 3D skill tree using Three.js and OrbitControls. Use when asked to visualize skills as an interactive 3D constellation or to turn skills/INDEX.json into a Vue scene.

Vue Three.js Skilltree

Build a Vue 3 single-file component that renders a 3D skill tree.

Workflow

  1. Load skills/INDEX.json and sanitize names/descriptions for display.
  2. Map skills into a radial or spherical layout.
  3. Render nodes and labels in a Three.js scene with OrbitControls.
  4. Add hover or click interactions for humanized descriptions.
  5. Keep the camera and renderer responsive to resize.

Scripts

  • Run: python skills/interface/vue-threejs-skilltree/scripts/generate_component.py --output runs/SkillTree3D.vue

References

  • references/scene_defaults.json