Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

threejs — Claude Code skill: what it does, how to install

Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill threejs -a claude-code
Open on GitHub

What threejs does

The skill provides the agent with workflow guidance for Three.js. It covers scene setup, lighting, materials, user interaction controls, and WebGL post-processing shaders.

This entry lives inside OpenDesign under the 3d-shaders category. The agent triggers it during task planning when you mention phrases like webgl scene, 3d interactive, or three.js.

Because this catalog entry acts as a prototype declaration, complete helper scripts and assets require the upstream repository CloudAI-X/threejs-skills. Keep this dependency in mind when generating complex 3D scenes.

What it helps with

  • build an interactive 3D browser scene using Three.js
  • configure WebGL post-processing and shader effects
  • attach interactive camera controls to a Three.js canvas
  • set up mesh materials and lighting in the browser

Example prompts for the agent

  • threejs: set up an interactive cube scene with basic lighting
  • Build a webgl scene using Three.js with OrbitControls
  • Add bloom post-processing to the existing Three.js renderer

How to install threejs

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill threejs -a claude-code

2Manually: put the files in place

~/.claude/skills/threejs/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/threejs/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Similar

adev-writing-guide angular Guidelines for writing Angular documentation in adev/src/content. It enforces Google Technical Writing standards, Angular markdown extensions, and custom code components. Claude Code CX Codex Cursor +1 912installs typescript-write metabase Skill for writing and editing TypeScript and JavaScript code to Metabase standards. Enforces strict typing without any and requires type checking before completion. Claude Code CX Codex Cursor +1 2,100installs web-component-design Seth Hobson This skill helps design reusable components for React, Vue, and Svelte. Use it for UI libraries, design systems, or legacy component refactors. Claude Code CX Codex Cursor 13,167installs improve-ui ibelick Audits an interface against its own design system, finds proven inconsistencies, and writes fix plans for another agent without touching source. Claude Code CX Codex Cursor +1 7,800installs expo-ui expo A skill for building interfaces that compile to real native code: SwiftUI on iOS, Jetpack Compose on Android. Helps the agent use the right component instead of reaching for Reanimated or heavy community libraries. Claude Code CX Codex Cursor +1 31,600installs premium-frontend-ui official Utkarsh Patrikar Guides GitHub Copilot when building animated web interfaces. Use it for a visually distinctive landing page or interactive portfolio. GitHub Copilot 4,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about threejs

How to install threejs in Claude Code?

Run npx skills add nexu-io/open-design --skill threejs -a claude-code in your terminal.

What does the threejs skill do?

It guides AI agents through structuring Three.js code, including 3D elements, material configuration, controls, and post-processing passes.

Where are the original scripts and assets stored?

The skill is curated from CloudAI-X/threejs-skills. Running the full upstream workflow requires referencing that upstream repository bundle.

Source text

SKILL.md · Apache-2.0 
---
name: threejs
description: |
  Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
triggers:
  - "threejs"
  - "three.js"
  - "3d web"
  - "webgl scene"
  - "3d interactive"
od:
  mode: prototype
  category: 3d-shaders
  upstream: "https://github.com/CloudAI-X/threejs-skills"
---

# threejs

> Curated from CloudAI-X.

## What it does

Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.

## Source

- Upstream: https://github.com/CloudAI-X/threejs-skills
- Category: `3d-shaders`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/CloudAI-X/threejs-skills
```

Then ask the agent to invoke this skill by name (`threejs`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor