Guide · Agent skill
How to use the Unicorn Studio Embeds agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The unicorn-studio skill teaches an AI agent how to add Unicorn Studio scenes to a web page: interactive, 3D-style visuals built in a no-code editor. It is for designers who want animated backgrounds or hero visuals without writing shaders or three.js, and for developers or site-builder users who need correct embed code. After this guide you will know what the skill does, how to install it, how to ask for help with a natural request, and what it needs to run.
Unicorn Studio EmbedsMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP and unzip it into ~/.claude/skills/ or your project's .claude/skills/ folder.
- 2Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 3Get your project ID. Copy the project ID from your Unicorn Studio account. You will need it for data-us-project.
- 4Describe the job in plain language. Ask for the scene and where it goes, for example a hero background on a coded page or a Webflow section.
- 5Answer the agent's questions. Say which platform you use, whether the scene is above the fold, your mobile requirements and how many scenes the page has.
- 6Give the container a size. Make sure the element with data-us-project has a width and height before testing.
- 7Preview or publish. Check the result in a browser, or publish on site builders, since many do not render scenes in edit mode.
What the unicorn-studio skill makes the agent do
Agent skills are folders of instructions that an AI agent loads when a task matches them. This one covers embedding and customizing Unicorn Studio animations. Unicorn Studio is a scene editor where you layer effects, and it also supports events such as Appear, Scroll, Hover and Mousemove so a scene can respond to the visitor without custom JavaScript.
Once the skill is installed, the agent knows the embed pattern: it loads the Unicorn Studio SDK, calls UnicornStudio.init() once the DOM is ready, and adds a data-us-project attribute to a container element. It also knows the optional settings for render scale, resolution, frame rate and lazy loading, and the common mistakes to avoid.
- Writes the embed container and script placement for a coded page
- Sets size and performance options such as data-us-scale, data-us-dpi and data-us-fps
- Flags problems like a container with no height, or too many scenes on one page
- Explains how scenes behave on Webflow, Framer, Wix and Figma Sites
Install the unicorn-studio skill
Download the skill ZIP from the page where you found this guide, then unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need to type a command. Describe the job in plain language that mentions Unicorn Studio or the thing you want, such as an animated hero background or a scene that responds to scrolling. The skill's description covers embedding, responsive sizing, performance, layering with UI and fallbacks, so requests about those topics are the ones that should load it.
Before writing code, the skill asks a few questions: which platform you are targeting (Webflow, Framer or a coded site), whether the scene is above the fold, what mobile support you need, and how many scenes the page will hold.
- "Add a Unicorn Studio scene as the hero background of this page, project ID abc123."
- "My Unicorn Studio scene is blank. Here is my container, why?"
- "Make this Unicorn Studio embed run smoothly on low-end phones."
- "How do I put a Unicorn Studio animation behind my Webflow headline?"
Use the basic and performance-first embed patterns
The skill's basic recipe is a container with explicit dimensions and your project ID. The performance-first recipe adds lazy loading, production mode and render settings. Replace YOUR_PROJECT_ID with the project ID from your Unicorn Studio account.
The optional JSON source attribute, data-us-project-src, can point to a scene JSON file instead of a project ID. The source describes this as plan-dependent, so check what your plan supports.
- data-us-lazyload="true" delays loading until needed
- data-us-scale sets render scale (the example uses 0.75)
- data-us-dpi sets the resolution multiplier (the example uses 1.25)
- data-us-fps caps frame rate (the example uses 45)
<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>Avoid the common pitfalls
Most failed embeds come from one of four problems. The element with data-us-project must have a defined width and height, or the scene will not display. Pages with many scenes hit WebGL context limits and memory pressure; the skill recommends fewer than 10 scenes per page, since the WebGL context maximum is around 16.
Site builders are a separate case. Many do not render scenes in edit mode, so you need to preview or publish the page to see the result.
- No height on the container: the scene stays invisible
- Too many scenes: keep it under 10 per page
- Low-end devices: lower scale, dpi or fps and reduce layered effects
- Builder edit mode: preview or publish to check
Check the requirements and safety notes
You need a Unicorn Studio account and a project ID. The SDK and the scene editor come from Unicorn Studio, not from this skill. The embed loads the Unicorn Studio SDK from jsDelivr, so the page needs internet access and must allow third-party scripts from that CDN.
The skill does not run scripts on your machine. It does use the network, because the scene loads its SDK and any JSON source at runtime. The package includes a demo folder with index.html and PROMPT.md, plus a REFERENCES.md file that links to the official Unicorn Studio docs for embeds, performance and events.
- Requires: Unicorn Studio account, project ID, internet access to jsDelivr, a page or builder that accepts custom embed code
- Runs scripts: no
- Uses network: yes
- Files: SKILL.md, REFERENCES.md, demo/index.html, demo/PROMPT.md
What people use it for
- Animated hero background on a marketing landing page
- Interactive section visual that responds to scrolling or hovering, built in the no-code editor
- Adding a scene behind text or images on a Webflow or Framer site
- Tuning a scene for smoother playback on mobile by adjusting scale, dpi and fps
Frequently asked questions
Is the unicorn-studio skill free to use?
The skill is published under the MIT licence. Unicorn Studio itself requires an account and a project ID, and the source notes that some features such as JSON export depend on your plan, so check Unicorn Studio's pricing for its own terms.
What do I need before I install the unicorn-studio skill?
You need an agent that supports skills, such as Claude, and a Unicorn Studio account with a project ID. You also need a page or site builder where you can add custom embed code, plus internet access so the SDK can load from jsDelivr.
Where do I install the unicorn-studio skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or .claude/skills/ inside a project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
Why is my Unicorn Studio scene not showing?
The most common cause is a container with no width or height. Give the element with data-us-project explicit dimensions. On site builders, also check that you are previewing or publishing the page, since edit mode often does not render scenes.
Can I use Unicorn Studio on Webflow, Framer or Wix?
The skill covers Webflow, Framer, Wix and Figma Sites and explains how scenes behave on them. Expect to add custom embed code, and preview or publish to see the animation, because many builders do not show it in edit mode.
How many Unicorn Studio scenes can one page have?
The skill recommends fewer than 10 scenes per page, because WebGL has a context limit of around 16 and each scene uses memory. For pages with more, or for low-end mobile targets, the skill suggests reducing scale, dpi and fps.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want Unicorn Studio animations on a coded site or a site builder and want the agent to write correct embed code, sizing and performance settings. Pick something else if your project cannot load third-party scripts from a CDN, or if you need many animated scenes on one page or must support low-end mobile devices.
Download the skill