skills.rest
do-ob-io
do-ob-ioOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/do-ob-io/workspace --skill pwa-web-game-setup
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
aaronbassettaaronbassett
4

dev-specialisms:init-local-tooling

Initialize linting, formatting, type checking, and testing tooling across TypeScript, Rust, and Python projects.

Community
Advanced
gerald-icagerald-ica

3d-web-experience

Develops 3D web experiences using Three.js, React Three Fiber, and Spline for product configurators and immersive websites.

Community
Advanced
Aurora-AIAurora-AI
1

r3f-bridge-engineer

Bridge React Three Fiber components with native Three.js for interactive 3D scenes.

Community
Intermediate
Buntyarora97Buntyarora97

gamestack-js

Provides guidance for building 2D/3D games with Laravel's official and recommended tools.

Community
Intermediate