How to use the Three.js Landscape Backdrop agent skill

What the skill makes the agent do

Once installed, the agent follows the skill's guidance when you ask for an outdoor 3D environment in Three.js. The skill covers building terrain on a polar grid centred under the camera, so resolution is spent where the viewer looks. It layers noise and warps the sample position to make hills look eroded rather than crumpled, colours the ground by slope and moisture instead of a tiled texture, and draws grass as instanced GPU geometry whose wind is computed in the vertex shader.

The skill also describes scattered stones, a six-stop gradient sky dome, a star field confined to the part of the sky the camera can actually reach, and a time-of-day system that cross-fades between states instead of cutting. The agent then writes this code for your web page rather than giving generic advice.

Install the skill (ZIP download or Claude apps upload)

Download the ZIP of the threejs-landscape skill from this page and unzip it. For a personal setup, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills. The skill package includes SKILL.md, which holds the guidance, plus a demo folder with an index.html reference and a PROMPT.md file of example prompts, and agents/openai.yaml.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need special syntax. Describe the scene you want and what it has to sit behind. The demo prompts in the package name the skill directly with $threejs-landscape, which is a clear way to make sure it is used. Mention Three.js explicitly so the agent does not reach for another library.

Be specific about the feel: whether there is grass, stones, a sky, stars, and whether you want a time-of-day control. Say where the subject will sit in the frame.

• Use $threejs-landscape to put this scene in a real place: a noise heightfield, instanced grass, a gradient sky, and morning/noon/sunset/night that cross-fade.
• Build a Three.js hero background of a grass plain with soft hills on the horizon, behind a product in the centre of the page.
• Create a single standalone HTML page in Three.js with a landscape, a star field at night and drag-to-orbit controls.

Example: what a good result looks like

The demo prompt asks for a single standalone HTML document with a grass plain running to soft landforms on the horizon, a six-stop sky, drag to orbit, wheel or pinch to zoom, four times of day that cross-fade, stars at night, and a grid toggle that reveals the polar heightfield underneath. Use that list as a model for your own request and remove anything you do not need, since every extra feature adds work and weight to the page.

• Terrain sampled on a polar grid centred under the camera
• Grass that stays dense wherever the camera looks
• Stars appearing only at night
• A grid toggle to show the heightfield structure

What you need before you start

The skill's output is JavaScript for a browser. You need the Three.js library, a web page or bundler setup able to run Three.js code, and a browser with WebGL support. The skill is a guide for the agent, not a finished app, so someone comfortable running a web page still has to place the generated code into a project and check it on screen.

The skill does not run scripts and does not use the network, according to its listing. Treat generated code like any other code you add to a site and review it before deploying.

• Three.js library
• A web page or bundler that can run Three.js
• A browser with WebGL support

Safety notes: scripts and network

The skill package is listed as not running scripts and not using the network. Its files are a markdown guide, a demo HTML page, a prompt file and an agents configuration file. The code it helps produce runs in the visitor's browser, so review it as you would any front-end code, especially if you change it to load external assets.

• Runs scripts: no
• Uses network: no
• Review generated front-end code before publishing

Tips for better results

Keep the subject in the foreground and let the landscape stay quiet. The skill's own advice is that the backdrop has one job: making the subject look like it is somewhere. Start with a small number of features, then add weather or extra time-of-day states later.

Watch performance. Thousands of grass blades and stars can be heavy on low-powered devices, so ask the agent to tune counts for your target. Check the terrain winding by orbiting below the horizon once, as the skill recommends, and keep the ground height function shared by grass and stones so they do not float or sink.

• Keep the subject as the focus and the landscape quiet
• Add features in stages and check each one
• Tune grass and star counts for slower devices
• Orbit below the horizon once to check the ground winding