Explore / Visual skills
WEB OUTPUT
Loading the live demo…
The live sample runs in a sandboxed frame. It uses a fictional brief; the package teaches your agent to build one from yours.Open full screen
WHAT IT MAKES

A page section your visitors will remember.

A starting engine for round-based survival games, sampled as Brindlefen Holdout, an original night in a lamphouse on a fen. Foes rise from the reeds, walk a distance field to a window, tear its planks off one by one and climb through; you hold them off and hammer the boards back for points. Rounds grow in count, speed and health from a few numbers, every fifth one is a swarm, and four foe behaviours cover the genre: a walker, a sprinter, a brute that smashes two planks a blow and crashes through, and a lobber that arcs soot over the wall and must be shot through a window. Between rounds a vending terminal sells upgrades from a table of prices and effects.

The co-op partner is an AI ally on the same body as the player. Ten times a second it picks a task (revive you, board up the emptiest window, guard the window under most pressure), scores seventeen moves against the foes inside, soot about to land and your space, turns its aim at a set rate and calls out breaches, new threats and reloads. The simulation is a DOM-free fixed-step module, so a seeded run replays exactly and the same brain plays the attract mode. A high angled camera reads on phones and desktops; keyboard and mouse, or a touch stick with auto-aim. Rounds, foes, wares and the ally's lines are data tables in one config file.

Good fit

  • Prototyping round-based survival and horde games with co-op AI
  • Game jams that need waves, barricades, upgrades and an ally on day one
  • Campaign and event pages that want a minute of real play
  • Teaching distance fields, utility AI and data-driven difficulty curves

Not for

  • Online multiplayer or saved progress: runs live in memory
  • Large open maps: the engine is one outpost and the fen around it
  • Pages where motion would compete with a task
THE PLAYBOOK

How your agent works through it.

  1. 01
    Name the world

    Write the setting, foe names, the terminal and the ally's lines into config.js. Keep the four behaviours; rename and redraw them for the new world in models.js.

  2. 02
    Lay out the outpost

    Set the room size, windows, props and lamps. Every window needs a clear approach outside and a clear spot inside; the grid and fields are rebuilt from the table.

  3. 03
    Tune rounds and the economy

    Shape the round curve and the wares' prices. Run the headless pilot for ten minutes on a few seeds and read rounds reached, downs and points before touching feel.

  4. 04
    Tune the ally

    Adjust keep-away distance, aim turn rate, tolerance and callout gap until the ally helps without carrying the game. Watch it revive you under pressure.

  5. 05
    Pick the opening and verify

    Script the attract opening (a breach in view), set the poster time, then test keys, mouse, touch stick, pause, reduced motion, 390 px and 1440 px, and a clean console.

WHAT YOU KEEP

Deliverables, not just a conversation.

index.html with the stage, HUD (round, foes left, points, health, ammo, ally status), round banner, callouts, terminal menu, pause, run summary and data tables
config.js holding copy, the outpost layout, rounds, foes, weapon, wares, ally numbers, callouts and palette
world.js, sim.js and brain.js: the grid and distance fields, the fixed-step simulation and the survivor AI (all DOM-free)
scene.js and models.js: the three.js view, procedural rigs that crumble into parts, tracers, flying planks and soot
main.js and audio.js: input with touch auto-aim, HUD, clock, capture hook and muted-by-default synthesised sound
A poster of the seeded attract run exported with the capture helper

Your agent will ask for

  • The game's world and name: setting, the place being held, palette and tone
  • The roster: which of the four foe behaviours to keep, their names, looks and numbers
  • The round curve: foes per round, how many at once, speed and health growth, special rounds
  • The economy: points per hit, kill and plank, and the terminal's wares, prices and effects
  • The ally: name, how close it fights, how fast it aims, and the lines it calls out
  • Target devices and inputs, and where it runs: campaign page, jam entry or team prototype
Inspect package contents16 files
  • SKILL.md
  • README.md
  • LICENSE.txt
  • template/wave-survival-arena/audio.js
  • template/wave-survival-arena/brain.js
  • template/wave-survival-arena/config.js
  • template/wave-survival-arena/index.html
  • template/wave-survival-arena/main.js
  • template/wave-survival-arena/models.js
  • template/wave-survival-arena/scene.js
  • template/wave-survival-arena/sim.js
  • template/wave-survival-arena/style.css
  • template/wave-survival-arena/world.js
  • template/_shared/stage.js
  • scripts/capture.mjs
  • template/_shared/icon.svg
BEFORE YOU RUN IT

Runtime & requirements

three.js · WebGL · Canvas · Web Audio
  • A browser with WebGL, Pointer Events and ES modules
  • three.js 0.186.1 served locally through the import map
  • Optional: Node.js 22+ to run the simulation and pilot headless
  • Optional: Node.js 22+ and Playwright for poster export

The sample uses a fictional brief. Brand names, copy and figures in the demo are placeholders your agent replaces with yours; the skill tells it never to invent claims or numbers.

USE IT IN YOUR PROJECT

Choose your agent.

Preserve the complete folder. Check runtime dependencies and review scripts before execution.

Native SKILL.mdOfficial docs reviewed · 2026-10-02
SKILL DIRECTORY
.claude/skills/wave-survival-arena/

Review the package, then place the complete skill folder here. Keep SKILL.md, scripts, references and assets together.

IN YOUR AGENT/wave-survival-arena
  1. Start a project session and inspect /skills; explicitly invoke /wave-survival-arena.
LOCAL CLI INSTALL
node cli/bin.mjs install wave-survival-arena --agent claude-code --scope project

Use the source-checkout CLI from your target workspace, with an absolute CLI path if needed. Set a trusted origin and signed-in package token. Free packages only; paid installation is unavailable. This CLI is not published to npm.

  • Local personal skills are not automatically present in Cowork or cloud sessions. Use repository skills in cloned cloud workspaces or separately enabled account skills.
  • Portable exports omit Claude-only dynamic shell interpolation and tool pre-approval.
Claude Code documentation
Filesystem install and export checks are separate from agent discovery or execution. Each workflow still needs its listed tools and dependencies. No end-to-end agent run is certified.
START WITH THIS REQUEST

Use the wave-survival-arena skill. Read SKILL.md and the template first. Ask me for the brief inputs it lists, propose the adaptation, build it in my project, then run its quality checklist and tell me anything you could not verify.

Related skills

Coin Scramble Arena: sample outputPRO
Featured
🔒 Model info for members
VISUAL SKILLWeb

Coin Scramble Arena

A three.js arena party game: four bumper balls scramble for raining coins for ninety seconds, bumps spray purses across the floor, and personality bots stand in for players.

three.jsWebGLCanvasWeb Audio
SKILL.md + template + live demoPreview only
Party Course Qualifier: sample outputPRO
🔒 Model info for members
VISUAL SKILLWeb

Party Course Qualifier

A three.js party obstacle race: eight bean racers, three lanes, mallets, wall gaps, sweepers and goo pits. Switch lanes, time jumps, finish top four to qualify.

three.jsWebGLGLSLCSS
SKILL.md + template + live demoPreview only
Telekinesis Corridor: sample outputPRO
🔒 Model info for members
VISUAL SKILLWeb

Telekinesis Corridor

A telekinesis action engine in three.js on its own rigid-body physics: grab, lift and throw cargo, push a shock wave, slow time, and topple, stack or pin machines.

three.jsWebGLCanvasWeb Audio
SKILL.md + template + live demoPreview only
Transforming Mech Arcade: sample outputPRO
🔒 Model info for members
VISUAL SKILLWeb

Transforming Mech Arcade

A three.js arcade game with your own transforming car-mech: leap gaps, fold mid-air into a walking mech to climb and punch through roadworks, fold back and beat a boss machine.

three.jsWebGLGLSLCanvas
SKILL.md + template + live demoPreview only
Amphibious Vehicle Worlds: sample outputPRO
🔒 Model info for members
VISUAL SKILLWeb

Amphibious Vehicle Worlds

A three.js vehicle that drives, flies, sails and dives through one streamed world (desert road, forest valley, open sea, whale reef) with a HUD, minimap and tour.

three.jsWebGLGLSLCanvas
SKILL.md + template + live demoPreview only
Backyard RC Buggy Racer: sample outputPRO
🔒 Model info for members
VISUAL SKILLWeb

Backyard RC Buggy Racer

A three.js racing game shot like macro photography: four 1:10 buggies with working suspension race a dirt track in a back garden at golden hour.

three.jsWebGLGLSLCanvas
SKILL.md + template + live demoPreview only