Skill

spline-3d-integration

Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.

npx claudepluginhub absjaded/antigravity-awesome-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Master guide for embedding interactive 3D scenes from [Spline.design](https://spline.design) into web projects.

Supporting Assets

examples/interactive-scene.tsxexamples/react-spline-wrapper.tsxexamples/vanilla-embed.htmlguides/COMMON_PROBLEMS.mdguides/PERFORMANCE.mdguides/REACT_INTEGRATION.mdguides/VANILLA_INTEGRATION.md

SKILL.md

Similar Skills

finishing-a-development-branch

174.6k

Verifies tests pass on completed feature branch, presents options to merge locally, create GitHub PR, keep as-is or discard; executes choice and cleans up worktree.

superpowers

systematic-debugging

174.6k

Guides root cause investigation for bugs, test failures, unexpected behavior, performance issues, and build failures before proposing fixes.

10 files

superpowers

writing-plans

174.6k

Writes implementation plans from specs for multi-step tasks, mapping files and breaking into TDD bite-sized steps before coding.

1 file

superpowers

Stats

Stars0

Forks0

Last CommitMar 7, 2026

Used By4 plugins

Actions

View Source View Plugin View on GitHub View README

Spline 3D Integration Skill

Master guide for embedding interactive 3D scenes from Spline.design into web projects.

Quick Reference

Task	Guide
Vanilla HTML/JS embed	guides/VANILLA_INTEGRATION.md
React / Next.js / Vue embed	guides/REACT_INTEGRATION.md
Performance & mobile optimization	guides/PERFORMANCE.md
Debugging & common problems	guides/COMMON_PROBLEMS.md

Working Examples

File	What it shows
examples/vanilla-embed.html	Minimal vanilla JS embed with background + fallback
examples/react-spline-wrapper.tsx	Production-ready lazy-loaded React wrapper with fallback
examples/interactive-scene.tsx	Full interactive example: events, object control, camera

What Is Spline?

Spline is a browser-based 3D design tool — think Figma, but for 3D. Designers create interactive 3D scenes (objects, materials, animations, physics, events) in the Spline editor, then export them for the web via a hosted .splinecode file URL.

STEP 1 — Identify the Stack

Before writing any code, check the existing project files to determine the framework.

Stack	Method
Vanilla HTML/JS	`<spline-viewer>` web component OR `@splinetool/runtime`
React / Vite	`@splinetool/react-spline`
Next.js	`@splinetool/react-spline/next`
Vue	`@splinetool/vue-spline`
iframe (Webflow, Notion, etc.)	Public URL iframe

STEP 2 — Get the Scene URL

The user must go to their Spline editor → Export → Code Export → copy the prod.spline.design URL:

https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode

Before copying the URL, tell the user to check Play Settings:

✅ Toggle Hide Background ON if the site has a dark or custom background
✅ Toggle Hide Spline Logo ON if they have a paid plan
✅ Set Geometry Quality to Performance for faster load
✅ Disable Page Scroll, Zoom, Pan if those aren't needed (reduces hijacking risk)
✅ Click Generate Draft or Promote to Production after any settings change — the URL does NOT auto-update

STEP 3 — Read the Relevant Guide

Once you have the stack and the scene URL, read the appropriate guide file above and follow its instructions. Always read COMMON_PROBLEMS.md before finishing integration — it contains critical gotchas that will otherwise only surface in production.

Strict Rules

ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in common, generic, or safe styles. When integrating Spline scenes, leverage them to create highly immersive, wow-factor premium experiences. Combine them thoughtfully with typography and layout.