techwavedev 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.
AGI Framework Integration
Adapted for @techwavedev/agi-agent-kit Original source: antigravity-awesome-skills
Memory-First Protocol
Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.
# Check for prior frontend/design context before starting
python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Spline 3D Integration"
Storing Results
After completing work, store frontend/design decisions for future sessions:
python3 execution/memory_manager.py store \
--content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
--type decision --project <project> \
--tags spline-3d-integration frontend
Multi-Agent Collaboration
Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).
python3 execution/cross_agent_context.py store \
--agent "<your-agent>" \
--action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
--project <project>
Design Memory Persistence
Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.