{"id":"16d8ef17-f5fe-4bb5-8c0e-757a1cff2d72","shortId":"KpJH26","kind":"skill","title":"spline-3d-integration","tagline":"Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.","description":"# Spline 3D Integration Skill\n\nMaster guide for embedding interactive 3D scenes from [Spline.design](https://spline.design) into web projects.\n\n---\n\n## When to Use\n- You need to embed an interactive Spline scene into a web project.\n- The task involves choosing the correct integration path for vanilla web, React, Next.js, Vue, or iframe contexts.\n- You need guidance on scene URLs, runtime control, performance, or common Spline embedding problems.\n\n## Quick Reference\n\n| Task                              | Guide                                                          |\n| --------------------------------- | -------------------------------------------------------------- |\n| Vanilla HTML/JS embed             | [guides/VANILLA_INTEGRATION.md](guides/VANILLA_INTEGRATION.md) |\n| React / Next.js / Vue embed       | [guides/REACT_INTEGRATION.md](guides/REACT_INTEGRATION.md)     |\n| Performance & mobile optimization | [guides/PERFORMANCE.md](guides/PERFORMANCE.md)                 |\n| Debugging & common problems       | [guides/COMMON_PROBLEMS.md](guides/COMMON_PROBLEMS.md)         |\n\n## Working Examples\n\n| File                                                                   | What it shows                                            |\n| ---------------------------------------------------------------------- | -------------------------------------------------------- |\n| [examples/vanilla-embed.html](examples/vanilla-embed.html)             | Minimal vanilla JS embed with background + fallback      |\n| [examples/react-spline-wrapper.tsx](examples/react-spline-wrapper.tsx) | Production-ready lazy-loaded React wrapper with fallback |\n| [examples/interactive-scene.tsx](examples/interactive-scene.tsx)       | Full interactive example: events, object control, camera |\n\n---\n\n## What Is Spline?\n\nSpline 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.\n\n---\n\n## STEP 1 — Identify the Stack\n\nBefore writing any code, check the existing project files to determine the framework.\n\n| Stack                          | Method                                                   |\n| ------------------------------ | -------------------------------------------------------- |\n| Vanilla HTML/JS                | `<spline-viewer>` web component OR `@splinetool/runtime` |\n| React / Vite                   | `@splinetool/react-spline`                               |\n| Next.js                        | `@splinetool/react-spline/next`                          |\n| Vue                            | `@splinetool/vue-spline`                                 |\n| iframe (Webflow, Notion, etc.) | Public URL iframe                                        |\n\n---\n\n## STEP 2 — Get the Scene URL\n\nThe user must go to their Spline editor → **Export** → **Code Export** → copy the `prod.spline.design` URL:\n\n```\nhttps://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode\n```\n\n**Before copying the URL, tell the user to check Play Settings:**\n\n- ✅ Toggle **Hide Background** ON if the site has a dark or custom background\n- ✅ Toggle **Hide Spline Logo** ON if they have a paid plan\n- ✅ Set **Geometry Quality** to Performance for faster load\n- ✅ Disable **Page Scroll**, **Zoom**, **Pan** if those aren't needed (reduces hijacking risk)\n- ✅ Click **Generate Draft** or **Promote to Production** after any settings change — the URL does NOT auto-update\n\n---\n\n## STEP 3 — Read the Relevant Guide\n\nOnce 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.\n\n---\n\n## Strict Rules\n\n- **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.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["spline","integration","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-spline-3d-integration","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/spline-3d-integration","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34515 github stars · SKILL.md body (4,479 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T12:51:49.149Z","embedding":null,"createdAt":"2026-04-18T21:45:18.762Z","updatedAt":"2026-04-22T12:51:49.149Z","lastSeenAt":"2026-04-22T12:51:49.149Z","tsv":"'/xxxxxxxxxxxxxxxx/scene.splinecode':253 '1':191 '2':231 '3':329 '3d':3,9,24,32,156,163,167 'absolut':372 'ad':7 'agent':374 'alway':353 'anim':171 'api':22 'appropri':345 'aren':304 'ask':451 'auto':326 'auto-upd':325 'background':124,267,277 'base':155 'boundari':459 'browser':154 'browser-bas':153 'build':380,389 'camera':146 'chang':320 'check':199,262 'choos':58 'clarif':453 'clear':426 'click':310 'code':198,245 'combin':411 'common':82,107,391 'common_problems.md':355 'compon':213 'contain':360 'context':71 'control':21,79,145 'copi':247,255 'correct':60 'creat':165,403 'creativ':382 'criteria':462 'critic':361 'custom':276 'dark':274 'debug':106 'describ':430 'design':157,164 'determin':205 'disabl':297 'draft':312 'editor':177,243 'emb':46,92,98,122 'embed':18,30,84 'environ':442 'environment-specif':441 'etc':226 'event':143,173 'exampl':112,142 'examples/interactive-scene.tsx':138,139 'examples/react-spline-wrapper.tsx':126,127 'examples/vanilla-embed.html':117,118 'exist':201 'experi':410 'expert':447 'export':179,244,246 'factor':408 'fallback':125,137 'faster':295 'figma':160 'file':113,188,203,347 'finish':357 'follow':350 'framework':207 'full':140 'generat':311 'generic':392 'geometri':290 'get':232 'go':239 'gotcha':362 'guid':28,89,333,346 'guidanc':74 'guides/common_problems.md':109,110 'guides/performance.md':104,105 'guides/react_integration.md':99,100 'guides/vanilla_integration.md':93,94 'hide':266,279 'high':404 'hijack':308 'host':186 'html/js':91,211 'identifi':192 'ifram':70,223,229 'immers':405 'includ':16 'input':456 'instruct':352 'integr':4,25,61,358,397 'interact':8,31,48,141,166 'involv':57 'js':121 'layout':417 'lazi':132 'lazy-load':131 'leverag':400 'limit':418 'load':133,296 'logo':281 'mandat':373 'master':27 'match':427 'materi':170 'method':209 'minim':119 'miss':464 'mobil':102 'modern':381 'must':238,375 'need':44,73,306 'next.js':67,96,219 'notion':225 'object':144,169 'optim':103 'otherwis':365 'output':436 'page':298 'paid':287 'pan':301 'path':62 'perform':80,101,293 'permiss':457 'physic':172 'plan':288 'play':263 'premium':409 'problem':85,108 'prod.spline.design':249,252 'prod.spline.design/xxxxxxxxxxxxxxxx/scene.splinecode':251 'product':129,316,369 'production-readi':128 'project':15,39,54,202 'promot':314 'public':227 'qualiti':291 'quick':86 'react':17,66,95,134,216 'read':330,343,354 'readi':130 'reduc':307 'refer':87 'relev':332 'requir':455 'review':448 'risk':309 'rule':371 'runtim':20,78 'safe':394 'safeti':458 'scene':10,33,50,76,168,234,341,399 'scope':429 'scroll':299 'set':264,289,319 'show':116 'site':271 'skill':26,378,421 'skill-spline-3d-integration' 'source-sickn33' 'specif':443 'spline':2,23,49,83,149,150,176,242,280,398 'spline-3d-integration':1 'spline.design':12,35,36 'splinecod':187 'splinetool/react-spline':218 'splinetool/react-spline/next':220 'splinetool/runtime':215 'splinetool/vue-spline':222 'stack':194,208,338 'step':190,230,328 'stop':449 'strict':370 'stun':385 'style':395 'substitut':439 'success':461 'surfac':367 'task':56,88,425 'tell':258 'test':445 'think':159 'thought':413 'toggl':265,278 'tool':158 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':434 'typographi':415 'ui/ux':386 'updat':327 'url':77,189,228,235,250,257,322,342 'use':5,42,419 'user':237,260 'util':376 'valid':444 'vanilla':64,90,120,210 'via':184 'visual':384 'vite':217 'vue':68,97,221 'web':14,38,53,65,183,212 'webflow':224 'work':111 'wow':407 'wow-factor':406 'wrapper':135 'write':196 'zoom':300","prices":[{"id":"c37d51fa-a18e-49b7-9b5b-bb4ad2b7cd6e","listingId":"16d8ef17-f5fe-4bb5-8c0e-757a1cff2d72","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:45:18.762Z"}],"sources":[{"listingId":"16d8ef17-f5fe-4bb5-8c0e-757a1cff2d72","source":"github","sourceId":"sickn33/antigravity-awesome-skills/spline-3d-integration","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/spline-3d-integration","isPrimary":false,"firstSeenAt":"2026-04-18T21:45:18.762Z","lastSeenAt":"2026-04-22T12:51:49.149Z"}],"details":{"listingId":"16d8ef17-f5fe-4bb5-8c0e-757a1cff2d72","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"spline-3d-integration","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34515,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"2d877f23e6c051dea326a82ccb2380cf80244f5f","skill_md_path":"skills/spline-3d-integration/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/spline-3d-integration"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"spline-3d-integration","description":"Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/spline-3d-integration"},"updatedAt":"2026-04-22T12:51:49.149Z"}}