hexianWebCommunity·12 Agent Skills Included

Third-Person-MC

Build Three.js voxel games with Vue UI integration

Guides development of browser-based 3D voxel games using Three.js, Vue 3, and Pinia. Covers camera rigs, raycasting, shaders, input handling, state sync, and performance optimization for block-style worlds. Eliminates memory leaks, layer-coupling bugs, and rendering slowdowns through enforced lifecycle and disposal patterns.

175|39

↗

npx skills add hexianWeb/Third-Person-MC --all -g -y

Available:

Gives your AI agent the project's build commands, architecture patterns, and coding rules so it writes Three.js and Vue code that matches this game's structure.

All Skills in This Repository (12)

Pure Emerald Level Indicators

📦 In Repo

hexianWeb

vtj-component-model

Create singleton-based 3D components with lifecycle methods for Vue 3 Three.js scenes.

vtj-ui-integration

Integrate Vue UI with Three.js scenes via event-driven communication.

vtj-resource-management

Centralizes 3D resource management for models, textures, and fonts via sources.js and core-ready access.

vtj-shader-development

Integrates and debugs GLSL shaders in Three.js and Vue 3 projects.

vtj-raycasting-system

Implement mouse-based raycasting for voxel selection and block interaction in Three.js scenes.

vtj-state-management

Synchronize Vue UI and Three.js state with Pinia and mitt.

vtj-scene-management

Orchestrate initialization, updates, and disposal for Three.js world components.

vtj-anti-patterns

Prevent common mistakes and prohibited practices in vite-threejs projects.

vtj-performance

Optimize voxel-based Three.js scenes with InstancedMesh, occlusion culling, and shared geometry.

vtj-camera-system

Configure a Three.js third-person camera rig with collision avoidance.

vtj-input-system

Manage mouse, keyboard, and touch inputs for raycasting and camera control in 3D web apps.

vtj-debug-panel

Create Tweakpane-based debug panels for Three.js and Vue 3 3D components.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install Third-Person-MC skills?▼

Run `npx skills add hexianWeb/Third-Person-MC --all -g -y` in your terminal to install all skills globally.

What do these Three.js skills cover?▼

They cover camera systems, raycasting, shader development, input handling, resource loading, state management, debug panels, and performance optimization for voxel-style 3D web games.

How do Vue and Three.js communicate in this project?▼

The skills enforce strict layer separation: Pinia stores hold shared state and the mitt event bus passes one-time events between the Vue UI layer and the Three.js scene.

Do these skills work with Cursor and Claude Code?▼

Yes. All skills follow the standard SKILL.md format and load automatically in Cursor, Claude Code, and other compatible coding environments.

How do these skills prevent memory leaks in Three.js?▼

They require every component to implement a destroy() method that disposes geometries, materials, and event listeners in the correct reverse order.