Diorama

Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.

196 stars 15 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add sloemo01/diorama --skill diorama

Manual install

git clone --depth 1 https://github.com/sloemo01/diorama.git /tmp/diorama
mkdir -p ~/.claude/skills
cp -r /tmp/diorama/. ~/.claude/skills/diorama

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Diorama

A diorama is a tiny staged scene on a slab: a locked three-quarter camera, a
flat cut-out against white, a palette-snapped pixel grid with an ink contour, and
toy-scale people with real joint animation. Any subject works (pool, market,
kitchen, bank job, launch pad, aquarium). The slab and the cast stay; the props
change.

**This file is the whole guide.** It carries no external reference documents:
everything needed to build a diorama is here, plus copy-in modules and a design
sheet template in `templates/`.

Read `Research Before You Model`, `One Prompt, One Build`, `The Look Contract`,
`The Detail Bar`, `The Animation Bar` and `Pipeline` first. Then read the sections for the systems
you are actually building; the rest is reference. Do not spend the first pass
reading every vehicle or water note for a kitchen scene.

### Fast path by scene

| If the commission is... | Read next, in this order |
| --- | --- |
| market, food truck, bakery, cafe, shop, laundromat | Cast → Clothed Cast: Heads, Layers, Hands → Service And Queue → Machine Grammar → Carrying, Loading And Mounting → Verification |
| heist, defence, combat | Detail Bar → Tool/Tower recipes → System And Combat Animation → Combat Readability → Verification |
| creature battle, game scene, anime/movie fight | Research Before You Model → Field Notes: Two-Creature Combat → Creature Anatomy → System And Combat Animation → Combat Readability → Verification |

Read the full skill on GitHub

Details

Skill name: diorama
Repository: sloemo01/diorama
License: MIT
Repo updated: 30 October 2026

FAQ

What does the Diorama skill do?

Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.

How do I install the Diorama skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add sloemo01/diorama --skill diorama. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Diorama popular?

It lives in sloemo01/diorama, which has 196 GitHub stars and 15 forks.

Related skills

Code Brand Film

181

nutllwhy/code-brand-film

Produce a short brand film or product promo (10-60s, typically 15s) entirely as code: one static HTML page with a paused GSAP timeline that a renderer seeks frame by frame, plus a music score synthesized in Python. Use when the user wants a 品牌宣传片, 广告片, 宣传动画, 产品短片, 发布会开场视频, brand film, promo video, product teaser, logo animation, or a generated ad spot — especially when they ask for 高级感 / 艺术感 / 电影感 / 别像模板, or when an existing video "looks like AI made it" or "too simple" and needs to be redone properly. Also use when a film already exists and needs a score, a soundtrack, background music, or 配乐

Frontend & Design23

Apple Hig Designer

212

axiaoge2/Apple-Hig-Designer

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

Frontend & Design23

Blcaptain Style Skill

178

dososo/blcaptain-style-skill

当用户需要把内容（文章、笔记、截图、数据、产品说明）做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言（静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥），由 Claude 读懂内容、自己撰写 brief.json，交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。

Frontend & Design16

2dimg2motion

239

WU-HAOTIAN34/2dimg2motion

Use when a user provides one baseline image and requests game animation frames, sprite sequences, attack/walk/idle/hit/death/casting motion, transparent PNG frames, a spritesheet, keyframe prompts, or consistent whole-character pose animation.

Frontend & Design11

Frontend Design

154

Ilm-Alan/frontend-design

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

Frontend & Design23

Claude Design

213

jiji262/claude-design-skill

Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protoco

Frontend & Design33

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.