Builds scientific and mathematical education web pages and sites — the deliverable is always a web page with rigorous LaTeX derivations in MDX, an interactive 3D React Three Fiber simulation, and live parameter sliders, assembled on a Next.js 16 + MDX + KaTeX + R3F stack. Use this skill when the user wants to BUILD a page or site covering a physics or math topic: double pendulum, orbital mechanics, fluid dynamics, quantum mechanics, wave functions, electromagnetism, thermodynamics, Fourier analysis, special relativity, chaos theory, or any topic where they want rigorous equations AND a 3D interactive simulation together. Also triggers when adding a new module to an existing Next.js science site. SKIP for: pure debugging requests, Python/notebook deliverables, plain-English explanations without building anything, generic Next.js setup without science content, non-educational 3D scenes (product configurators, dashboards), or non-Next.js stacks (Astro, Vue, etc.).
Builds scientific and mathematical education web pages and sites — the deliverable is always a web page with rigorous LaTeX derivations in MDX, an interactive 3D React Three Fiber simulation, and live parameter sliders, assembled on a Next.js 16 + MDX + KaTeX + R3F stack. Use this skill when the user wants to BUILD a page or site covering a physics or math topic: double pendulum, orbital mechanics, fluid dynamics, quantum mechanics, wave functions, electromagnetism, thermodynamics, Fourier analysis, special relativity, chaos theory, or any topic where they want rigorous equations AND a 3D interactive simulation together. Also triggers when adding a new module to an existing Next.js science site. SKIP for: pure debugging requests, Python/notebook deliverables, plain-English explanations without building anything, generic Next.js setup without science content, non-educational 3D scenes (product configurators, dashboards), or non-Next.js stacks (Astro, Vue, etc.).
Scientific & Mathematical Education Site
This skill guides you through building a complete scientific education module:
rigorous derivations with LaTeX equations embedded in MDX, an interactive 3D
React Three Fiber simulation, and live parameter sliders + physics readout panels.
src/app/layout.tsx — KaTeX CSS import, nav, dark theme
src/app/page.tsx — Landing page with module cards
Critical: verify the build passes before writing content:
npm run build
If it fails, the most common causes are in references/stack-setup.md (Turbopack plugin format, ssr: false in server components).
Phase 3: Build the Visualization
Read references/r3f-patterns.md for concrete templates. Follow this order:
3a. computePhysics() first
Write the pure physics function before building any 3D geometry. Test it mentally:
does it return sensible values at t=0? At the parameter defaults? At edge cases?
Export it from the main simulation file so PhysicsReadout can use the same types.
3b. Build the Scene
Use the component structure from references/r3f-patterns.md:
All visualization files must have "use client" at the top
Use useRef + useFrame for animation — never useState inside useFrame
Use useMemo for geometry that doesn't change every frame
Use THREE.ArrowHelper via useMemo + primitive for force/field arrows
Use instancedMesh for 50+ identical particles
3c. Wrap with Demo, Sliders, Readout
Compose MySimulationDemo.tsx following the exact wrapper pattern from references/r3f-patterns.md.
npm run build # must pass — catches LaTeX escaping errors and TS errors
npm run dev # open localhost:3000
Check in the browser:
Demo loads (may take 2–3s for 3D to hydrate)
Sliders update the scene in real-time
Live readout shows numbers (not "Initializing…" forever)
KaTeX equations render (not raw $...$ text)
No console errors
Quality Bar
A complete module should have:
12–20 sections with full derivations (not just equation dumps)
Physical intuition before every equation set
4–6 slider parameters with physically meaningful ranges
5–8 live readout quantities (nondimensional numbers, forces, energies)
Force/field arrows that update in real-time
Zero console errors in the browser
Clean npm run build
The gold standard: a reader who knows the physics but not the equations can use the demo to develop intuition, then read the derivation to understand why.
Common Pitfalls
Symptom
Cause
Fix
Build fails: "loader does not have serializable options"
Using imported remark/rehype modules instead of strings
references/stack-setup.md → Turbopack section
Build fails: "ssr: false not allowed in Server Component"
dynamic() called in mdx-components.tsx
Create a *Lazy.tsx client wrapper
useMDXComponents type error
Old two-arg API
Change to useMDXComponents(): MDXComponents (no args)
