Menu
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
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.
Based on SOC occupation classification
Use Alex_ACT_Memory through its local filesystem contract: resolve an existing clone, read only the requested channel, write atomically, run the repository check, and keep Git sync separately consented. Use for announcements, feedback, shared knowledge, insights, profile operations, and explicit Memory setup.
Bootstrap repository-scoped VS Code workspace files for a plugin-native Alex ACT workspace. Use when a new repository lacks Markdown Preview CSS, the current workspace needs the explicit /alex-act-core bootstrap-workspace repair path, or a repo needs deterministic .vscode/settings.json and .gitignore setup without touching user settings.
Install the four Alex ACT constellation plugins (alex-act-core, alex-act-illustrator-plugin, alex-act-enterprise, alex-act-msft) at their correct default scope (user for all four) with the correct install order (Core first), then optionally bootstrap Core's always-on ACT discipline instructions to ~/.copilot/instructions/ because plugin installs do not deliver instructions. Consent-gated. Idempotent — skips plugins already installed at the target version. Asks about tenant scope before installing alex-act-msft (Microsoft-internal only). Delegates to `plugin-management` for the mechanical CLI commands.
General Copilot CLI plugin operations: install / list / update / remove / marketplace add + remove, scope precedence (user vs repo), the enabledPlugins + extraKnownMarketplaces settings shape, and safe merge-not-overwrite settings edits. Use when a heir asks to install / update / remove any plugin from any Mall, or when auditing what plugins are installed at what scope. Generic — the install-constellation and update-plugins skills delegate to this one for the mechanical commands.
Emit and (with consent) install the Copilot CLI settings block for the public Microsoft ecosystem — Azure, Fabric (consumption/skills/operations/authoring), Power BI, and Microsoft 365 Agents Toolkit. Defaults to **repo scope** (`.github/copilot/settings.json`) per constellation PLUGIN-INTEGRATION § 2 — these are project-specific tools; a Python data-analysis workspace does not need Azure skills loaded. `--user` opt-in for heirs who want the plugins available in every workspace. Use when a heir on any Microsoft-subscribed tenant wants the seven public plugins enabled for the current project, or when auditing / repairing the Microsoft ecosystem enablement in a workspace or user profile.
The single-page HTML shell (index.html + manifest.json at repo root) that renders concatenated markdown as browsable, GitHub-styled documentation with a two-line topnav, per-doc emoji icons, sticky page header, and sidebar TOC. Use when the user says 'shell', 'add a doc', 'add a chapter', 'landing page', 'sidebar', 'manifest', 'hero', 'nav-strip', 'shell theme', 'color scheme', 'polish the pages', 'render preview', 'add an area', or when authoring/editing content that appears in the root manifest. Also invoke when the shell misrenders (raw frontmatter visible, links broken across folders, missing hero, doc button not switching content, sticky header overlap).
| name | spline-3d-integration |
| description | Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API. |
| risk | safe |
| source | community |
| date_added | 2026-03-07 |
Master guide for embedding interactive 3D scenes from Spline.design into web projects.
| 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 |
| 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 |
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.
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 |
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:
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.