Agent skill

Unicorn Studio

A skill your agent uses when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

Apache-2.0Auto-check passedGame Development

Install Unicorn Studio

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .claude/skills/unicorn-studio && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .claude/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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

$skill-installer install https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio

Type 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.

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .agents/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .agents/skills/unicorn-studio && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .agents/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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.

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .cursor/skills/unicorn-studio && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .cursor/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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

$ gemini skills install https://github.com/nirholas/three.ws.git --path third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .gemini/skills/unicorn-studio && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .gemini/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio

Installs 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).

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .github/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .github/skills/unicorn-studio && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .github/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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.

skills CLI

$ npx skills add nirholas/three.ws --skill unicorn-studio -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install nirholas/three.ws unicorn-studio --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio .opencode/skills/unicorn-studio && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "unicorn-studio" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio into .opencode/skills/unicorn-studio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "unicorn-studio", 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: unicorn-studio
GitHub stars: 226
Used in: 1 other repo
Token cost: ~635 tokens
SKILL.md length: 232 words
Files: 5
Skills in repo: 165
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

A skill your agent uses when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

Works in 2 steps: Basic embed container → Performance-first embed
Embedding and customizing Unicorn Studio interactive animations on the web (embed
SKILL.md covers When to use, What it is, Key embed patterns and Events (authoring-side), plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Unicorn Studio is an agent skill from nirholas/three.ws. Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

Its SKILL.md is about 640 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `REFERENCES.md` and `demo/PROMPT.md`).

It sits in Game Development, covering Embeddings and 3D graphics and WebGL. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

Embedding and customizing Unicorn Studio interactive animations on the web (embed
Responsive sizing
Layering with UI

Example prompts

“/unicorn-studio”

Workflow steps

2 steps, taken from the step headings in SKILL.md.

Basic embed container
Performance-first embed

What it can do on your machine

Read from SKILL.md and the folder at commit 238ef60. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are html).
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

Unicorn Studio loads about 635 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 232 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~42
When it runs · the whole SKILL.md, loaded when a task matches: ~635

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 nirholas/three.ws at commit 238ef60, republished under its Apache-2.0 licence (© nirholas). 232 words, ~635 tokens.

Download SKILL.mdSave it as .claude/skills/unicorn-studio/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.

name: unicorn-studio
description: Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

Unicorn Studio — No-code WebGL Scenes (Embed/SDK) Skill

When to use

Designers want custom WebGL visuals without hand-coding shaders/three.js
You need “designed” effects layered with text/images/video, with built-in interactivity
Site builders: Framer, Webflow, Wix, Figma Sites, etc.

What it is

A scene editor (layers + effects + events) that exports:
- Embed via Unicorn Studio SDK (small JS library)
- Or JSON/code export for faster/self-hosted loading (plan-dependent)

Key embed patterns

Load SDK (can be in <head> or footer depending on above-the-fold):
- UMD from jsDelivr (versioned)
- Call UnicornStudio.init() once DOM is ready
Add attributes to a container element:
- data-us-project="PROJECT_ID"
- Optional performance/behavior params:
  - data-us-scale (render scale)
  - data-us-dpi (resolution multiplier)
  - data-us-fps (cap FPS)
  - data-us-lazyload="true"
  - data-us-production="true"
- Optional JSON source:
  - data-us-project-src="https://.../scene.json.txt"

Events (authoring-side)

Appear (entrance), Scroll (progress/velocity), Hover, Mousemove
Use events for “feels interactive” without writing JS.

Common pitfalls

Container has no defined dimensions → scene won’t display
- Ensure the element with data-us-project has width/height.
Too many scenes on one page → WebGL context limits + memory
- Prefer <10 scenes/page; WebGL context max ~16.
Performance on low-end devices
- Use data-us-scale/data-us-dpi/data-us-fps; reduce dynamic layers/effects.
Site builder preview limitations
- Many builders won’t render in edit mode; must preview/publish to see it.

Quick recipes

1) Basic embed container

html

<div style="width: 100%; height: 420px" data-us-project="YOUR_PROJECT_ID"></div>

2) Performance-first embed

html

<div
  style="width: 100%; height: 420px"
  data-us-project="YOUR_PROJECT_ID"
  data-us-lazyload="true"
  data-us-production="true"
  data-us-scale="0.75"
  data-us-dpi="1.25"
  data-us-fps="45"
></div>

What to ask the user

Target platform: Webflow / Framer / coded site?
Is the scene above-the-fold? (affects script placement and lazyload)
Mobile support requirement + acceptable quality/FPS
Number of scenes on the page and whether JSON export is available

Files

SKILL.md and 4 other files in third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio of nirholas/three.ws.

SKILL.md
REFERENCES.md
demo/PROMPT.md
demo/index.html
demo/preview.jpg

Open the folder on GitHubat commit 238ef60

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

MengTo/Skillsagent-skills/web-design/unicorn-studio

Compare with similar skills

Unicorn Studio 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.

Unicorn Studio compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Unicorn Studio this skillnirholas/three.ws	226	1 repos	~635	Automated safety check: Pass	Apache-2.0	today
Spline 3D Integrationsickn33/agentic-awesome-skills	47k	2 repos	~1.2k	Automated safety check: Pass	MIT	yesterday
Neo4j Nvl Skillneo4j-contrib/neo4j-skills	114	—	~5k	Automated safety check: Notes	MIT	yesterday
3D Paper MaterialMengTo/Skills	6.6k	—	~2.4k	Automated safety check: Pass	MIT	yesterday
Image to Three.js Modelimg2threejs/img2threejs	18k	1 repos	~8.2k	Automated safety check: Pass	Apache-2.0	2 days ago
Web CloneJane-xiaoer/claude-skill-web-clone	1k	1 repos	~2.7k	Automated safety check: Pass	MIT	3 mo ago

Similar skills

Spline 3D Integration
sickn33/agentic-awesome-skills
A skill your agent uses when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
47k GitHub starsUsed in 2 repos~1.2k tokens
AI & LLM EngineeringAuto-check passed
Neo4j Nvl Skill
neo4j-contrib/neo4j-skills
Neo4j Visualization Library (NVL) — framework-agnostic graph rendering for the browser.
114 GitHub stars~5k tokensUpdated yesterday
AI & LLM EngineeringAuto-check: notes
3D Paper Material
MengTo/Skills
Build a paper sheet in Three.js that reads as paper up close — washi, cotton rag or kraft with baked fibre and tooth relief, laid and chain lines, a torn deckle edge with frayed fibres, four-layer…
6.6k GitHub stars~2.4k tokensUpdated yesterday
Game DevelopmentAuto-check passed
Image to Three.js Model
img2threejs/img2threejs
Rebuilds the object in a reference image as a procedural, animation-ready Three.js model written entirely in code, using staged sculpting with quality checks.
18k GitHub starsUsed in 1 repo~8.2k tokens
Game DevelopmentAuto-check passed
Web Clone
Jane-xiaoer/claude-skill-web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…
1k GitHub starsUsed in 1 repo~2.7k tokens
Game DevelopmentAuto-check passed
Threejs Game Director
majidmanzarpour/threejs-game-skills
Entrypoint for building, upgrading, and finishing Three.js browser games.
2.4k GitHub stars~2.2k tokensUpdated 9 days ago
Game DevelopmentAuto-check passed

More from nirholas/three.ws

All 165 skills in this repo

Add Shader Cursor Trail
nirholas/three.ws
Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…
226 GitHub starsUsed in 1 repo~760 tokens
Auto-check passed
Publish Project To GitHub
nirholas/three.ws
Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…
226 GitHub starsUsed in 1 repo~2.2k tokens
Auto-check: notes
Audit Reference Originality
nirholas/three.ws
Audit a website or digital experience against its supplied source references for originality and plagiarism risk.
226 GitHub starsUsed in 1 repo~1.8k tokens
Auto-check passed
Build Daily Inspiration Sites
nirholas/three.ws
Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.
226 GitHub starsUsed in 1 repo~1.9k tokens
Auto-check passed
Write Like Meng On X
nirholas/three.ws
Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…
226 GitHub starsUsed in 1 repo~2k tokens
Auto-check passed
Browser Video Recording
nirholas/three.ws
Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…
226 GitHub starsUsed in 1 repo~1.5k tokens
Auto-check passed

Questions about Unicorn Studio

What does Unicorn Studio do?

A skill your agent uses when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks). ws. Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

When should I use Unicorn Studio?

Unicorn Studio fits situations like: embedding and customizing Unicorn Studio interactive animations on the web (embed; responsive sizing; layering with UI.

How do I install Unicorn Studio in Claude Code?

Run `npx skills add nirholas/three.ws --skill unicorn-studio -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio in nirholas/three.ws) into .claude/skills/unicorn-studio in your project. Claude Code loads it when a task matches its description.

How do I install Unicorn Studio in Codex?

Run `npx skills add nirholas/three.ws --skill unicorn-studio -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/unicorn-studio in nirholas/three.ws) into .agents/skills/unicorn-studio in your project. Codex loads it when a task matches its description.

Can I use Unicorn Studio 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 nirholas/three.ws --skill unicorn-studio -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/unicorn-studio, .gemini/skills/unicorn-studio, .github/skills/unicorn-studio and .opencode/skills/unicorn-studio in your project.

What does Unicorn Studio need to run?

SKILL.md names no scripts, command-line tools or credentials: Unicorn Studio is instructions for the agent only.

Does Unicorn Studio 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 Unicorn Studio 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 Unicorn Studio use?

Unicorn Studio 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 Unicorn Studio use?

About 635 tokens (SKILL.md is roughly 2.5k 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 Unicorn Studio?

Skills that share tags, products or a category with Unicorn Studio: Spline 3D Integration (sickn33/agentic-awesome-skills, 47k stars), Neo4j Nvl Skill (neo4j-contrib/neo4j-skills, 114 stars), 3D Paper Material (MengTo/Skills, 6.6k stars) and Image to Three.js Model (img2threejs/img2threejs, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Unicorn Studio?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 226 GitHub stars. The repository holds 165 skills in this directory. The repository was last updated on October 7, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Unicorn Studio

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Unicorn Studio — No-code WebGL Scenes (Embed/SDK) Skill

When to use

What it is

Key embed patterns

Events (authoring-side)

Common pitfalls

Quick recipes

1) Basic embed container

2) Performance-first embed

What to ask the user

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from nirholas/three.ws

Related

Questions about Unicorn Studio