Generate and maintain a playable HTML/JS prototype from feature specs. Builds a persistent browser-based game sandbox that grows across sprints, letting you test mechanics and UI flows before committing to Godot implementation.
This skill generates a playable HTML/JS prototype from approved feature specs, creating a persistent browser-based sandbox that grows across sprints. It lets you test mechanics, UI flows, and system interactions before committing to Godot implementation.
| Field | Value |
|---|---|
| Assigned Agent | design-lead (or user directly) |
| Sprint Phase | Phase A (after specs approved, before Phase B) |
| Directory Scope | docs/prototypes/ |
| Downstream | User play-tests in browser, feeds insights back into feature specs before implementation |
Invoke this skill when the user:
/gameplay-prototype# Prototype a feature:
/gameplay-prototype
# Output:
docs/prototypes/index.html — open in browser to test
docs/prototypes/styles.css — project palette, shared styles
docs/prototypes/app.js — router + shared state
docs/prototypes/features/*.js — one module per prototyped feature
IMPORTANT: Always announce at the start that you are using the Gameplay Prototype skill.
Example: "I'm using the Gameplay Prototype skill to create a playable browser prototype for [feature-name]."
Determine which feature(s) to prototype from user input or context.
Ask the user:
Read the feature spec(s) from docs/features/.
Wait for user response if the feature target is unclear. If the user already specified a feature, proceed directly.
Read supporting docs for informed generation:
docs/features/ — primary inputdocs/art-direction.md — extract the Global Palette hex codes for consistent colors (use the project's actual palette, not generic colors)docs/*-gdd.md, docs/systems-bible.md)docs/prototypes/index.html exists, read it to understand what's already builtCheck if docs/prototypes/index.html exists using Glob.
Create the base scaffold:
docs/prototypes/
index.html — shell: nav sidebar + content area + shared styles
styles.css — project palette from art-direction, basic layout
app.js — simple hash router, shared state, nav rendering
features/ — one JS file per prototyped feature
The scaffold MUST:
docs/art-direction.md)#combat, #crafting, etc.)index.html directly in any browser (file:// protocol)<script type="module">index.html structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project Name] — Prototype</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="sidebar">
<h2>[Project Name]</h2>
<p class="subtitle">Gameplay Prototype</p>
<ul id="nav-list"></ul>
</nav>
<main id="content">
<div id="welcome">
<h1>Gameplay Prototype</h1>
<p>Select a feature from the sidebar to begin testing.</p>
</div>
</main>
<script type="module" src="app.js"></script>
</body>
</html>
styles.css structure:
app.js structure:
// Shared game state — features read/write this to simulate cross-system interaction
export const state = {
// Populated by features as they're added
};
// Route table — maps hash routes to feature modules
const routes = {};
// Register a feature module
export function registerFeature(id, label, module) {
routes[id] = module;
// Add nav entry
}
// Router: listen for hashchange, call init/cleanup
// On hash change: cleanup current feature, init new feature
// Import and register feature modules below
Read index.html, styles.css, app.js, and all files in docs/prototypes/features/ to understand the current state.
List what features are already prototyped and tell the user.
Create docs/prototypes/features/[feature-name].js containing:
init(container, state) function that sets up the feature's DOM in the content areacleanup() function that tears down when navigating awayThe module MUST be deliberately low-fidelity:
console.log for events that would trigger audio/VFXES module pattern:
// docs/prototypes/features/[feature-name].js
// Prototype for: [Feature Name]
// Spec: docs/features/[feature-name].md
let _container = null;
export function init(container, state) {
_container = container;
// Build DOM, attach listeners, render initial state
}
export function cleanup() {
if (_container) _container.innerHTML = '';
_container = null;
// Remove any global listeners
}
Guidelines for feature modules:
init()container.innerHTML or document.createElement to build UIstate object for cross-feature interactionUpdate app.js to:
registerFeature()registerFeature()If the feature interacts with existing prototyped features (e.g., crafting produces items used in combat), wire up the shared state connections:
state objectInstruct the user to open the prototype:
open docs/prototypes/index.html
Provide the full file path appropriate for their OS. Remind them that ES modules require either:
python3 -m http.server from the docs/prototypes/ directory), ORfile:// with module scripts (most modern browsers do with appropriate flags)If modules cause issues with file://, offer to refactor into a single-file IIFE pattern as a fallback.
Summarize what was prototyped:
Ask the user to choose:
When the prototype already exists and the user wants to add a feature:
app.js with the new import and registrationAll prototype files live in:
docs/prototypes/
This directory is: