verekia-setup_skill

Overview

This skill provides Verekia's preferred Next.js Pages Router project setup tailored for React Three Fiber (R3F) game development with TypeScript, Tailwind 4, and Prettier. It includes package dependencies, patched fixes, configuration files, and a concise folder/boilerplate layout so you can bootstrap a WebGPU-ready R3F game quickly. The setup favors static export, Bun as the package manager/runtime, and a minimal surface for game ECS, stores, and R3F helpers.

How this skill works

The skill supplies a complete package.json with pinned dependencies and patched packages (three and detect-gpu) and instructs running bun install to apply patches. It configures Next.js for the Pages Router with output: 'export', integrates Tailwind 4 via a global CSS @import, and provides Prettier options tuned for Tailwind. Boilerplate TypeScript files cover ECS wiring (miniplex), three/webgpu typings, basic stores (zustand), reactive hooks, math helpers, and a ModelContainer component to link three objects to entities. A suggested tsconfig paths entry and .gitignore complete the project hygiene.

When to use it

• Starting a new R3F game or demo using React Three Fiber and WebGPU support
• You prefer Next.js Pages Router with a static export and want minimal client directives
• You want a TypeScript-first structure with pre-wired ECS and zustand stores
• Using Bun as the package manager/runtime and needing patched three/detect-gpu fixes
• Want Tailwind 4 integration without a tailwind.config.js file

Best practices

• Run bun install to ensure patches from the patches/ directory are applied before building
• Keep pages in the pages/ directory and avoid 'use client' directives since Pages Router is used
• Include r3f.d.ts in tsconfig.json so three/webgpu types work with @react-three/fiber
• Use the provided stores and ECS boilerplate as lightweight, editable starting points rather than rigid frameworks
• Keep game logic inside models/systems and entities folders to separate data (ECS) from presentation (components)

Example use cases

• Quickly scaffold an R3F WebGPU demo with entity-management and reactive hooks
• Prototype game mechanics using miniplex ECS and ModelContainer to attach Three objects to entities
• Build a static-exported portfolio demo of interactive 3D scenes served via Next.js
• Start a multiplayer or single-player game where local persistence uses the provided zustand local-store
• Integrate R3F WebGPU features while avoiding runtime GPUShaderStage errors thanks to provided patch