spline-3d-integration
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
Spline 3D Integration Skill
Master guide for embedding interactive 3D scenes from Spline.design into web projects.
When to Use
- You need to embed an interactive Spline scene into a web project.
- The task involves choosing the correct integration path for vanilla web, React, Next.js, Vue, or iframe contexts.
- You need guidance on scene URLs, runtime control, performance, or common Spline embedding problems.
Quick Reference
| Task | Guide |
|---|---|
| Vanilla HTML/JS embed | [guides/VANILLA_INTEGRATION.md](guides/VANILLA_INTEGRATION.md) |
| React / Next.js / Vue embed | [guides/REACT_INTEGRATION.md](guides/REACT_INTEGRATION.md) |
| Performance & mobile optimization | [guides/PERFORMANCE.md](guides/PERFORMANCE.md) |
| Debugging & common problems | [guides/COMMON_PROBLEMS.md](guides/COMMON_PROBLEMS.md) |
Working Examples
| File | What it shows |
|---|---|
| [examples/vanilla- |
Subscribers only
The full skill, its 8 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, examples/interactive-scene.tsx, examples/react-spline-wrapper.tsx, examples/vanilla-embed.html, guides/COMMON_PROBLEMS.md, guides/PERFORMANCE.md, guides/REACT_INTEGRATION.md, guides/VANILLA_INTEGRATION.md |
| Added | 2026-03-07 |
Related skills
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
angular
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
angular-best-practices
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-migration
Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
angular-state-management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.