Core Engineering Rules & Architecture
Generates interactive technical diagrams (inspired by the Raptor 3 rocket engine explainer) that users can disassemble, rotate, and inspect directly in the browser.
Animation rules applied by your agent:
- Layered isometric rendering on pure 2D Canvas without heavy WebGL engine baggage
- Direct manipulation: mouse drag controls rotation, slider controls exploded-view offset
- Smart technical callout annotations with leader lines that dynamically follow part coordinates
- Zero external assets: all mechanical parts generated procedurally via mathematical curves
Example Trigger Prompts
Once installed in .claude/skills/ or .cursor/rules/, trigger your coding agent in Claude Code or Cursor using these natural prompts:
01
"Explain how a rocket engine works by building an interactive 3D model you can disassemble"
02
"Create an interactive blueprint diagram of an electric motor with exploded part views"
03
"Build a technical anatomical explainer with interactive layers and hover labels"
SKILL.md Source Code
---
name: interactive-explainer
description: Build interactive technical and engineering explainers with exploded-view disassembly in the browser.
version: 1.0.0
author: Konstantin Saifoulline (@konstantinsaifo) via Prompt Motion
license: MIT
---
# Interactive 3D Explainer Skill
Construct interactive mechanical and scientific explainers (such as rocket engines, jet turbines, or electric drivetrains) that users can inspect, rotate, and disassemble directly inside a self-contained browser file.
## 1. Interaction Contract
- **Orbit Drag**: Clicking and dragging the canvas rotates the machine around its central vertical axis.
- **Explode Slider**: A clean bottom slider interpolates parts between assembled and exploded-view states.
- **Part Inspection**: Hovering over or tapping an individual assembly highlights its geometry and reveals a floating technical callout with real engineering data.
## 2. Procedural Geometry
- Construct mechanical housings, nozzle bells, manifolds, and combustion chambers using pure mathematical SVG paths or Canvas arc/bezier primitives.
- Dark blueprint styling: deep navy canvas (`#070E18`) with cyan (`#00F2FE`) wireframe strokes and subtle white text.
## 3. Exploded Vector Offset Calculation
For each mechanical sub-assembly:
```javascript
const explodedX = part.baseX + part.expandDirX * explodeFactor * maxOffset;
const explodedY = part.baseY + part.expandDirY * explodeFactor * maxOffset;
```
## 4. Leader Line Annotations
- Draw thin indicator lines connecting the center of active components to text labels.
- Calculate label bounding boxes to guarantee callouts never overlap adjacent parts regardless of current rotation angle.