ShapeDiver App Builder
Prerequisite: This skill assumes you have already read and followed the
shapediver-router skill. If you arrived here directly, stop — read
shapediver-router first. It selects the correct integration strategy and
gathers required credentials before any implementation skill is read.
You are guiding the user to the right App Builder strategy. Ask clarifying questions
if the intent is not clear, then hand off to the correct skill.
Scope discipline: This skill only routes. Do not write implementation code here — hand
off to the correct sub-skill. Do not suggest the Viewer API unless the user's requirements
cannot be met by any App Builder strategy.
Workflow
Follow these steps in order.
Step 1: Determine Sub-Strategy
Use the decision guide below. If the user's intent clearly maps to one strategy,
confirm it directly. If ambiguous, ask.
| Strategy |
Customization |
Best For |
Skill |
| Iframe |
1/5 |
Fastest path. Paste an iframe snippet, done. |
shapediver-appbuilder-iframe |
| App Builder |
2/5 |
Use the App Builder directly, optionally with a custom theme. |
shapediver-appbuilder-theme |
| Fork |
3/5 |
Custom React components while keeping App Builder infrastructure. |
shapediver-appbuilder-fork |
Decision guide:
- "I just want my model on a page" → Iframe.
- "I want to match my brand (colors, fonts, logo)" → App Builder + Theme.
- "I need custom panels, components, or backend integrations" → Fork.
- Need programmatic control over viewport, camera, or custom materials? → The App Builder
is not the right path. Use the
shapediver-viewer skill instead.
Checkpoint: You have identified exactly one sub-strategy and confirmed it with the user.
Step 2: Gather Information
Collect the required information for the chosen strategy before handing off.
Iframe
App Builder (with optional theme)
Fork
Checkpoint: All required items for the chosen strategy are collected.
Step 3: Hand Off
Read the corresponding skill before writing any code:
- Iframe: Read
shapediver-appbuilder-iframe.
- App Builder (with optional theme): Read
shapediver-appbuilder-theme.
- Fork: Read
shapediver-appbuilder-fork.
Checkpoint: You have read the sub-skill file and are now following its workflow.
Anti-Rationalization Table
| You will think… |
Why it is wrong |
| "They said 'embed' so it's definitely iframe." |
"Embed" can also mean themed App Builder or fork deployed to their domain. Confirm the sub-strategy before handing off. |
| "I'll just suggest Fork since it covers everything." |
Fork requires cloning a repo, managing a submodule, and running a dev server. If the user only needs branding, a theme JSON is simpler. |
| "I know enough to write code without reading the sub-skill." |
Each sub-skill has specific rules and gotchas. Skipping the read produces code that violates them. |
Gotchas
- The App Builder is NOT the Viewer API. If the user asks for programmatic viewport control,
camera manipulation, or custom materials, they need the
shapediver-viewer skill instead.
Selection and drawing tools ARE supported via App Builder components.
- The slug is the simplest way to reference a model, but
ticket + modelViewUrl URL
parameters or a theme JSON sessions property also work. The slug is NOT the same as
the ticket or modelViewUrl used by the Viewer API.
- Theme customization only covers branding (colors, fonts, logo). If the user needs custom
React components or new UI panels, they need the Fork strategy.
1---2name: shapediver-appbuilder3description: Use this skill when the user wants to use the ShapeDiver App Builder — the ready-made configurator UI. Routes to the correct App Builder strategy: iframe embedding (zero code), App Builder with optional custom theme, or forking the open-source React app. Activate when the user mentions App Builder, embedding a ShapeDiver model, or wants to use ShapeDiver without writing custom Viewer API code.4license: MIT5---67# ShapeDiver App Builder89> **Prerequisite:** This skill assumes you have already read and followed the10> `shapediver-router` skill. If you arrived here directly, stop — read11> `shapediver-router` first. It selects the correct integration strategy and12> gathers required credentials before any implementation skill is read.1314You are guiding the user to the right App Builder strategy. Ask clarifying questions15if the intent is not clear, then hand off to the correct skill.1617**Scope discipline:** This skill only routes. Do not write implementation code here — hand18off to the correct sub-skill. Do not suggest the Viewer API unless the user's requirements19cannot be met by any App Builder strategy.2021---2223## Workflow2425Follow these steps in order.2627### Step 1: Determine Sub-Strategy2829Use the decision guide below. If the user's intent clearly maps to one strategy,30confirm it directly. If ambiguous, ask.3132| Strategy | Customization | Best For | Skill |33| :-------------- | :------------ | :---------------------------------------------------------------- | :----------------------------- |34| **Iframe** | 1/5 | Fastest path. Paste an iframe snippet, done. | `shapediver-appbuilder-iframe` |35| **App Builder** | 2/5 | Use the App Builder directly, optionally with a custom theme. | `shapediver-appbuilder-theme` |36| **Fork** | 3/5 | Custom React components while keeping App Builder infrastructure. | `shapediver-appbuilder-fork` |3738**Decision guide:**3940- "I just want my model on a page" → **Iframe**.41- "I want to match my brand (colors, fonts, logo)" → **App Builder + Theme**.42- "I need custom panels, components, or backend integrations" → **Fork**.43- Need programmatic control over viewport, camera, or custom materials? → The App Builder44 is not the right path. Use the `shapediver-viewer` skill instead.4546**Checkpoint:** You have identified exactly one sub-strategy and confirmed it with the user.4748### Step 2: Gather Information4950Collect the required information for the chosen strategy before handing off.5152#### Iframe5354- [ ] **Slug or full App Builder URL** (e.g., `https://www.shapediver.com/app/builder/v1/main/latest/?slug=my-model`).55 Alternatively, the model can be referenced via `ticket` + `modelViewUrl` URL parameters,56 or via a theme JSON file using the `g` parameter.5758#### App Builder (with optional theme)5960- [ ] **Slug or full App Builder URL** (or `ticket` + `modelViewUrl`).61- [ ] For themes: branding requirements (colors, fonts, logo).62 The theme JSON file can also define which model to load via a `sessions` property63 (containing a `slug`, or `ticket` + `modelViewUrl`), avoiding the need for URL parameters.6465#### Fork6667- [ ] **Slug or full App Builder URL** (or `ticket` + `modelViewUrl`).68- [ ] Description of custom UI components or backend integrations needed.6970**Checkpoint:** All required items for the chosen strategy are collected.7172### Step 3: Hand Off7374Read the corresponding skill before writing any code:7576- **Iframe:** Read `shapediver-appbuilder-iframe`.77- **App Builder (with optional theme):** Read `shapediver-appbuilder-theme`.78- **Fork:** Read `shapediver-appbuilder-fork`.7980**Checkpoint:** You have read the sub-skill file and are now following its workflow.8182---8384## Anti-Rationalization Table8586| You will think… | Why it is wrong |87| :----------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |88| "They said 'embed' so it's definitely iframe." | "Embed" can also mean themed App Builder or fork deployed to their domain. Confirm the sub-strategy before handing off. |89| "I'll just suggest Fork since it covers everything." | Fork requires cloning a repo, managing a submodule, and running a dev server. If the user only needs branding, a theme JSON is simpler. |90| "I know enough to write code without reading the sub-skill." | Each sub-skill has specific rules and gotchas. Skipping the read produces code that violates them. |9192---9394## Gotchas9596- The App Builder is NOT the Viewer API. If the user asks for programmatic viewport control,97 camera manipulation, or custom materials, they need the `shapediver-viewer` skill instead.98 Selection and drawing tools ARE supported via App Builder components.99- The slug is the simplest way to reference a model, but `ticket` + `modelViewUrl` URL100 parameters or a theme JSON `sessions` property also work. The slug is NOT the same as101 the ticket or modelViewUrl used by the Viewer API.102- Theme customization only covers branding (colors, fonts, logo). If the user needs custom103 React components or new UI panels, they need the Fork strategy.
shapediver