mirror of
https://github.com/PlayableIntelligence/game-creator.git
synced 2026-09-19 07:34:10 +08:00
refactor: remove separate Test and Review steps from pipeline
QA is now built into every step instead of separate pipeline steps: - Phase 1: Build check (npm run build) - Phase 2: Runtime check (headless Chromium) - Phase 3: Visual review via Playwright MCP - Autofix: Fix subagent repairs any issues found Pipeline is now 5 steps: Scaffold → Design → Audio → Deploy → Monetize Removed: - Step 4 (Add QA tests) and Step 5 (Review architecture) as separate steps - game-qa-runner agent reference - /qa-game and /review-game from primary commands The qa-game.md and review-game.md commands still exist for standalone use. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is **game-creator**, the game studio for the agent internet. It provides skills, commands, and agents for scaffolding, designing, testing, monetizing, and shipping 2D (Phaser 3) and 3D (Three.js) browser games. Monetize with [Play.fun](https://play.fun) (OpenGameProtocol). Works with **OpenClaw** (via ClawHub or manual install) and **Claude Code** (via plugin marketplace). Share your play.fun URL on [Moltbook](https://www.moltbook.com/).
|
||||
This is **game-creator**, the game studio for the agent internet. It provides skills, commands, and agents for scaffolding, designing, deploying, and monetizing 2D (Phaser 3) and 3D (Three.js) browser games. QA (build, runtime, visual review, autofix) runs at every step. Monetize with [Play.fun](https://play.fun) (OpenGameProtocol). Works with **OpenClaw** (via ClawHub or manual install) and **Claude Code** (via plugin marketplace). Share your play.fun URL on [Moltbook](https://www.moltbook.com/).
|
||||
|
||||
## Repository Structure
|
||||
|
||||
@@ -24,21 +24,18 @@ templates/
|
||||
phaser-2d/ # Runnable 2D starter project (Phaser 3)
|
||||
threejs-3d/ # Runnable 3D starter project (Three.js)
|
||||
commands/
|
||||
make-game.md # Full pipeline: scaffold → assets → design → audio → QA → review → deploy → monetize
|
||||
make-game.md # Full pipeline: scaffold → assets → design → audio → deploy → monetize (QA at every step)
|
||||
improve-game.md # Holistic audit + implement highest-impact improvements
|
||||
design-game.md # Visual design audit + improvements
|
||||
add-feature.md # Add feature following patterns
|
||||
add-assets.md # Replace shapes with pixel art sprites
|
||||
add-audio.md # Add Strudel.cc audio
|
||||
qa-game.md # Add Playwright tests
|
||||
monetize-game.md # Play.fun monetization (register, SDK, redeploy)
|
||||
review-game.md # Architecture review
|
||||
submodules/
|
||||
playdotfun/ # Git submodule: github.com/OpusGameLabs/skills
|
||||
agents/
|
||||
game-reviewer.md # Code review agent
|
||||
game-creator.md # Autonomous game creation pipeline
|
||||
game-qa-runner.md # Test execution and failure fixing
|
||||
game-creator.md # Autonomous game creation pipeline with build/visual gates
|
||||
game-deploy.md # Deployment automation
|
||||
examples/
|
||||
flappy-bird/ # Complete example game (see below)
|
||||
@@ -140,7 +137,7 @@ SFX fires on `BIRD_FLAP`, `SCORE_CHANGED`, `BIRD_DIED` via AudioBridge listeners
|
||||
|
||||
## Play.fun (OpenGameProtocol) Integration
|
||||
|
||||
The `/monetize-game` command (and Step 7 of `/make-game`) registers games on [Play.fun](https://play.fun) and integrates the browser SDK.
|
||||
The `/monetize-game` command (and Step 5 of `/make-game`) registers games on [Play.fun](https://play.fun) and integrates the browser SDK.
|
||||
|
||||
**Flow**: Auth → Register game → Add SDK to `index.html` + create `src/playfun.js` → Rebuild → Redeploy → Share play.fun URL on Moltbook
|
||||
|
||||
|
||||
@@ -29,7 +29,8 @@ cp -r game-creator/skills/* ~/.openclaw/skills/
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# Build a complete 2D game (scaffold → design → audio → test → review → deploy → monetize)
|
||||
# Build a complete 2D game (scaffold → design → audio → deploy → monetize)
|
||||
# QA (build + visual review + autofix) runs after every step
|
||||
/game-creator:make-game 2d my-game
|
||||
|
||||
# Or run individual steps:
|
||||
@@ -40,12 +41,6 @@ cp -r game-creator/skills/* ~/.openclaw/skills/
|
||||
|
||||
# Monetize with Play.fun (OpenGameProtocol)
|
||||
/game-creator:monetize-game
|
||||
|
||||
# Add Playwright tests
|
||||
/game-creator:qa-game
|
||||
|
||||
# Review architecture compliance
|
||||
/game-creator:review-game
|
||||
```
|
||||
|
||||
## Architecture
|
||||
@@ -111,22 +106,19 @@ export const COLORS = { sky: 0x4ec0ca, bird: 0xf5d742, ... };
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `/game-creator:make-game [2d\|3d] [name]` | Full pipeline: scaffold, design, audio, test, review, deploy, monetize |
|
||||
| `/game-creator:make-game [2d\|3d] [name]` | Full pipeline: scaffold, design, audio, deploy, monetize (QA at every step) |
|
||||
| `/game-creator:improve-game [focus]` | Deep audit + implement highest-impact improvements |
|
||||
| `/game-creator:design-game [path]` | Audit and improve visual polish |
|
||||
| `/game-creator:add-feature [description]` | Add a feature following architecture patterns |
|
||||
| `/game-creator:add-audio [path]` | Add Strudel.cc music and sound effects |
|
||||
| `/game-creator:qa-game [path]` | Add Playwright automated tests |
|
||||
| `/game-creator:monetize-game [path]` | Register on Play.fun, add SDK, get monetized URL |
|
||||
| `/game-creator:review-game [path]` | Review architecture, performance, code quality |
|
||||
|
||||
## Agents
|
||||
|
||||
| Agent | Description |
|
||||
|-------|-------------|
|
||||
| `game-reviewer` | Reviews codebases for architecture compliance, performance, and monetization readiness |
|
||||
| `game-creator` | Autonomous end-to-end game creation pipeline with build/test gates |
|
||||
| `game-qa-runner` | Runs tests, diagnoses failures, fixes game code, and re-runs until green |
|
||||
| `game-creator` | Autonomous end-to-end game creation pipeline with build/visual gates |
|
||||
| `game-deploy` | Deploys games to GitHub Pages, Vercel, or itch.io with pre/post validation |
|
||||
|
||||
## Example: Flappy Bird
|
||||
@@ -184,16 +176,18 @@ stack(
|
||||
|
||||
Strudel is AGPL-3.0 licensed. Projects using `@strudel/web` must be open source under a compatible license.
|
||||
|
||||
## Testing
|
||||
## Quality Assurance
|
||||
|
||||
Automated QA uses Playwright for canvas game testing:
|
||||
QA is built into every step of the pipeline, not a separate step:
|
||||
|
||||
- **Gameplay verification**: Boot flow, scene transitions, input handling, scoring, game over, restart
|
||||
- **Visual regression**: Screenshot comparison per scene (with tolerance for animated elements)
|
||||
- **Performance**: Load time budgets, FPS measurement, canvas dimensions
|
||||
- **Accessibility**: axe-core HTML audits
|
||||
1. **Build check**: `npm run build` catches compilation errors
|
||||
2. **Runtime check**: Headless Chromium checks for WebGL errors, exceptions, and console errors
|
||||
3. **Visual review**: Playwright MCP takes screenshots and identifies visual issues
|
||||
4. **Autofix**: Any issues found trigger a fix subagent that automatically repairs the code
|
||||
|
||||
For interactive visual QA, use [Playwright MCP](https://github.com/anthropics/claude-code/blob/main/docs/mcp.md):
|
||||
This approach catches problems immediately when they're introduced, not at the end of the pipeline.
|
||||
|
||||
For interactive visual QA during development, install [Playwright MCP](https://github.com/anthropics/claude-code/blob/main/docs/mcp.md):
|
||||
|
||||
```bash
|
||||
claude mcp add playwright npx '@playwright/mcp@latest'
|
||||
|
||||
+42
-108
@@ -1,11 +1,11 @@
|
||||
---
|
||||
description: Autonomous end-to-end game creation pipeline. Takes a game concept and engine choice, then runs scaffold, design, audio, QA, and review with build/test gates instead of manual confirmation.
|
||||
capabilities: ["scaffold-game", "visual-design", "audio-integration", "qa-testing", "architecture-review", "autonomous-pipeline"]
|
||||
description: Autonomous end-to-end game creation pipeline. Takes a game concept and engine choice, then runs scaffold, design, audio, deploy, and monetize with build/visual gates instead of manual confirmation.
|
||||
capabilities: ["scaffold-game", "visual-design", "audio-integration", "deploy", "monetize", "autonomous-pipeline"]
|
||||
---
|
||||
|
||||
# Game Creator Agent
|
||||
|
||||
You are an autonomous game creation pipeline. Unlike the `/make-game` command (which pauses for user confirmation between steps), you run the full scaffold-to-review pipeline with automated build/test gates. You produce a complete, tested, deployable browser game from a concept description.
|
||||
You are an autonomous game creation pipeline. Unlike the `/make-game` command (which pauses for user confirmation between steps), you run the full scaffold-to-monetize pipeline with automated build/visual gates. You produce a complete, deployable, monetized browser game from a concept description.
|
||||
|
||||
## Required Skills
|
||||
|
||||
@@ -14,8 +14,6 @@ Load these skills before starting:
|
||||
- **`phaser`** or **`threejs-game`** — Engine-specific architecture patterns (chosen based on engine input)
|
||||
- **`game-designer`** — Visual polish: gradients, particles, juice, transitions
|
||||
- **`game-audio`** — Procedural audio: Strudel.cc BGM + Web Audio SFX
|
||||
- **`game-qa`** — Playwright test generation
|
||||
- **`game-architecture`** — Reference architecture patterns for validation
|
||||
- **`playdotfun`** — Play.fun (OpenGameProtocol) monetization integration
|
||||
|
||||
## Input
|
||||
@@ -36,27 +34,25 @@ The agent expects:
|
||||
1. Set up the project (template copy, npm install, dev server)
|
||||
2. Create and track pipeline tasks using `TaskCreate`/`TaskUpdate`
|
||||
3. Delegate each code-writing step to a `Task` subagent
|
||||
4. Run the Verification Protocol after each code-modifying step
|
||||
4. Run the Verification Protocol (build + visual review + autofix) after each code-modifying step
|
||||
5. Continue automatically without user confirmation
|
||||
|
||||
**What stays in the main thread:**
|
||||
- Step 0: Parse input, create todo list
|
||||
- Step 1 (infrastructure only): Copy template, npm install, playwright install, create `scripts/verify-runtime.mjs`, start dev server
|
||||
- Verification protocol runs (build + runtime checks)
|
||||
- Verification protocol runs (build + runtime + visual review + autofix)
|
||||
|
||||
**What goes to subagents** (via `Task` tool):
|
||||
- Step 1 (game implementation): Transform template into the actual game concept
|
||||
- Step 1.5: Pixel art sprites and backgrounds (2D only)
|
||||
- Step 2: Visual polish
|
||||
- Step 3: Audio integration
|
||||
- Step 4: QA test generation
|
||||
- Step 5: Architecture review
|
||||
|
||||
Each subagent receives: step instructions, relevant skill name, project path, engine type, dev server port, and game concept description.
|
||||
|
||||
## Verification Protocol
|
||||
|
||||
Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3, 4). It has two phases:
|
||||
Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3). It has three phases:
|
||||
|
||||
### Phase 1 — Build Check
|
||||
|
||||
@@ -64,7 +60,7 @@ Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3, 4). I
|
||||
cd <project-dir> && npm run build
|
||||
```
|
||||
|
||||
If the build fails, the step has not passed. Proceed to retry.
|
||||
If the build fails, proceed to autofix.
|
||||
|
||||
### Phase 2 — Runtime Check
|
||||
|
||||
@@ -74,11 +70,27 @@ cd <project-dir> && node scripts/verify-runtime.mjs
|
||||
|
||||
This script (created during Step 1) launches headless Chromium, loads the game, and checks for runtime errors (WebGL failures, uncaught exceptions, console errors). It exits 0 on success, 1 on failure with error details.
|
||||
|
||||
### Retry Logic
|
||||
If the runtime check fails, proceed to autofix.
|
||||
|
||||
If either phase fails:
|
||||
1. Launch a **fix subagent** via `Task` tool with the error output and instructions to fix
|
||||
2. Re-run the Verification Protocol
|
||||
### Phase 3 — Visual Review via Playwright MCP
|
||||
|
||||
Use the Playwright MCP to visually review the game:
|
||||
|
||||
1. **Take a screenshot** of the game running in the browser
|
||||
2. **Assess visually**: Is the game rendering correctly? Are there visual bugs, layout issues, or broken elements?
|
||||
3. **Identify issues**: Note any visual problems that need fixing (e.g., elements off-screen, missing graphics, broken UI, wrong colors)
|
||||
|
||||
If visual issues are found, proceed to autofix.
|
||||
|
||||
### Autofix Logic
|
||||
|
||||
When any phase fails or visual issues are found:
|
||||
|
||||
1. Launch a **fix subagent** via `Task` tool with:
|
||||
- The error output (for build/runtime failures)
|
||||
- The screenshot and visual issues description (for visual review)
|
||||
- Instructions to fix the specific issues
|
||||
2. Re-run the Verification Protocol (all three phases)
|
||||
3. Up to **3 total attempts** per step (1 original + 2 retries)
|
||||
4. If all 3 attempts fail, **log the failure, skip the step, and continue** with the next step. Include the failure details in the final report.
|
||||
|
||||
@@ -94,11 +106,9 @@ Create all pipeline tasks upfront using `TaskCreate`:
|
||||
2. Add pixel art sprites and backgrounds (2D only; marked N/A for 3D)
|
||||
3. Add visual polish (particles, transitions, juice)
|
||||
4. Add audio (BGM + SFX)
|
||||
5. Add QA tests
|
||||
6. Run architecture review
|
||||
7. Monetize with Play.fun (register game, add SDK)
|
||||
5. Monetize with Play.fun (add SDK)
|
||||
|
||||
This provides full visibility into pipeline progress.
|
||||
This provides full visibility into pipeline progress. Quality assurance (build, runtime, visual review, autofix) is built into each step.
|
||||
|
||||
### Step 1: Scaffold
|
||||
|
||||
@@ -286,74 +296,13 @@ Mark task 4 as `completed`.
|
||||
|
||||
**Gate**: Verification Protocol must pass. If it fails after 3 attempts, log failure, skip, continue.
|
||||
|
||||
### Step 4: QA
|
||||
### Step 4: Monetize with Play.fun
|
||||
|
||||
Mark task 5 as `in_progress`.
|
||||
|
||||
Launch a `Task` subagent:
|
||||
|
||||
> You are implementing Step 4 (QA Tests) of the game creation pipeline.
|
||||
>
|
||||
> **Project path**: `<project-dir>`
|
||||
> **Engine**: `<2d|3d>`
|
||||
> **Dev server port**: `<port>`
|
||||
> **Skill to load**: `game-qa`
|
||||
>
|
||||
> Apply the game-qa skill:
|
||||
> 1. Audit testability: check for `window.__GAME__`, `window.__GAME_STATE__`, `window.__EVENT_BUS__` exposure
|
||||
> 2. Ensure Playwright is installed (it should be)
|
||||
> 3. Create `playwright.config.js` with the correct dev server port
|
||||
> 4. Expose game internals on window if not already done
|
||||
> 5. Write tests: boot, scene transitions, scoring, game over, visual regression, performance
|
||||
> 6. Run `npx playwright test` and handle first-run snapshot generation
|
||||
> 7. Add npm scripts if not present: `test`, `test:ui`, `test:headed`, `test:update-snapshots`
|
||||
>
|
||||
> You MAY run `npx playwright test` to validate your tests. Fix failures (prefer fixing game code over weakening tests).
|
||||
|
||||
**After subagent returns**, run the Verification Protocol (build check only).
|
||||
|
||||
Mark task 5 as `completed`.
|
||||
|
||||
**Gate**: `npx playwright test` must pass all tests. If tests fail:
|
||||
1. Read the failure output and stack traces
|
||||
2. Launch a fix subagent to classify each failure as game bug, test bug, or config issue
|
||||
3. Fix game code first (prefer fixing the game over weakening tests)
|
||||
4. Re-run tests. Retry up to 3 iterations.
|
||||
|
||||
### Step 5: Architecture Review
|
||||
|
||||
Mark task 6 as `in_progress`.
|
||||
|
||||
Launch a `Task` subagent:
|
||||
|
||||
> You are implementing Step 5 (Architecture Review) of the game creation pipeline.
|
||||
>
|
||||
> **Project path**: `<project-dir>`
|
||||
> **Engine**: `<2d|3d>`
|
||||
> **Skill to load**: `game-architecture`
|
||||
>
|
||||
> Produce a structured architecture review:
|
||||
> 1. Identify the engine, read package.json, main entry, index.html
|
||||
> 2. Check architecture: EventBus, GameState, Constants, Orchestrator, directory structure, event constants
|
||||
> 3. Check performance: delta time capping, object pooling, resource disposal, event cleanup, asset loading
|
||||
> 4. Check code quality: no circular deps, single responsibility, error handling, consistent naming
|
||||
> 5. Check monetization readiness: scoring, session tracking, anti-cheat potential
|
||||
>
|
||||
> Return a structured report with scores for Architecture (out of 6), Performance (out of 5), Code Quality (out of 4), and Monetization Readiness (out of 4). Include top recommendations and what's working well.
|
||||
>
|
||||
> This is a read-only review. Do NOT modify any code.
|
||||
|
||||
**No gate** — this step produces a report, not code changes.
|
||||
|
||||
Mark task 6 as `completed`.
|
||||
|
||||
### Step 6: Monetize with Play.fun
|
||||
|
||||
Mark task 7 as `in_progress`.
|
||||
|
||||
Launch a `Task` subagent:
|
||||
|
||||
> You are implementing Step 6 (Monetize) of the game creation pipeline.
|
||||
> You are implementing Step 4 (Monetize) of the game creation pipeline.
|
||||
>
|
||||
> **Project path**: `<project-dir>`
|
||||
> **Engine**: `<2d|3d>`
|
||||
@@ -378,7 +327,7 @@ Launch a `Task` subagent:
|
||||
|
||||
**Note**: The actual game registration on Play.fun requires authentication and happens separately (either during `/make-game` deploy step when run interactively, or via `/game-creator:monetize-game`). The SDK integration is designed to gracefully no-op if the game isn't registered yet.
|
||||
|
||||
Mark task 7 as `completed`.
|
||||
Mark task 5 as `completed`.
|
||||
|
||||
**Gate**: Verification Protocol must pass. If it fails after 3 attempts, log failure, skip, continue.
|
||||
|
||||
@@ -386,7 +335,7 @@ Mark task 7 as `completed`.
|
||||
|
||||
- **Build failures**: The Verification Protocol handles this — fix subagent reads compiler/bundler output, fixes code, retries. Up to 3 attempts per step.
|
||||
- **Runtime failures**: Phase 2 of the Verification Protocol catches WebGL errors, uncaught exceptions, and console errors that `npm run build` misses.
|
||||
- **Test failures**: Diagnose root cause via fix subagent, fix game code (not tests), re-run. Up to 3 iterations.
|
||||
- **Visual issues**: Phase 3 of the Verification Protocol uses Playwright MCP to take screenshots and identify visual problems. Fix subagent addresses issues before continuing.
|
||||
- **Blocked steps**: If a step fails all retries, log the failure, mark the task with failure details, skip it, and continue with the next step. Include the failure in the final report.
|
||||
- **Missing dependencies**: Run `npm install` if imports fail. Check that `package.json` includes all required packages.
|
||||
|
||||
@@ -400,34 +349,20 @@ When the pipeline completes, produce a structured report that includes task comp
|
||||
### Steps
|
||||
| Step | Task | Status | Notes |
|
||||
|------|------|--------|-------|
|
||||
| Scaffold | #1 | ✅ Pass | Built successfully, runtime verified |
|
||||
| Scaffold | #1 | ✅ Pass | Built successfully, runtime + visual verified |
|
||||
| Pixel Art | #2 | ✅ Pass | Sprites and backgrounds created |
|
||||
| Design | #3 | ✅ Pass | Added gradients, particles, transitions |
|
||||
| Audio | #4 | ⚠️ Skipped | Failed after 3 retries: [error summary] |
|
||||
| QA | #5 | ✅ Pass | 15/15 tests passing |
|
||||
| Review | #6 | ✅ Done | Score: 9.2/10 |
|
||||
| Monetize | #7 | ✅ Pass | Play.fun SDK integrated |
|
||||
| Monetize | #5 | ✅ Pass | Play.fun SDK integrated |
|
||||
|
||||
### Verification Results
|
||||
| Step | Build | Runtime | Attempts |
|
||||
|------|-------|---------|----------|
|
||||
| Scaffold | ✅ | ✅ | 1 |
|
||||
| Pixel Art | ✅ | ✅ | 2 |
|
||||
| Design | ✅ | ✅ | 1 |
|
||||
| Audio | ❌ | — | 3 |
|
||||
| QA | ✅ | — | 1 |
|
||||
| Monetize | ✅ | ✅ | 1 |
|
||||
|
||||
### Test Results
|
||||
- Total: 15
|
||||
- Passed: 15
|
||||
- Failed: 0
|
||||
|
||||
### Review Scores
|
||||
- Architecture: 10/10
|
||||
- Performance: 9/10
|
||||
- Code Quality: 9/10
|
||||
- Event Coverage: 8/10
|
||||
| Step | Build | Runtime | Visual | Attempts |
|
||||
|------|-------|---------|--------|----------|
|
||||
| Scaffold | ✅ | ✅ | ✅ | 1 |
|
||||
| Pixel Art | ✅ | ✅ | ✅ | 2 |
|
||||
| Design | ✅ | ✅ | ✅ | 1 |
|
||||
| Audio | ❌ | — | — | 3 |
|
||||
| Monetize | ✅ | ✅ | ✅ | 1 |
|
||||
|
||||
### Files Created
|
||||
<file inventory>
|
||||
@@ -435,7 +370,6 @@ When the pipeline completes, produce a structured report that includes task comp
|
||||
### Run Instructions
|
||||
cd <project-dir>
|
||||
npm run dev # Development server
|
||||
npm run test # Run tests
|
||||
npm run build # Production build
|
||||
npm run verify # Runtime verification
|
||||
```
|
||||
|
||||
+45
-104
@@ -1,23 +1,23 @@
|
||||
---
|
||||
description: Full guided pipeline — scaffold, design, audio, test, review, and deploy a game from scratch
|
||||
description: Full guided pipeline — scaffold, design, audio, deploy, and monetize a game from scratch
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[2d|3d] [game-name] OR [tweet-url]"
|
||||
---
|
||||
|
||||
# Make Game (Full Pipeline)
|
||||
|
||||
Build a complete browser game from scratch, step by step. This command walks you through the entire pipeline — from an empty folder to a deployed, live game. No game development experience needed.
|
||||
Build a complete browser game from scratch, step by step. This command walks you through the entire pipeline — from an empty folder to a deployed, monetized game. No game development experience needed.
|
||||
|
||||
**What you'll get:**
|
||||
1. A fully scaffolded game project with clean architecture
|
||||
2. Pixel art sprites — recognizable characters, enemies, and items (optional, replaces geometric shapes)
|
||||
3. Visual polish — gradients, particles, transitions, juice
|
||||
4. Chiptune music and retro sound effects (no audio files needed)
|
||||
5. Automated tests that catch bugs when you make changes
|
||||
6. An architecture review with a quality score and improvement tips
|
||||
7. Live deployment to GitHub Pages with a public URL
|
||||
8. Monetization via Play.fun — points tracking, leaderboards, wallet connect, and a play.fun URL to share on Moltbook
|
||||
9. Future changes auto-deploy on `git push`
|
||||
5. Live deployment to GitHub Pages with a public URL
|
||||
6. Monetization via Play.fun — points tracking, leaderboards, wallet connect, and a play.fun URL to share on Moltbook
|
||||
7. Future changes auto-deploy on `git push`
|
||||
|
||||
**Quality assurance is built into every step** — each code-modifying step runs build verification, visual review via Playwright MCP, and autofixes any issues found.
|
||||
|
||||
## Orchestration Model
|
||||
|
||||
@@ -26,28 +26,26 @@ Build a complete browser game from scratch, step by step. This command walks you
|
||||
1. Set up the project (template copy, npm install, dev server)
|
||||
2. Create and track pipeline tasks using `TaskCreate`/`TaskUpdate`
|
||||
3. Delegate each code-writing step to a `Task` subagent
|
||||
4. Run the Verification Protocol after each code-modifying step
|
||||
4. Run the Verification Protocol (build + visual review + autofix) after each code-modifying step
|
||||
5. Report results to the user between steps
|
||||
|
||||
**What stays in the main thread:**
|
||||
- Step 0: Parse arguments, create todo list
|
||||
- Step 1 (infrastructure only): Copy template, npm install, playwright install, create `scripts/verify-runtime.mjs`, start dev server
|
||||
- Verification protocol runs (build + runtime checks)
|
||||
- Step 6 (deploy): Interactive auth requires user back-and-forth
|
||||
- Verification protocol runs (build + runtime + visual review + autofix)
|
||||
- Step 4 (deploy): Interactive auth requires user back-and-forth
|
||||
|
||||
**What goes to subagents** (via `Task` tool):
|
||||
- Step 1 (game implementation): Transform template into the actual game concept
|
||||
- Step 1.5: Pixel art sprites and backgrounds
|
||||
- Step 2: Visual polish
|
||||
- Step 3: Audio integration
|
||||
- Step 4: QA test generation
|
||||
- Step 5: Architecture review
|
||||
|
||||
Each subagent receives: step instructions, relevant skill name, project path, engine type, dev server port, and game concept description.
|
||||
|
||||
## Verification Protocol
|
||||
|
||||
Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3, 4). It has two phases:
|
||||
Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3). It has three phases:
|
||||
|
||||
### Phase 1 — Build Check
|
||||
|
||||
@@ -55,7 +53,7 @@ Run this protocol after **every code-modifying step** (Steps 1, 1.5, 2, 3, 4). I
|
||||
cd <project-dir> && npm run build
|
||||
```
|
||||
|
||||
If the build fails, the step has not passed. Proceed to retry.
|
||||
If the build fails, proceed to autofix.
|
||||
|
||||
### Phase 2 — Runtime Check
|
||||
|
||||
@@ -65,14 +63,32 @@ cd <project-dir> && node scripts/verify-runtime.mjs
|
||||
|
||||
This script (created during Step 1) launches headless Chromium, loads the game, and checks for runtime errors (WebGL failures, uncaught exceptions, console errors). It exits 0 on success, 1 on failure with error details.
|
||||
|
||||
### Retry Logic
|
||||
If the runtime check fails, proceed to autofix.
|
||||
|
||||
If either phase fails:
|
||||
1. Launch a **fix subagent** via `Task` tool with the error output and instructions to fix
|
||||
2. Re-run the Verification Protocol
|
||||
### Phase 3 — Visual Review via Playwright MCP
|
||||
|
||||
Use the Playwright MCP to visually review the game:
|
||||
|
||||
1. **Take a screenshot** of the game running in the browser
|
||||
2. **Assess visually**: Is the game rendering correctly? Are there visual bugs, layout issues, or broken elements?
|
||||
3. **Identify issues**: Note any visual problems that need fixing (e.g., elements off-screen, missing graphics, broken UI, wrong colors)
|
||||
|
||||
If visual issues are found, proceed to autofix.
|
||||
|
||||
### Autofix Logic
|
||||
|
||||
When any phase fails or visual issues are found:
|
||||
|
||||
1. Launch a **fix subagent** via `Task` tool with:
|
||||
- The error output (for build/runtime failures)
|
||||
- The screenshot and visual issues description (for visual review)
|
||||
- Instructions to fix the specific issues
|
||||
2. Re-run the Verification Protocol (all three phases)
|
||||
3. Up to **3 total attempts** per step (1 original + 2 retries)
|
||||
4. If all 3 attempts fail, report the failure to the user and ask whether to skip or abort
|
||||
|
||||
**Important**: Always fix issues before proceeding to the next step. The autofix loop ensures each step produces working, visually correct output.
|
||||
|
||||
## Instructions
|
||||
|
||||
### Step 0: Initialize pipeline
|
||||
@@ -114,12 +130,10 @@ Create all pipeline tasks upfront using `TaskCreate`:
|
||||
2. Add pixel art sprites and backgrounds (2D only; marked N/A for 3D)
|
||||
3. Add visual polish (particles, transitions, juice)
|
||||
4. Add audio (BGM + SFX)
|
||||
5. Add QA tests
|
||||
6. Run architecture review
|
||||
7. Deploy to GitHub Pages
|
||||
8. Monetize with Play.fun (register on OpenGameProtocol, add SDK, redeploy)
|
||||
5. Deploy to GitHub Pages
|
||||
6. Monetize with Play.fun (register on OpenGameProtocol, add SDK, redeploy)
|
||||
|
||||
This gives the user full visibility into pipeline progress at all times.
|
||||
This gives the user full visibility into pipeline progress at all times. Quality assurance (build, runtime, visual review, autofix) is built into each step, not a separate task.
|
||||
|
||||
### Step 1: Scaffold the game
|
||||
|
||||
@@ -338,88 +352,16 @@ Launch a `Task` subagent with these instructions:
|
||||
> Your game now has music and sound effects! Click/tap once to activate audio, then you'll hear the music.
|
||||
> Note: Strudel is AGPL-3.0, so your project needs a compatible open source license.
|
||||
>
|
||||
> **Next up: automated tests.** I'll add Playwright tests that verify your game boots, scenes work, and scoring functions — like a safety net for future changes. Ready?
|
||||
> **Next up: deploy to the web.** I'll help you set up GitHub Pages so your game gets a public URL. Future changes auto-deploy when you push. Ready?
|
||||
|
||||
Mark task 4 as `completed`.
|
||||
|
||||
**Wait for user confirmation before proceeding.**
|
||||
|
||||
### Step 4: Add QA tests
|
||||
### Step 4: Deploy to GitHub Pages
|
||||
|
||||
Mark task 5 as `in_progress`.
|
||||
|
||||
Launch a `Task` subagent with these instructions:
|
||||
|
||||
> You are implementing Step 4 (QA Tests) of the game creation pipeline.
|
||||
>
|
||||
> **Project path**: `<project-dir>`
|
||||
> **Engine**: `<2d|3d>`
|
||||
> **Dev server port**: `<port>`
|
||||
> **Skill to load**: `game-qa`
|
||||
>
|
||||
> Apply the game-qa skill:
|
||||
> 1. Audit testability: check for `window.__GAME__`, `window.__GAME_STATE__`, `window.__EVENT_BUS__` exposure
|
||||
> 2. Ensure Playwright is installed (it should be — the orchestrator already ran `npx playwright install chromium`)
|
||||
> 3. Create `playwright.config.js` with the correct dev server port
|
||||
> 4. Expose game internals on window if not already done
|
||||
> 5. Write tests: boot, scene transitions, scoring, game over, visual regression, performance
|
||||
> 6. Run `npx playwright test` and handle first-run snapshot generation
|
||||
> 7. Add npm scripts if not present: `test`, `test:ui`, `test:headed`, `test:update-snapshots`
|
||||
>
|
||||
> You MAY run `npx playwright test` to validate your tests. Fix failures (prefer fixing game code over weakening tests).
|
||||
|
||||
**After subagent returns**, run the Verification Protocol (build check only — runtime check is not needed since the subagent already ran tests).
|
||||
|
||||
**Tell the user:**
|
||||
> Your game now has automated tests! Here's how to run them:
|
||||
> - `npm test` — headless (fast, for CI)
|
||||
> - `npm run test:headed` — watch the browser run the tests
|
||||
> - `npm run test:ui` — interactive dashboard
|
||||
>
|
||||
> **Next step: architecture review.** I'll check your code structure, performance patterns, and give you a quality score with specific improvements. Ready?
|
||||
|
||||
Mark task 5 as `completed`.
|
||||
|
||||
**Wait for user confirmation before proceeding.**
|
||||
|
||||
### Step 5: Review architecture
|
||||
|
||||
Mark task 6 as `in_progress`.
|
||||
|
||||
Launch a `Task` subagent with these instructions:
|
||||
|
||||
> You are implementing Step 5 (Architecture Review) of the game creation pipeline.
|
||||
>
|
||||
> **Project path**: `<project-dir>`
|
||||
> **Engine**: `<2d|3d>`
|
||||
> **Skill to load**: `game-architecture`
|
||||
>
|
||||
> Produce a structured architecture review:
|
||||
> 1. Identify the engine, read package.json, main entry, index.html
|
||||
> 2. Check architecture: EventBus, GameState, Constants, Orchestrator, directory structure, event constants
|
||||
> 3. Check performance: delta time capping, object pooling, resource disposal, event cleanup, asset loading
|
||||
> 4. Check code quality: no circular deps, single responsibility, error handling, consistent naming
|
||||
> 5. Check monetization readiness: scoring, session tracking, anti-cheat potential
|
||||
>
|
||||
> Return a structured report with scores for Architecture (out of 6), Performance (out of 5), Code Quality (out of 4), and Monetization Readiness (out of 4). Include top recommendations and what's working well.
|
||||
>
|
||||
> This is a read-only review. Do NOT modify any code.
|
||||
|
||||
**No Verification Protocol** — this step produces a report, not code changes.
|
||||
|
||||
**Tell the user** the review results:
|
||||
> Your game passed architecture review! Here's the summary: [key scores]
|
||||
>
|
||||
> **Final step: deploy to the web.** I'll help you set up GitHub Pages so your game gets a public URL. Future changes auto-deploy when you push. Ready?
|
||||
|
||||
Mark task 6 as `completed`.
|
||||
|
||||
**Wait for user confirmation before proceeding.**
|
||||
|
||||
### Step 6: Deploy to GitHub Pages
|
||||
|
||||
Mark task 7 as `in_progress`.
|
||||
|
||||
Load the game-deploy skill. **This step stays in the main thread** because it requires interactive authentication and user back-and-forth.
|
||||
|
||||
#### 6a. Check prerequisites
|
||||
@@ -537,13 +479,13 @@ Add a `deploy` script to `package.json` so future deploys are one command:
|
||||
>
|
||||
> **Next up: monetization.** I'll register your game on Play.fun (OpenGameProtocol), add the points SDK, and redeploy. Players earn rewards, you get a play.fun URL to share on Moltbook. Ready?
|
||||
|
||||
Mark task 7 as `completed`.
|
||||
Mark task 5 as `completed`.
|
||||
|
||||
**Wait for user confirmation before proceeding.**
|
||||
|
||||
### Step 7: Monetize with Play.fun
|
||||
### Step 5: Monetize with Play.fun
|
||||
|
||||
Mark task 8 as `in_progress`.
|
||||
Mark task 6 as `in_progress`.
|
||||
|
||||
**This step stays in the main thread** because it requires interactive authentication.
|
||||
|
||||
@@ -677,7 +619,7 @@ Wait ~30 seconds, then verify the deployment is live.
|
||||
>
|
||||
> **Share on Moltbook**: Post your game URL to [moltbook.com](https://www.moltbook.com/) — 770K+ agents ready to play and upvote.
|
||||
|
||||
Mark task 8 as `completed`.
|
||||
Mark task 6 as `completed`.
|
||||
|
||||
### Pipeline Complete!
|
||||
|
||||
@@ -688,8 +630,7 @@ Tell the user:
|
||||
> - **Pixel art sprites** — recognizable characters (if chosen) or clean geometric shapes
|
||||
> - **Visual polish** — gradients, particles, transitions, juice
|
||||
> - **Music and SFX** — chiptune background music and retro sound effects
|
||||
> - **Automated tests** — safety net for future changes
|
||||
> - **Quality review** — scored and prioritized improvements
|
||||
> - **Quality assured** — each step verified with build, runtime, and visual review
|
||||
> - **Live on the web** — deployed to GitHub Pages with a public URL
|
||||
> - **Monetized on Play.fun** — points tracking, leaderboards, and wallet connect
|
||||
>
|
||||
@@ -699,5 +640,5 @@ Tell the user:
|
||||
> - Add new gameplay features: `/game-creator:add-feature [describe what you want]`
|
||||
> - Upgrade to pixel art (if using shapes): `/game-creator:add-assets`
|
||||
> - Launch a playcoin for your game (token rewards for players)
|
||||
> - Keep iterating! Run any step again: `/game-creator:design-game`, `/game-creator:add-audio`, `/game-creator:qa-game`
|
||||
> - Keep iterating! Run any step again: `/game-creator:design-game`, `/game-creator:add-audio`
|
||||
> - Redeploy after changes: `npm run deploy`
|
||||
|
||||
Reference in New Issue
Block a user