Octocode Mannequin
bgauryy/octocode
Poses and animates a 22-bone anatomical humanoid rig with joint range-of-motion limits, using a Node CLI, a Three.js viewer and WebMCP tools an agent can drive live.
Generate browser-based interactive 3D network topology visualizations from inventory or a topology description.
Install Threejs Network Viz
$ npx skills add automateyournetwork/netclaw --skill threejs-network-viz -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install automateyournetwork/netclaw threejs-network-viz --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/automateyournetwork/netclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/workspace/skills/threejs-network-viz .claude/skills/threejs-network-viz && 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 "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .claude/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-vizType 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 automateyournetwork/netclaw --skill threejs-network-viz -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install automateyournetwork/netclaw threejs-network-viz --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/automateyournetwork/netclaw.git skills-src && mkdir -p .agents/skills && cp -r skills-src/workspace/skills/threejs-network-viz .agents/skills/threejs-network-viz && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .agents/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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 automateyournetwork/netclaw --skill threejs-network-viz -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install automateyournetwork/netclaw threejs-network-viz --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/automateyournetwork/netclaw.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/workspace/skills/threejs-network-viz .cursor/skills/threejs-network-viz && 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 "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .cursor/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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/automateyournetwork/netclaw.git --path workspace/skills/threejs-network-viz--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 automateyournetwork/netclaw --skill threejs-network-viz -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install automateyournetwork/netclaw threejs-network-viz --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/automateyournetwork/netclaw.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/workspace/skills/threejs-network-viz .gemini/skills/threejs-network-viz && 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 "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .gemini/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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 automateyournetwork/netclaw threejs-network-vizInstalls 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 automateyournetwork/netclaw --skill threejs-network-viz -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/automateyournetwork/netclaw.git skills-src && mkdir -p .github/skills && cp -r skills-src/workspace/skills/threejs-network-viz .github/skills/threejs-network-viz && 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 "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .github/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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 automateyournetwork/netclaw --skill threejs-network-viz -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install automateyournetwork/netclaw threejs-network-viz --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/automateyournetwork/netclaw.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/workspace/skills/threejs-network-viz .opencode/skills/threejs-network-viz && 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 "threejs-network-viz" agent skill from https://github.com/automateyournetwork/netclaw/tree/main/workspace/skills/threejs-network-viz into .opencode/skills/threejs-network-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-network-viz", 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
threejs-network-viz- GitHub stars
- 676
- Token cost
- ~1.8k tokens
- SKILL.md length
- 773 words
- Files
- 13
- Skills in repo
- 120
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Generate browser-based interactive 3D network topology visualizations from inventory or a topology description.
- A portable HTML scene is wanted without a desktop 3D engine
- SKILL.md covers Overview, Prerequisites, Natural Language Commands and Architecture, plus 2 more sections
- Runs Python and JavaScript scripts from its folder; calls npm; needs SKETCHFAB_API_KEY
- Tasks that involve 3D graphics and WebGL
What it does
Threejs Network Viz is an agent skill from automateyournetwork/netclaw. Generate browser-based interactive 3D network topology visualizations from inventory or a topology description. Use when a portable HTML scene is wanted without a desktop 3D engine.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files (for example `__init__.py`, `assets.py` and `html_template.py`).
It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js and Model Context Protocol. The repository describes itself as: An AI agent that claws through your network. The licence is Apache-2.0.
When your agent uses it
- A portable HTML scene is wanted without a desktop 3D engine
- Tasks that involve 3D graphics and WebGL
Example prompts
- “/threejs-network-viz”
Requirements
- Python 3
- Node.js
- A credential in SKETCHFAB_API_KEY
What it can do on your machine
Read from SKILL.md and the folder at commit aa90e7d. 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
Ships script files (Python and JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
sketchfab.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
SKETCHFAB_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Threejs Network Viz loads about 1.8k tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 773 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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:26
HFAB_API_KEY` / `SKETCHFAB_USERNAME` in `.env` (see `.env.example`) — get a token from https://sketchfab.com/settings/pa
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 automateyournetwork/netclaw at commit aa90e7d, republished under its Apache-2.0 licence (© automateyournetwork). 773 words, ~1,758 tokens.
Download SKILL.mdSave it as
.claude/skills/threejs-network-viz/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.- name
- threejs-network-viz
- description
- Generate browser-based interactive 3D network topology visualizations from inventory or a topology description. Use when a portable HTML scene is wanted without a desktop 3D engine.
Three.js Network Topology Visualization Skill
Version: 1.0.0 Feature: 046-threejs-network-viz Status: Active
Overview
Renders network topologies as interactive, fully-labeled 3D scenes directly in a web browser, using Three.js. Unlike NetClaw's UE5 (ue5-network-viz) and Blender (blender-3d-viz) visualization skills, this skill needs no desktop application, no GPU, and no cross-OS bridge — every visualization is a single, self-contained HTML file that opens directly in the engineer's own browser with no build step and no server process to manage, even in real-stencil mode.
Devices render as color-coded shapes by role (router, switch, firewall, load balancer, client); each device's interfaces are true child objects of that device (moving the device moves its interfaces automatically); links render as visible cables between the specific interfaces they connect (falling back to device-to-device when interface-level data isn't available); every device/interface/link is labeled with source-provided metadata (IP addresses, descriptions, etc., excluding credentials/config); operational state (healthy/degraded/down) overlays role coloring; and a legend explains every color/shape convention in use.
Prerequisites
Required
- A modern desktop browser (Chrome/Firefox/Edge) — nothing else. No engine, no GPU, no install.
Optional (real-stencil mode, User Story 5)
SKETCHFAB_API_KEY/SKETCHFAB_USERNAMEin.env(see.env.example) — get a token from https://sketchfab.com/settings/password- The vendored
sketchfab-mcp-server(mcp-servers/sketchfab-mcp-server/), cloned and built vianpm install && npm run build, registered assketchfab-mcpinconfig/openclaw.json
Topology sources
Any of NetClaw's existing topology-of-record or lab-emulation integrations — Cisco Modeling Labs, GNS3, containerlab, EVE-NG, Nautobot, NetBox/Infrahub, IP Fabric, or Forward Networks — or a freeform plain-language description requiring no live source at all.
Natural Language Commands
Render a live topology (User Story 1 & 2)
"Replicate the CML lab topology in a browser for me"
"Visualize my GNS3 project in Three.js"
"Show me the Nautobot-modeled network in a browser"NetClaw resolves which source to use (asking for clarification if ambiguous and more than one is configured), retrieves the topology, builds the scene, writes it to workspace/output/threejs-network-viz/topology-<timestamp>-<snapshot-id>.html, and opens it in the default browser.
Sketch a topology without a live source (User Story 3)
"Sketch a topology with a router called r1 and a switch called sw1, r1 connects to sw1"
"Show me two routers and a switch"Produces the same quality scene as a live source, using the same shape/color/label/legend conventions. Omitted details (role, interface names) get clearly-marked defaults rather than failing to render.
See health state (User Story 4)
State-based coloring is automatic whenever a source reports device/link operational state — no separate command needed. The legend explains both the role-color and state-color conventions together.
Real 3D model stencils (User Story 5)
"Visualize the CML lab with real 3D models"
"Use real-stencil mode for this topology"Enable real-stencil mode to attempt real 3D models (via Sketchfab, filtered to CC0-licensed models only) instead of procedural shapes, wherever a permitted model is found. Any device role without a verified CC0 model falls back automatically to its procedural shape, and NetClaw reports which devices fell back and why. In practice, expect fallback to be the common outcome — Sketchfab's catalog has essentially no CC0-licensed network-equipment-specific models; real-stencil mode is a visual enhancement layered on top of the same reliable procedural rendering, not a replacement for it.
Real-stencil mode never scrapes or auto-fetches from gated marketplaces (Fab, TurboSquid, CGTrader, GrabCAD) — for those, it only checks whether a user has manually placed a matching asset at workspace/output/threejs-network-viz/assets/user-supplied/<role>.glb.
Show full SKILL.md (298 more words)Show less
Navigate the scene
Standard mouse/trackpad controls once the page is open: left-drag to rotate, scroll to zoom, right-drag to pan (via OrbitControls).
Architecture
| Module | Responsibility |
|---|---|
topology_model.py | Canonical Device/Interface/Link/TopologySnapshot types every other module consumes |
layout.py | Force-directed 3D layout with centroid re-centering (ported from ue5-network-viz) |
materials.py | Role/state color tables and hostname-based device-role inference |
sources.py | One adapter per topology source (8 live integrations + freeform), plus source-selection disambiguation |
assets.py | Real-stencil resolution chain: cache/user-asset check → Sketchfab search + per-model CC0 verification → download+embed → procedural fallback |
scene_builder.py | Builds the embedded topology JSON payload consumed by the HTML template |
html_template.py | Renders the single self-contained HTML file, inlining vendored Three.js r147 |
output.py | Writes the timestamped output file and opens it in the browser |
vendor/three/ | Vendored Three.js r147 core + OrbitControls/GLTFLoader (the last release with classic global/non-module builds — see research.md §1-2) |
Environment Variables
| Variable | Required | Purpose |
|---|---|---|
SKETCHFAB_API_KEY | Only for real-stencil mode | Sketchfab API authentication |
SKETCHFAB_USERNAME | Only for real-stencil mode | Reference/attribution only, not required by the API itself |
Known Limitations
- Extreme-scale topologies (thousands of devices) are not a target use case — the layout and scene are tuned for tens-of-devices/hundreds-of-interfaces lab and campus scale.
- Real-stencil mode embeds the full model into the HTML file (no linked assets, to preserve zero-server delivery), so a topology with several real models can produce a multi-megabyte file — a real, live-downloaded CC0 model tested during development was ~14MB (19MB base64-embedded).
- The vendored
sketchfab-mcp-serverhad a real bug (license field silently dropped from itssketchfab-model-detailstool output) found and patched during implementation — see the "NetClaw patch" comments inmcp-servers/sketchfab-mcp-server/index.ts. If this vendored server is ever re-cloned fresh from upstream, the patch must be reapplied and rebuilt (npm run build) before real-stencil mode's CC0 verification will work correctly.
See specs/046-threejs-network-viz/tasks.md for the full implementation history and research.md for the technical decisions behind the Three.js version pinning and Sketchfab integration.
© automateyournetwork, Apache-2.0. 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 12 other files in workspace/skills/threejs-network-viz of automateyournetwork/netclaw.
- SKILL.md
- __init__.py
- assets.py
- html_template.py
- layout.py
- materials.py
- output.py
- scene_builder.py
- sources.py
- topology_model.py
- vendor/three/core/three.js
- vendor/three/examples/js/controls/OrbitControls.js
- vendor/three/examples/js/loaders/GLTFLoader.js
Open the folder on GitHubat commit aa90e7d
Compare with similar skills
Threejs Network Viz 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 |
|---|---|---|---|---|---|---|
| Threejs Network Viz this skillautomateyournetwork/netclaw | 676 | — | ~1.8k | Automated safety check: Notes | Apache-2.0 | |
| Octocode Mannequinbgauryy/octocode | 949 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Threejs Game Directormintdotgg/mint-threejs-skills | 114 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Mint Threejs Skillsmintdotgg/mint-threejs-skills | 114 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Threejs Visual Systemsmintdotgg/mint-threejs-skills | 114 | — | ~816 | Automated safety check: Pass | MIT | |
| 3dgs MCP Rendererjaccen/Awesome-Gaussian-Skills | 161 | — | ~6.9k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Threejs Game Director
mintdotgg/mint-threejs-skills
Build or upgrade complete Three.js browser games by coordinating gameplay, Mint MCP assets, graphics, UI, debugging, performance, QA, and release.
Mint Threejs Skills
mintdotgg/mint-threejs-skills
Build, revise, debug, and verify browser-based Three.js apps, games, asset viewers, model and asset-pack deliveries, material and material-pack deliveries, animated-model viewers, and explicitly…
Threejs Visual Systems
mintdotgg/mint-threejs-skills
Build and upgrade Three.js visual systems for apps and games using Mint MCP assets, authored geometry, materials, lighting, shaders, VFX, technical art, and measured performance.
3dgs MCP Renderer
jaccen/Awesome-Gaussian-Skills
MCP protocol integration with 3DGS rendering pipeline: Agent-controlled Three.js/WebGPU rendering, voice-driven scene reconstruction, real-time parameter manipulation, light tracing backend.
Game Assets
glifxyz/glif-mcp-server
Make art and media for a game you are building with Glif: character reference sheets, consistent characters, pixel-art sprite sheets with animation cycles, seamless and PBR textures, 3D models, item…
More from automateyournetwork/netclaw
All 120 skills in this repoEVE-NG Lab Topology Design
automateyournetwork/netclaw
Entry point for designing EVE-NG network labs: classifies the request, gathers missing requirements, proposes options and validates the resulting topology.
ACI Policy Change Deployment
automateyournetwork/netclaw
Deploys Cisco ACI policy changes only behind an approved ServiceNow Change Request, capturing pre and post-change fault baselines and rolling back automatically on a fault delta.
Cisco ACI Fabric Health Audit
automateyournetwork/netclaw
Runs a phased health audit of a Cisco ACI fabric through MCP tools: node status, links, tenant and policy review, faults and endpoint learning.
Anta Validation
automateyournetwork/netclaw
Validate Arista EOS network state against ANTA's pre-built 208-test catalogue, with structured pass/fail verdicts.
Arista Cvp
automateyournetwork/netclaw
Arista CloudVision Portal (CVP) automation via REST API — device inventory, events, connectivity monitoring, tag management (4 tools).
AWS Cloud Monitoring
automateyournetwork/netclaw
AWS CloudWatch monitoring — metrics, alarms, log queries, VPC flow log analysis, network performance.
Related
Works with
Categories
Questions about Threejs Network Viz
What does Threejs Network Viz do?
Generate browser-based interactive 3D network topology visualizations from inventory or a topology description. Threejs Network Viz is an agent skill from automateyournetwork/netclaw. Generate browser-based interactive 3D network topology visualizations from inventory or a topology description.
When should I use Threejs Network Viz?
Threejs Network Viz fits situations like: A portable HTML scene is wanted without a desktop 3D engine; tasks that involve 3D graphics and WebGL.
How do I install Threejs Network Viz in Claude Code?
Run `npx skills add automateyournetwork/netclaw --skill threejs-network-viz -a claude-code`. Or copy the skill folder (workspace/skills/threejs-network-viz in automateyournetwork/netclaw) into .claude/skills/threejs-network-viz in your project. Claude Code loads it when a task matches its description.
How do I install Threejs Network Viz in Codex?
Run `npx skills add automateyournetwork/netclaw --skill threejs-network-viz -a codex`. Or copy the skill folder (workspace/skills/threejs-network-viz in automateyournetwork/netclaw) into .agents/skills/threejs-network-viz in your project. Codex loads it when a task matches its description.
Can I use Threejs Network Viz 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 automateyournetwork/netclaw --skill threejs-network-viz -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs-network-viz, .gemini/skills/threejs-network-viz, .github/skills/threejs-network-viz and .opencode/skills/threejs-network-viz in your project.
What does Threejs Network Viz need to run?
Going by SKILL.md and its folder, Threejs Network Viz needs Python and JavaScript for the scripts in its folder, the command-line tools its instructions call (npm) and credentials named SKETCHFAB_API_KEY. Our summary lists: Python 3; Node.js; A credential in SKETCHFAB_API_KEY.
Does Threejs Network Viz access the network?
SKILL.md names 1 domain. As links in the text: sketchfab.com. This is read from the text; nothing was executed.
Is Threejs Network Viz safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Threejs Network Viz use?
Threejs Network Viz is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Threejs Network Viz use?
About 1.8k tokens (SKILL.md is roughly 7k 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 Threejs Network Viz?
Skills that share tags, products or a category with Threejs Network Viz: Octocode Mannequin (bgauryy/octocode, 949 stars), Threejs Game Director (mintdotgg/mint-threejs-skills, 114 stars), Mint Threejs Skills (mintdotgg/mint-threejs-skills, 114 stars) and Threejs Visual Systems (mintdotgg/mint-threejs-skills, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Threejs Network Viz?
automateyournetwork (a GitHub user) maintains it in automateyournetwork/netclaw, which has 676 GitHub stars. The repository holds 120 skills in this directory. The repository was last updated on October 9, 2026.
Source: automateyournetwork/netclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.