Frontend
notque/vexjoy-agent
Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
Builds a phone-first interactive 3D step-by-step build guide as one self-contained Three.js HTML file, starting from a bundled starter template.
Install 3D Assembly Manual
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SkylarKitchen/skills 3d-assembly-manual --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/3d-assembly-manual .claude/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .claude/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manualType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SkylarKitchen/skills 3d-assembly-manual --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/3d-assembly-manual .agents/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .agents/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SkylarKitchen/skills 3d-assembly-manual --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/3d-assembly-manual .cursor/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .cursor/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/SkylarKitchen/skills.git --path skills/design/3d-assembly-manual--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SkylarKitchen/skills 3d-assembly-manual --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/3d-assembly-manual .gemini/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .gemini/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install SkylarKitchen/skills 3d-assembly-manualInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/3d-assembly-manual .github/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .github/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install SkylarKitchen/skills 3d-assembly-manual --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SkylarKitchen/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/3d-assembly-manual .opencode/skills/3d-assembly-manual && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "3d-assembly-manual" agent skill from https://github.com/SkylarKitchen/skills/tree/main/skills/design/3d-assembly-manual into .opencode/skills/3d-assembly-manual/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "3d-assembly-manual", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
3d-assembly-manual- GitHub stars
- 117
- Token cost
- ~1.6k tokens
- SKILL.md length
- 922 words
- Files
- 3
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- MIT
At a glance
Builds a phone-first interactive 3D step-by-step build guide as one self-contained Three.js HTML file, starting from a bundled starter template.
- Works in 4 steps: Measure or estimate the real space from… → Write STEPS copy: plain instructions,… → Build (the starter has no dark-mode… → …
- Creating a 3D build or assembly guide for a garden bed, shelf or furniture
- SKILL.md covers CONFIG keys (top of the script), Look (BIG evolution diagram), Engine (in starter.html) and Process, plus 2 more sections
- Calls python3
What it does
The skill produces a single self-contained Three.js HTML page that walks through a physical build in numbered 3D steps, in the style of a LEGO manual, laid out for phones. The agent copies starter.html, an engine that already renders a four-step shelf example, and edits only the CONFIG block and the PROJECT SCENE block, leaving the engine alone. It was first proven on a garden bed, then generalised after kitchen and sauna test builds.
CONFIG holds the title, subtitle and date, a localStorage key for remembering the last page, accent and fill colors, the default view, a plan inset, an optional flat figure, camera presets, part names and an inventory. STEPS defines each page, with optional per-step views, wall heights, cutaway fades and an onEnter animation hook. The PROJECT SCENE block holds context geometry, wall helpers, part builders and reg() calls. The look is a white model with ink hairline edges and near-flat light, after a BIG-style evolution diagram.
When your agent uses it
- Creating a 3D build or assembly guide for a garden bed, shelf or furniture
- Turning an install sequence into a step-by-step interactive 3D page
- Making a phone-friendly instruction manual that ships as a single HTML file
Example prompts
- “Make a 3D step-by-step guide for building a raised garden bed.”
- “Create an interactive assembly manual for a four-shelf bookcase that reads well on my phone.”
- “Build a 3D install sequence for mounting a wall-hung kitchen cabinet.”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Measure or estimate the real space from photos (mark "verify"); list parts grouped by where they come from.
- Write STEPS copy: plain instructions, 2-4 numbered acts, quantities in a mono meta line.
- Build (the starter has no dark-mode tokens: it commits to a light drawing sheet on purpose), then verify at 375 px in a browser over a…
- Deliver one .html file: Three.js and fonts load from a CDN, everything else is inline, so it opens by double-click or on any static host…
What it can do on your machine
Read from SKILL.md and the folder at commit fb53232. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
3D Assembly Manual loads about 1.6k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 922 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from SkylarKitchen/skills at commit fb53232, republished under its MIT licence (© SkylarKitchen). 922 words, ~1,640 tokens.
Download SKILL.mdSave it as
.claude/skills/3d-assembly-manual/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- 3d-assembly-manual
- description
- Build a phone-first interactive 3D step-by-step guide (LEGO-manual style, BIG diagram look) as a single self-contained Three.js HTML file. Use when the user asks for a 3D build guide, install sequence, assembly/instruction manual, or "step-by-step 3D" for a physical task (garden, house, furniture, repair).
3D assembly manual
Proven on a garden-bed build, then generalised after kitchen and sauna test builds. Copy starter.html: a project-agnostic engine with a four-step shelf example that renders on its own. Edit only the CONFIG block and the PROJECT SCENE block; leave the engine alone.
CONFIG keys (top of the script)
| Key | What |
|---|---|
title, subtitle, date | Header text; date prefixes the page counter. |
storageKey | localStorage key for the last page; unique per manual. |
accent / fill | Dark accent (arrows, plan frame, outline flash, CSS --accent) and pale part fill (this step's parts, thumbnails). |
view | Default view direction vector. |
plan | Plan inset {c:[x,z], r}; null derives it from the scene's Box3 (shadow camera always does). |
figure | Off (null) by default; opt in only when asked, with [x, z, rotY?]: a flat cut-out that faces the view unless rotY is given. Frame the overview preset to take in its raised hand, 7.4 ft up. |
CAM | Presets {c, r, v?, walls?, cut?}. |
NAMES, INVENTORY | Part labels keyed like P; inventory groups [[group, [[part, qty]]]]. |
STEPS | Pages. Besides the copy keys (title text acts meta time tip parts dims notes inventory calendar): detail {p, r, hide?:[regKeys], view?} (the bubble's own pass: hide parts in front, look from another direction), view (direction), walls {h, sides?} (walls on those sides drop to h ft; omit sides = all), cut:[regKeys] (fade to 0.12 for a cutaway), onEnter(t) (special animation; t has lastLand, objs, tween, ease, easeIO, setOpacity, setColor, paint, T, still; return a new end time to delay marks). Step keys override the preset. |
PROJECT SCENE block: context geometry (auto-painted white), wall(side, x0, x1, y0, y1, z0, z1) for rooms, P.* part builders, optional THUMB_ONLY[key] builders (a thicker thumbnail-only variant for thin parts: bands, wires), reg() calls. Groups passed to reg() are re-centred automatically, so parts can be built in absolute coordinates.
Look (BIG evolution diagram)
- White model, ink hairline edges (EdgesGeometry, opacity ~0.72), near-flat light: HemisphereLight 0.9 + sun 0.16, one pale PCFSoft shadow. Toon gradient bands 226/241/255.
- Already-built parts near-white (#ececec). Only this step's new or removed parts in the pale
fill; arrows in the darkaccent. Parts page shows the whole kit in fill. The starter default is the blue pair #1F4FD8 / #A6C0F6; one orange (#f28c1e) for both also works. - No people in the scene by default: every figure tried so far (cylinder people, then a flat Modulor cut-out) read as weird. Scale comes from the dimension lines and the live scale bar.
modulorFigure()stays in the starter only for an explicit request. Chrome neutral: white paper, ink buttons, grey rules, Geist + Geist Mono, sentence case, square corners. Colour lives only in the picture.
Engine (in starter.html)
reg(key, obj, {add, remove, only:[pages], from, lag, each, span, part, grow, noGhost, noArrow}); a page's scene is the cumulative state;onlyparts fade when their page turns.- Orthographic camera; preset
{c, r, v}tweened 900 ms ease-in-out, walls and cutaways tweened with it. Every tween's clock starts on its first rendered frame, so a slow first frame can't eat the opening motion. Landings 700 ms ease-out along an arrow, ghost outline at destination, accelerating staggerspan*sqrt(i/(n-1)). - Per step: parts callout with 3D thumbnails (second renderer, toDataURL; below 760 px one scrolling row of 32 px thumbs, ellipsised names, right-edge fade when it overflows), numbered action marks with screen offsets (clamped below the callout; the leader is redrawn from the clamped position to its point), detail bubble (scissor pass, circular mask with
overflow:hidden), dimension lines, live scale bar, plan inset, step number, time, one tip. - Tap a part = blink + outline flash. Swipe the sheet (pointer events,
touch-action:pan-y).#stepNdeep-links,#stepN&stillfreezes for captures.
Show full SKILL.md (320 more words)Show less
Process
- Measure or estimate the real space from photos (mark "verify"); list parts grouped by where they come from.
- Write STEPS copy: plain instructions, 2-4 numbered acts, quantities in a mono meta line.
- Build (the starter has no dark-mode tokens: it commits to a light drawing sheet on purpose), then verify at 375 px in a browser over a localhost server (e.g.
python3 -m http.server; keep the viewport meta), and capture with headless Chrome through a 390x844 iframe harness at#stepN&still. - Deliver one
.htmlfile: Three.js and fonts load from a CDN, everything else is inline, so it opens by double-click or on any static host. Until you have a capture from the browser the reader will use, call the render unverified.
Gotchas
- MeshToonMaterial in shadow drops the whole directional term: keep ambient high or orange goes brown.
- Keep pulse base colour under its own userData key (opacity code owns
userData.base). - Emissive glow is invisible on white or accent parts; blink opacity instead.
- Touch-only handlers can't be tested with mouse-driven automation; use pointer events.
- Rooms: work on opposite walls (sink run vs nook) needs two presets with different
v, each cutting the walls between camera and work (learned on a kitchen build). The palefillmatters: a dark part fill hides the ink edges. - Numbers derived from another file (plank rows, rips) : port its calculation functions instead of retyping results.
- Captures: run headless Chrome one at a time, each under
perl -e 'alarm 50; exec @ARGV' <chrome --headless=new --user-data-dir=<scratch>/st-N --disable-gpu --use-angle=swiftshader --enable-unsafe-swiftshader --window-size=520,880 --timeout=15000 --screenshot=...>(macOS has notimeout; it does not exit on its own), thenpkill -f user-data-dir=<scratch>/st-N. Parallel runs give black canvases.
Sources
- Video with no transcript (music-only): read the burned-in captions from frames. Draw the paused video to a canvas at intervals, lay the frames out as a contact sheet on the page, screenshot it. Seeking in a background tab renders black.
© SkylarKitchen, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in skills/design/3d-assembly-manual of SkylarKitchen/skills.
- SKILL.md
- agents/openai.yaml
- starter.html
Open the folder on GitHubat commit fb53232
Compare with similar skills
3D Assembly Manual next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| 3D Assembly Manual this skillSkylarKitchen/skills | 117 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Frontendnotque/vexjoy-agent | 441 | — | ~5k | Automated safety check: Notes | MIT | |
| Motion CraftEliasOulkadi/shokunin | 114 | — | ~6.4k | Automated safety check: Pass | MIT | |
| Auteuragiwhitelist/auteur | 1k | — | ~5k | Automated safety check: Pass | MIT | |
| Better Designmarvkr/better-design | 254 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Shader for Interfacesv2space-labs/shader-for-interfaces | 116 | — | ~3.1k | Automated safety check: Pass | MIT |
Similar skills
Motion Craft
EliasOulkadi/shokunin
Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion).
Auteur
agiwhitelist/auteur
Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
Shader for Interfaces
v2space-labs/shader-for-interfaces
Decides whether an interface effect belongs in CSS, SVG, Canvas 2D, WebGL or WebGPU, then builds, debugs and visually verifies focused GPU effects inside product UIs.
Nerv UI
TheGreatGildo/nerv-ui
NERV Operations Console v2 — Evangelion-inspired UI component library.
More from SkylarKitchen/skills
Launch Film
SkylarKitchen/skills
Make a short, frame-exact product film for X or a portfolio from the real thing (a web app, a site, a Three.js scene, project photos), authored as a plan and rendered on a canvas engine rather than…
Room From Photos
SkylarKitchen/skills
Builds a 3D model of a real room from a few phone photos, with movable furniture layouts, as one Three.js HTML page you can open in a browser.
Related
Works with
Categories
Questions about 3D Assembly Manual
What does 3D Assembly Manual do?
Builds a phone-first interactive 3D step-by-step build guide as one self-contained Three.js HTML file, starting from a bundled starter template. js HTML page that walks through a physical build in numbered 3D steps, in the style of a LEGO manual, laid out for phones.html, an engine that already renders a four-step shelf example, and edits only the CONFIG block and the PROJECT SCENE block, leaving the engine alone.
When should I use 3D Assembly Manual?
3D Assembly Manual fits situations like: creating a 3D build or assembly guide for a garden bed, shelf or furniture; turning an install sequence into a step-by-step interactive 3D page; making a phone-friendly instruction manual that ships as a single HTML file.
How do I install 3D Assembly Manual in Claude Code?
Run `npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a claude-code`. Or copy the skill folder (skills/design/3d-assembly-manual in SkylarKitchen/skills) into .claude/skills/3d-assembly-manual in your project. Claude Code loads it when a task matches its description.
How do I install 3D Assembly Manual in Codex?
Run `npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a codex`. Or copy the skill folder (skills/design/3d-assembly-manual in SkylarKitchen/skills) into .agents/skills/3d-assembly-manual in your project. Codex loads it when a task matches its description.
Can I use 3D Assembly Manual in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SkylarKitchen/skills --skill 3d-assembly-manual -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/3d-assembly-manual, .gemini/skills/3d-assembly-manual, .github/skills/3d-assembly-manual and .opencode/skills/3d-assembly-manual in your project.
What does 3D Assembly Manual need to run?
Going by SKILL.md and its folder, 3D Assembly Manual needs the command-line tools its instructions call (python3).
Does 3D Assembly Manual access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is 3D Assembly Manual safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does 3D Assembly Manual use?
3D Assembly Manual is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does 3D Assembly Manual use?
About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to 3D Assembly Manual?
Skills that share tags, products or a category with 3D Assembly Manual: Frontend (notque/vexjoy-agent, 441 stars), Motion Craft (EliasOulkadi/shokunin, 114 stars), Auteur (agiwhitelist/auteur, 1k stars) and Better Design (marvkr/better-design, 254 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains 3D Assembly Manual?
SkylarKitchen (a GitHub user) maintains it in SkylarKitchen/skills, which has 117 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 28, 2026.
Source: SkylarKitchen/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.