demo-builder

Demo Builder Skill

Purpose

This skill automatically generates playable game prototypes from game concept documents. It:

• Parses concept documents to extract game mechanics, theme, genre
• Generates Three.js game code using the threejs-game skill
• Creates first playable level with scoring, objectives, characters
• Generates assets (textures, colors, basic models)
• Integrates music (Suno AI generation or 8-bit MIDI)
• Produces web-ready demo that runs in browser

Output: Fully functional game demo with HTML/JS/CSS that can be played immediately.

When to Use This Skill

Use this skill when you have:

• ✅ Game concept document (from brainstorming/design phases)
• ✅ Need to validate gameplay quickly with playable prototype
• ✅ Want to pitch game with interactive demo vs. static mockups
• ✅ Require rapid prototyping for playtesting
• ✅ Need proof-of-concept before full development investment

Prerequisites

Required Input

Game Concept Document (from brainstorming or design)

• Location: /docs/*-game-concepts-*.md or /docs/plans/*-design.md
• Must include: Title, description, genre, core mechanics, theme
• Example: fps-game-concepts-market-driven-2025-10-26.md

Dependencies

• threejs-game skill (for 3D game implementation)
• Three.js library (loaded via CDN in generated HTML)
• Optional: Suno API key for music generation (can use MIDI fallback)

Core Workflow

Phase 1: Concept Parsing

1. Load Game Concept

GameConcept = {
  title: string,
  description: string,
  genre: string[],  // ["FPS", "Extraction", "Co-op"]
  theme: string,    // "cyberpunk", "military", "horror", etc.
  core_mechanics: string[],
  target_persona: string,
  price_point: number | "F2P"
}

2. Extract Demo Requirements

DemoRequirements = {
  game_type: "FPS" | "third-person" | "top-down" | "side-scroller",
  camera_type: "first-person" | "third-person" | "fixed" | "isometric",
  movement_type: "WASD" | "mouse" | "touch" | "hybrid",
  primary_mechanic: "shooting" | "extraction" | "survival" | "puzzle",
  color_palette: extractColorPalette(theme),
  character_archetypes: extractCharacters(description),
  objectives: extractObjectives(description),
  music_style: extractMusicStyle(genre, theme)
}