mengto-unicorn-studio

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

Jump to install

Repository: oimiragieo/gotcontext-frontend-developer
Last source activity: August 10, 2026 at 23:20
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/oimiragieo/gotcontext-frontend-developer --skill mengto-unicorn-studio

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

5 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

2026-08-14

sample-agents-tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

2026-08-14

stitch-shadcn-ui

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

2026-08-14

View all from this repository

name	mengto-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

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

2) Performance-first embed

<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

mengto-unicorn-studio

Source facts

Install options

Review the source files

More from this repository

More from this repository

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

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