threejs-skills

Q: How do I install threejs-skills?

Run npx skills add https://github.com/sickn33/agentic-awesome-skills --skill threejs-skills in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-skills/ (personal) or .claude/skills/threejs-skills/ (project).

by sickn33Media & Creative

Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.

Installs: 783
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/sickn33/agentic-awesome-skills --skill threejs-skills

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-skills automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Three.js Skills

Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use

Requests 3D visualizations or graphics ("create a 3D model", "show in 3D")
Wants interactive 3D experiences ("rotating cube", "explorable scene")
Needs WebGL or canvas-based rendering
Asks for animations, particles, or visual effects
Mentions Three.js, WebGL, or 3D rendering
Wants to visualize data in 3D space

Example Workflow

User: "Create an interactive 3D sphere that responds to mouse movement"

Setup: Import Three.js, create scene/camera/renderer
Geometry: Create SphereGeometry(1, 32, 32) for smooth sphere
Material: Use MeshStandardMaterial for realistic look
Lighting: Add ambient + directional lights
Interaction: Track mouse position, update camera
Animation: Rotate sphere, render continuously
Responsive: Add window resize handler
Result: Smooth, interactive 3D sphere ✓

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

FAQ

What does the threejs-skills skill do?

Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.

How do I install threejs-skills?

Run npx skills add https://github.com/sickn33/agentic-awesome-skills --skill threejs-skills in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-skills/ (personal) or .claude/skills/threejs-skills/ (project).

Which AI agents can use threejs-skills?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-skills safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-skills?

It is published by sickn33 in sickn33/agentic-awesome-skills. It has 783 recorded installs.