How do I install the Ether Threejs skill?

Run npx skillmds@latest add jonathanbeck1/ether-threejs in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ether Threejs safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ether Threejs?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ether Threejs free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ether Threejs?

JonathanBeck1 (@jonathanbeck1) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ether Threejs by jonathanbeck1 — Agent Skill

Name: Ether Threejs
Author: JonathanBeck1

Ether Threejs

Premium three.js technique reference for studio-grade WebGL. Use this skill BEFORE writing any three.js code on a premium-tier deliverable. Contains annotated reference work, vetted technique recipes, reusable GLSL shader snippets, performance budgets, and a slop checklist for self-review. Triggers on writing three.js code, building WebGL scenes, designing 3D web experiences, scene architecture, geometry strategy, instancing, camera and render-loop setup, performance budgets, scroll-driven 3D, persistent-canvas routing, premium agency-grade WebGL. Do NOT use for non-3D TypeScript, plain DOM/CSS animation, or review-only passes — use the threejs-audit command to critique existing 3D code. For GLSL, fragment/vertex shaders, ShaderMaterial, the iridescent material, vertex displacement, MSDF/extruded 3D text, or the bloom+dither postprocessing composer, use ether-shaders instead.

JonathanBeck1 5094d53 16 files · 134.9 KB Updated Sep 17, 2026

File contents

ether-threejs

Persistent technique reference and slop-prevention library for premium three.js work. Built for a studio site redesign and reusable across premium projects.

When to use

Invoke this skill before any three.js work on premium-tier deliverables. The skill exists because Claude's default three.js output is generic — torus knots, default materials, no postprocessing — and that output is unacceptable for a studio that sells against AI-generated work.

How to use

Read slop-checklist.md first. If your planned approach trips any checkbox, redesign before coding.
Read references.md to find a studio working in the relevant aesthetic. Open its live site for ground truth.
Read the relevant techniques/ file for a code recipe and required tuning parameters.
Pull GLSL snippets from shaders/ and import them via ?raw (vite-plugin-glsl is configured but unused — every GLSL import in the codebase uses ?raw).
After writing code, re-run the slop checklist. Capture a screenshot. Have the user review before committing the rendered scene.

Index

references.md — annotated list of premium agencies and what each does well
slop-checklist.md — concrete anti-patterns. Run before commit.
performance.md — budgets, profiling techniques, mobile checklist
techniques/ — one file per reusable technique with code recipes
shaders/ — reusable .glsl snippets, imported via ?raw

Maintenance

Add new techniques here as you encounter them in the wild. Re-verify the reference annotations periodically; agency sites change. When you find yourself doing the same shader trick twice, pull it into shaders/ and add a techniques/ file describing when to use it.

---name: ether-threejsdescription: Premium three.js technique reference for studio-grade WebGL. Use this skill BEFORE writing any three.js code on a premium-tier deliverable. Contains annotated reference work, vetted technique recipes, reusable GLSL shader snippets, performance budgets, and a slop checklist for self-review. Triggers on writing three.js code, building WebGL scenes, designing 3D web experiences, scene architecture, geometry strategy, instancing, camera and render-loop setup, performance budgets, scroll-driven 3D, persistent-canvas routing, premium agency-grade WebGL. Do NOT use for non-3D TypeScript, plain DOM/CSS animation, or review-only passes — use the threejs-audit command to critique existing 3D code. For GLSL, fragment/vertex shaders, ShaderMaterial, the iridescent material, vertex displacement, MSDF/extruded 3D text, or the bloom+dither postprocessing composer, use ether-shaders instead.---# ether-threejsPersistent technique reference and slop-prevention library for premium three.js work. Built for a studio site redesign and reusable across premium projects.## When to useInvoke this skill before any three.js work on premium-tier deliverables. The skill exists because Claude's default three.js output is generic — torus knots, default materials, no postprocessing — and that output is unacceptable for a studio that sells against AI-generated work.## How to use1. Read `slop-checklist.md` first. If your planned approach trips any checkbox, redesign before coding.2. Read `references.md` to find a studio working in the relevant aesthetic. Open its live site for ground truth.3. Read the relevant `techniques/` file for a code recipe and required tuning parameters.4. Pull GLSL snippets from `shaders/` and import them via `?raw` (`vite-plugin-glsl` is configured but unused — every GLSL import in the codebase uses `?raw`).5. After writing code, re-run the slop checklist. Capture a screenshot. Have the user review before committing the rendered scene.## Index- **`references.md`** — annotated list of premium agencies and what each does well- **`slop-checklist.md`** — concrete anti-patterns. Run before commit.- **`performance.md`** — budgets, profiling techniques, mobile checklist- **`techniques/`** — one file per reusable technique with code recipes- **`shaders/`** — reusable `.glsl` snippets, imported via `?raw`## MaintenanceAdd new techniques here as you encounter them in the wild. Re-verify the reference annotations periodically; agency sites change. When you find yourself doing the same shader trick twice, pull it into `shaders/` and add a `techniques/` file describing when to use it.

Frequently asked questions