About threejs-html
A skill for integrating Three.js into web frameworks, aimed at developers building 3D interfaces. It emphasizes lifecycle safety, accessible HTML alongside canvas content, and validation across layout and navigation states.
Key features
- 01Respect framework client/server boundaries
- 02Reserve and observe canvas layout
- 03Keep controls and content in HTML
- 04Handle pointer routing and scene labels
- 05Test cleanup and failure states
Use cases
- 01Adding a Three.js canvas to a framework page
- 02Displaying 3D product thumbnails
- 03Preventing overlays from blocking page interaction
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/threejs-htmlin Claude Code to confirm it loaded.
Details
From the project READMEWeb and Framework Integration
Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.
Inspect the framework's client/server boundary, routing lifecycle, stacking contexts, and layout before inserting a canvas. Create the renderer only in a browser lifecycle. Do not access window or WebGL at server module evaluation time.
Reserve a stable canvas area in CSS and observe its container. Keep semantic headings, controls, forms, and searchable product information in HTML. Use the existing design system for loading, error, and fallback states. Lazy-load heavy 3D code when it is not needed for the initial view.
Define pointer routing explicitly between overlays and the scene. Avoid a full-page invisible canvas intercepting links or touch scrolling. For scene-anchored labels, project world positions and handle behind-camera, occlusion, viewport clipping, and readable placement.
For multiple product thumbnails, consider one shared renderer with scoped viewports or static previews instead of a context per card. Scissor rectangles and event coordinates must use the same view bounds. Pause or invalidate offscreen content according to actual motion requirements.
Keep route cleanup safe during async loading and development remounts. Verify page scrolling, browser zoom, nested scroll containers, layout shifts, navigation away and back, reduced motion, and content availability when rendering fails.
API reference
Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.