A Claude Code and Codex skill that turns "explain X in 3D" into one HTML study page: chapters scroll on the left, a three.js model switches scene on the right, and a button in each chapter plays out what happens, such as code hitting a sandbox wall.
In short: A Claude Code and Codex skill that turns "explain X in 3D" into one HTML study page: chapters scroll on the left, a three.js model switches scene on the right, and a button in each chapter plays out what happens, such as code hitting a sandbox wall. It is a free skill for people who use Claude Code or Codex and want help with motion graphics.
Checked on · Added
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| GitHub repo | Open source · ★ 2 | codekongdev/plz |
Image: @codekongdev on X, shown with credit.
Real videos made with this skill, credited to their creators. Hover to preview.
EXPLAINER0:19The author's 19-second scroll through a page the skill made: chapter text on the left, a three.js model on the right that switches from a single process to containers A, B and C on a shared host kernel, with the agent's code shown as a red block trying to escape.
npx skills add codekongdev/plz --skill plz-3d-explain -a claude-code -g npx skills add codekongdev/plz --skill plz-3d-explain -a codex -g
Install command copied from the project README. Check the README for the latest version.
A Claude Code and Codex skill that turns "explain X in 3D" into one HTML study page: chapters scroll on the left, a three.js model switches scene on the right, and a button in each chapter plays out what happens, such as code hitting a sandbox wall.
plz-3d-explain turns a request like 'explain how an AI agent code sandbox works in 3D' into a single HTML study page. Text chapters scroll on the left while a three.js model on the right switches scene for each chapter,…
Short excerpt from the README of codekongdev/plz. Read the full README on GitHub.
Written by us so you can reuse it. Replace each [bracket] with your details.
The skill checks its sources, but a 3D model can still simplify things: read the text before you share the page. The page needs internet to load three.js. The repo is brand new with few stars.
A Claude Code and Codex skill that turns "explain X in 3D" into one HTML study page: chapters scroll on the left, a three.js model switches scene on the right, and a button in each chapter plays out what happens, such as code hitting a sandbox wall.
It works with Claude Code and Codex. The code is on GitHub at codekongdev/plz.
Free & open source (MIT). No account or API key. Installing needs Node.js 22.20+ and Git; making a page needs Python 3 for a local server and a browser tool such as Playwright; the finished page loads three.js and fonts from a CDN.
Run the install command from the README: “npx skills add codekongdev/plz --skill plz-3d-explain -a claude-code -g”. Check the README on GitHub for the latest version, then follow the steps on this page.
We read 33 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine. How to check a skill before you install it →
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
SKILLA design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds.
Claude Code +2★ 634
SKILLA Claude Code skill that answers "how does this work?" by building the machine as one offline 3D page: it runs in the middle, panels read its live numbers, buttons open the part doing the work, and one click blows it apart. It can also record a short tour video of it.
Claude Code★ 1.1k
SKILLA clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.
Claude Code +1★ 849
SKILLA free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.
Claude Code★ 147
SKILL0:56Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILLA Claude Code skill that builds tilt-shift ASCII miniatures: a small Three.js world whose every pixel is redrawn as a coloured text character, with grass that sways, foamy water and a slow camera sweep, running live and looping in the browser.
Claude Code★ 89Free newsletter
New AI tools you can use right away, in plain words. Every Friday.