skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scaffold-3d-site

Scaffolds a new 3D web project with Vite, React, TypeScript, and React Three Fiber.

52|3|Updated Aug 20, 2026
Search Tags:#boilerplate#scaffold#vite#webgl#three.js#React Three Fiber#3d website
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill scaffold-3d-site-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffold-3d-site
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/scaffold-3d-site
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill scaffold-3d-site-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a 3D/WebGL website from scratch involves many decisions and boilerplate: choosing a framework, installing the right Three.js ecosystem packages, and wiring up a working scene. This Skill automates that setup so you get a running 3D scene skeleton in minutes. ## Core Features & Use Cases - Framework Choice: Scaffolds either a Vite SPA (default, for pure 3D experiences) or a Next.js app (when SEO/SSR matters). - Quality Presets: Installs a lite core stack (three, @react-three/fiber, drei) or a full preset adding postprocessing, Rapier physics, GSAP, Lenis, zustand, and leva. - Scene Skeleton: Creates a ready-to-run project structure with a <Canvas> wrapper, lights, environment, orbit controls, and a rotating shadow-casting mesh. - Use Case: You want to build a portfolio site with an interactive 3D hero. Run this Skill to get a Vite + R3F project with a working scene, then hand off to specialized agents for shaders, motion, and asset pipelines. ## Quick Start Scaffold a new full-preset 3D website project using Vite and React Three Fiber and verify it renders in the dev server.

Frequently Asked Questions about scaffold-3d-site

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I start a new React Three Fiber project?▼

Create a Vite app with the react-ts template, then install three, @react-three/fiber, and @react-three/drei. Add a Canvas wrapper with lights, an Environment preset, and OrbitControls to get a working 3D scene immediately.

Should I use Vite or Next.js for a Three.js website?▼

Use Vite for pure 3D experiences where fast dev startup matters most. Choose Next.js when you need SEO, server-side rendering, or marketing pages with 3D content embedded as islands.

What packages do I need for React Three Fiber postprocessing and physics?▼

Install @react-three/postprocessing with postprocessing for effects, and @react-three/rapier for physics. The full preset also adds gsap, Lenis smooth scrolling, zustand state, leva controls, and maath helpers.

Why is my React Three Fiber canvas not rendering full screen?▼

The canvas container needs explicit sizing. Set html, body, and #root to height 100% with margin 0, and make the canvas container 100vw by 100vh so the Scene component fills the viewport.

Can I optimize GLTF models for a React Three Fiber site?▼

Yes, install @gltf-transform/cli as a dev dependency for asset optimization. For deeper model loading and optimization work, the scaffold hands off to a dedicated asset-pipeline-engineer agent.

Related Skills

Explore More Software Engineering Skills→
jubscodesjubscodes
49

gsp-visuals

Define domain-specific visual direction for imagery, 3D/WebGL, video, and textures.

Community
Advanced
samhvw8samhvw8
10

3d-graphics

Render high-performance 3D scenes in web browsers using Three.js and WebGL/WebGPU.

Community
Advanced
Michae2xlMichae2xl

3d-web-experience

Create interactive 3D web experiences with Three.js and React Three Fiber.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

spline-interactive

Generate React integrations for Spline scenes with state-driven event handlers.

Community
Intermediate