Realtime Graphics Prompts

A research archive and toolkit for AI-built realtime graphics: viral browser games and simulations (Three.js / WebGPU / Babylon), the prompts that produced them, the GPU techniques they rely on, and an installable agent skill that turns those lessons into a new one-shot prompt.

This is not a game engine. It is:

1. Prompt archive — original (or reconstructed) prompts + metadata for demos that look and feel high quality
2. Technique curriculum — interactive WebGL teaching demos for the systems those prompts force models to build
3. Agent skill — realtime-graphics-prompt, installable via npx skills

---

Live site (GitHub Pages)

https://archastro.github.io/realtime-graphics/

Repo	Private — ArchAstro/realtime-graphics
Site	Public URL (access-controlled private Pages needs Enterprise)
CI	.github/workflows/pages.yml

What CI does on every push / PR:

1. python3 scripts/build-pages.py — rebuild prompt HTML + rewrite paths for base /realtime-graphics
2. Smoke-check that key pages exist and absolute URLs were rewritten
3. On main only: upload artifact and deploy to GitHub Pages

Manual redeploy: Actions → pages → Run workflow.

Quick start (local)

# Browse the archive in your browser (builds prompt HTML pages, then serves)
npm run dev

Opens http://127.0.0.1:8000/ by default.

npm run dev -- 3000       # custom port
npm run dev -- --no-open  # serve without opening a browser
npm run build             # only regenerate prompts/*/index.html from markdown
npm run build:pages       # build .pages-dist/ with GH Pages base path

Requires Python 3 (for the static server and HTML rebuild). No npm install of app dependencies is required for the site.

---

What’s in here

1. Prompt archive (prompts/)

Twelve high-signal demos scraped from Reddit / X, each with:

File	Purpose
meta.md	Why it made the cut, author, stack, demo/repo links
prompt.md (or prompt-*.md)	The actual prompt text when published
notes.md	Process notes / reconstruction when the original prompt was lost
index.html	Generated readable page (hero, facts, prompt panel, related techniques)

Browse at /prompts/ after npm run dev.

Examples:

#	Demo	Why it matters
01	SNOWFLOW	Full WebGPU snow/waterbending brief (~19k chars)
02	Desert explorer	Clipmap dunes + sand spells; process notes
03	Claude of Duty	Adversarial AAA critic loop → ~55k LOC FPS
04	The Long Silence	Space game + Starfield judge /goal
05	SOLEBOUND	Short max-effort → full shoe-repair game
06	SDF blend-shell creatures	Novel seamless procedural characters
07–12	City, COD zombies, crane, canal locks, grass, mansion	One-shots and bake-offs

Each folder’s meta.md cites original posts and licenses of those projects.

2. Techniques (techniques/)

GPU / rendering ideas reverse-engineered from the archive, with live demos:

#	Technique	Demo
01	Geometry clipmap	demos/01-geometry-clipmap.html
02	Layered wind-anisotropic noise	demos/02-layered-wind-noise.html
03	Persistent deformation buffer	demos/03-deformation-buffer.html
04	Multi-scale surface shading	demos/04-multi-scale-shading.html
05	Wrapped diffuse + cheap SSS	demos/05-wrap-sss.html
06	SDF blend-shell	demos/06-sdf-blend-shell.html
07	Floating origin	demos/07-floating-origin.html
08	Bake vs evaluate	demos/08-bake-vs-evaluate.html
09	Analytic sky	demos/09-atmosphere-sky.html
10	Post stack + tonemap	demos/10-post-stack.html

• Curriculum hub: /techniques/
• Demo index: /techniques/demos/
• Cross-links: techniques/catalog.json maps techniques ↔ source prompts

Teaching demos are simplified WebGL/Three.js sketches, not production ports of the viral projects.

3. Agent skill (skills/realtime-graphics-prompt/)

Installable with the skills CLI. When you run /realtime-graphics-prompt (or ask for a one-shot game prompt), the agent:

1. Loads the distilled playbook (skills/.../references/playbook.md)
2. Optionally skims this archive if you’re in the repo
3. Emits a copy-paste implementation brief (SNOWFLOW-style systems + CoD-style critic + FPS/perf rules)

Install the skill

From this checkout:

# See what this package ships
npx skills add . --list
# or
npm run skills:list

# Install into agents for the current project
npx skills add . --skill realtime-graphics-prompt -y
# or
npm run skills:install

# Install for your user (all projects)
npx skills add . --skill realtime-graphics-prompt -g -y
# or
npm run skills:install:global

From GitHub:

npx skills add ArchAstro/realtime-graphics --skill realtime-graphics-prompt -y
npx skills add ArchAstro/realtime-graphics --skill realtime-graphics-prompt -g -y

This is the beginning of the README. Read the rest at the original. Read the full README ↗