pwa-web-game-setup

Scaffold PWA 3D game projects with React Three Fiber and Three.js.

Updated Jun 14, 2024

Search Tags:#template #scaffolding #pwa #nodejs #three.js #react-three-fiber #3d game

Ready to run

npx skills add https://github.com/do-ob-io/workspace --skill pwa-web-game-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pwa-web-game-setup
Source: https://github.com/do-ob-io/workspace/tree/main/.code/skills/pwa-web-game-setup
Command: npx skills add https://github.com/do-ob-io/workspace --skill pwa-web-game-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill simplifies scaffolding and configuring PWA 3D web game projects by providing a ready-to-use template and a streamlined customization workflow.

Core Features & Use Cases

Template-based Scaffolding: Create a complete PWA 3D game project structure with minimal commands.
Offline-Ready & Landscape-Optimized: Out-of-the-box support for offline gameplay and landscape orientation using React Three Fiber and Three.js.
Easy Customization: Replace placeholders to tailor the project name, description, and assets, then install dependencies.

Quick Start

cp -r /workspace/.code/skills/pwa-web-game-setup/assets/template /workspace/nodejs/game-<name>
Replace placeholders in copied files (e.g., {{project-name}}, {{Short Name}}, and project description)
pnpm install

Frequently Asked Questions about pwa-web-game-setup

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

FAQPage Schema

How do I scaffold a PWA 3D web game project with React Three Fiber?▼

Scaffolding a PWA 3D web game involves copying the provided template into a nodejs directory, replacing placeholder variables for project names, and installing dependencies with pnpm to enable offline gameplay.

What is the best way to make a Three.js web game installable and offline-ready?▼

An offline-ready Three.js game is achieved by using a Vite PWA plugin template that configures service workers and landscape orientation automatically during project scaffolding.

Does this PWA web game template work with pnpm and Vite?▼

Yes, the template requires pnpm for dependency installation and uses Vite alongside its PWA plugin to configure offline capabilities and the development server.

Can I customize the project name and description in the 3D game template?▼

Yes, you can customize the project name and description by replacing specific placeholders such as {{project-name}} and {{Short Name}} within the copied template files.

What are the limitations of using a pre-configured template for 3D web games?▼

A limitation of using this pre-configured template is that project directories must be prefixed with game- under nodejs/ and dependency management is restricted to pnpm.