
scaffold-gateables
Add gateable features to an existing browser game — skin picker, continue-after-death, bonus mode, save slots, daily challenge. Monetization-agnostic scaffolding that leaves clean hooks for any paywall, subscription, or entitlement layer. Features are scaffolded at silver and gold tiers only (bronze is the default everyone gets). Use when the user says "add gateables", "scaffold monetizable features", "add skin picker", "add continue-after-death", "make my game monetizable", or "add premium hooks". Do NOT use for Play.fun SDK integration (use monetize-game) or generic gameplay features (use add-feature).
- Installs
- 584
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/playableintelligence/game-creator --skill scaffold-gateables- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads scaffold-gateables automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Performance Notes
- Take your time to understand the game before proposing features
- Quality is more important than speed — wrong gateables hurt the game permanently
- Do not skip the locked-path verification in Step 4
Scaffold Gateables
Add gateable features to an existing game. This skill produces hooks — skin pickers, continue-after-death flows, bonus modes, save slots, daily challenges — each wired through EventBus with a single capability-check seam (isEntitled(key)). It does NOT add any specific monetization SDK (Play.fun, sub.games, Stripe, etc.); it produces the scaffolding that any paywall, subscription, or entitlement layer can later switch on.
The default state is everything locked — isEntitled(key) returns false for all keys. The game must feel completely normal in that state. When a downstream monetization layer flips an entitlement on, the gateable feature lights up.
Core Principles
Use these to reason about what to propose and what to reject. They are rules, not guidelines.
- Never gate the core loop. If the game is about jumping, everyone jumps. Gate skins, not gravity.
- Prefer additive over subtractive. Add a bonus mode; don't shrink the free mode. Free players never feel punished.
- Match the game's rhythm. Short sessions → session-scoped perks (continue, daily skin, daily challenge seed). Long-form → persistence (save slots, unlock tree, bonus chapters).
- Propose 2–3 gateables at silver and gold only. Bronze is the default — every player gets the bronze experience by default, so no feature is scaffolded there. Aim for one or two silver conveniences and one gold spectacle. Numbers are targets — suggest what actually fits the game.
- Every gateable must degrade cleanly. With
isEntitledreturningfalse, the game must feel normal — not broken, not missing.
Tier Vocabulary
Use game-standard progression labels: bronze / silver / gold. This keeps the skill monetization-agnostic and reads naturally to players.
Bronze is the default tier — every player is bronze by default. The bronze experience IS the core game loop that everyone always gets. No feature is scaffolded at bronze; scaffold-gateables only produces features at silver and gold.
The downstream integration layer maps silver/gold to its own paid tier system:
| scaffold-gateables | sub.games | Play.fun (points-based) |
|---|---|---|
| silver | supporter ($3–8/mo) | mid-threshold points |
| gold | founder ($150/yr) | high-threshold points |
State this mapping in the Step 2 output so the handoff to /subgames or /monetize-game is explicit.
Instructions
The user wants to add gateables to the game at $ARGUMENTS (or the current directory if no path given). Optional hint tokens after the path (e.g., skins continue) bias the proposal.
Step 1: Understand the game
- Read
package.json— detect engine (phaser→ Phaser,three→ Three.js). - Read
src/core/Constants.js,src/core/EventBus.js,src/core/GameState.js. - Read
src/main.jsto findwindow.render_game_to_text()and the orchestrator entry point. - Read
progress.mdat the project root if it exists (written by the/viral-gamepipeline). - Read the primary scene/system files to understand the core loop.
Then tell the creator one sentence:
The core loop is
<verb>— I will not gate it. Gateables will be additive features that layer on top.
Step 2: Propose features
Generate 2–3 candidate gateables at silver and gold tiers anchored in the five principles. Present as a Markdown table:
| Feature | Tier | Entitlement key | What it adds | Locked path | EventBus events | GameState additions |
|---|---|---|---|---|---|---|
| Skin picker | silver | premium_skins | 5 cosmetic variants via a picker on GameOverScene | Default skin only; button greyed out | skin:selected, skin:unlocked | selectedSkin: 'default', unlockedSkins: ['default'] (persist through reset) |
| Continue after death | silver | continue | One continue per session offered on death | No continue prompt; immediate restart | continue:offered, continue:accepted | continueOffered: false, usedContinue: false (clear on reset) |
| Daily challenge mode | gold | daily_challenge | Unique seeded run each day with its own leaderboard | No daily challenge menu visible | daily:opened, daily:completed | dailyChallengeSeed: null, dailyBestScore: 0 (persist through reset) |
Anchor picks in the principles. Reject any suggestion that gates the core loop. Never propose bronze-tier features — bronze is the default everyone gets. Prefer cosmetic > convenience > bonus > persistence for short-session games; flip the order for long-form.
In interactive mode (user-invoked skill): wait for creator confirmation before implementing. Let them drop, swap, or tweak suggestions.
In pipeline mode (called from /viral-game Step 1.25): auto-pick the top 2–3 and continue without prompting.
Step 3: Implement
Follow this order strictly:
3a. Create src/systems/Entitlements.js — the single capability-check seam:
// src/systems/Entitlements.js
// Single capability check for all gateable features.
// Returns false by default — every gateable must degrade cleanly when locked.
// Wire this to your monetization layer (sub.games, Play.fun, custom paywall)
// by replacing the body with real checks. See `/monetize-game` or `/subgames`.
export function isEntitled(key) {
// TODO: wire to monetization layer.
return false;
}
3b. Add events to src/core/EventBus.js (append-only, domain:action form).
3c. Add state fields to src/core/GameState.js. Update reset() to preserve persistent fields (e.g., unlockedSkins, bonusModeUnlocked) and clear transient ones (e.g., usedContinue, continueOffered).
3d. Add constants to src/core/Constants.js under a new GATEABLES section (skin list, continue cooldown, bonus mode config, etc.).
3e. Create gateable modules in the existing src/ subdirectories matching the game's layout:
src/ui/SkinPicker.js(Phaser scene or Three.js panel)src/systems/ContinueFlow.jssrc/systems/BonusMode.js- etc.
Each gateable's entry point calls isEntitled(key) and branches:
import { isEntitled } from '../systems/Entitlements.js';
function openSkinPicker() {
if (!isEntitled('premium_skins')) {
// Locked path: greyed-out button with lock icon, no picker opens.
// Default skin remains selected. Game continues normally.
return;
}
// Entitled path: open the picker scene.
scene.scene.launch('SkinPickerScene');
}
Never create a pre-gameplay title screen or skin-picker-first flow. The template boots directly into gameplay. Gateable UI opens from pause menu, settings, or GameOverScene only.
3f. Update window.render_game_to_text() in src/main.js additively — add new observable fields (selectedSkin, continueAvailable, bonusModeActive) without removing existing ones. This is load-bearing for AI test harnesses.
Step 4: Verify
npm run buildclean.npm run devand play withisEntitledreturningfalse(default). Core loop must feel identical to pre-skill state. If anything feels broken or missing, you gated the core loop — revert and revise.- Temporarily edit
Entitlements.jstoreturn true;for all keys. Confirm each feature activates correctly. Revert. - If
tests/exists and snapshotsrender_game_to_text()via exact equality (toEqual), update baselines — field additions are intentional. If tests usetoMatchObject, no update needed. - Append a
## Gateablessection toprogress.mdat the project root with:- Features added (name + tier + entitlement key)
- EventBus events added
- GameState fields added (marked as persistent or transient)
- Constants keys added
- Locked-path description (one line per feature)
Troubleshooting
Feature works when entitled but the game breaks when locked
Cause: You gated part of the core loop, or the locked path is incomplete.
Fix: Revert. The locked path must produce normal-feeling gameplay. Test by running with isEntitled returning false — if anything is missing or broken, revise.
Snapshot tests fail after render_game_to_text update
Cause: Tests use exact toEqual on output; you added new fields.
Fix: Regenerate baselines — the additions are intentional and backward-compatible for any consumer that tolerates extra keys.
Skin picker blocks first play
Cause: Picker launches pre-gameplay. Fix: Move entry point to a pause menu, settings screen, or GameOverScene. The template boots directly into gameplay and must continue to do so.
Entitlements.js already exists
Cause: The skill has been run before, or a monetization layer is already wired.
Fix: Read the file. If it's a stub (return false), add new keys and continue. If it's wired to a real monetization layer, leave it alone and only add the new entitlement keys as new function branches.
Proposal over-gates or feels punishing
Cause: You picked features that restrict the free experience. Fix: Principle 2 (additive over subtractive). Free players should never feel punished by the absence of a gateable. If removing a gateable makes the game feel worse for a free player, it's gating the wrong thing.
Output
Tell the user:
- What was added — list each gateable (name, tier, entitlement key)
- The single wiring seam — point at
src/systems/Entitlements.jsand explain: "FlipisEntitled(key)to returntruefor a key to activate that feature. Wire it to/monetize-game(Play.fun) or/subgames(subscription) next." - How to test — "Run
npm run devand play. Everything should feel normal (all gateables locked by default). EditEntitlements.jstoreturn true;temporarily to see features light up." - Next step — suggest
/monetize-gameor/subgamesas appropriate.
Example Usage
Default proposal in the current game directory
/scaffold-gateables
Result: reads the game, proposes 2–3 gateables, implements them after confirmation. Creates Entitlements.js, new UI modules, new events and state. Game feels unchanged until the entitlement seam is flipped.
Biased proposal with hints
/scaffold-gateables skins continue
Result: proposal biased toward a skin picker and a continue-after-death flow. Other suggestions still possible if they fit the game better.
Explicit project path
/scaffold-gateables ./examples/flappy-bird
Result: operates on the given directory rather than the cwd.
Tips
Run this once per game. If you later want to add more gateables, use
/add-featurefor specific additions or run this skill again — it detects existingEntitlements.jsand only appends new keys.Integration comes next:
/monetize-gamewires Play.fun points to gateables viaEntitlements.js;/subgames(from thesubdotgames/skillsrepo, separate install) wires subscription tiers. Either way,Entitlements.jsis the only file that needs to change to turn gateables on.
FAQ
What does the scaffold-gateables skill do?
Add gateable features to an existing browser game — skin picker, continue-after-death, bonus mode, save slots, daily challenge. Monetization-agnostic scaffolding that leaves clean hooks for any paywall, subscription, or entitlement layer. Features are scaffolded at silver and gold tiers only (bronze is the default everyone gets). Use when the user says "add gateables", "scaffold monetizable features", "add skin picker", "add continue-after-death", "make my game monetizable", or "add premium hooks". Do NOT use for Play.fun SDK integration (use monetize-game) or generic gameplay features (use add-feature).
How do I install scaffold-gateables?
Run npx skills add https://github.com/playableintelligence/game-creator --skill scaffold-gateables in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/scaffold-gateables/ (personal) or .claude/skills/scaffold-gateables/ (project).
Which AI agents can use scaffold-gateables?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is scaffold-gateables safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains scaffold-gateables?
It is published by playableintelligence in playableintelligence/game-creator. It has 584 recorded installs.
More from playableintelligence/game-creator
game-designer
playableintelligence/game-creator
Game UI/UX designer that analyzes and improves the visual polish, atmosphere, and player experience of browser games. Use when a game needs visual improvements, better backgrounds, particles, animations, screen transitions, juice/feel, or overall aesthetic upgrades.
game-assets
playableintelligence/game-creator
Game asset engineer that creates pixel art sprites, animated characters, and visual entities for browser games. Use when a game needs better character art, enemy sprites, item visuals, or any upgrade from basic geometric shapes to recognizable pixel art.
design-game
playableintelligence/game-creator
Audit and improve the visual design, polish, and player experience of an existing game. Use when the user says "make my game look better", "improve the design", "add polish", "add juice", "add particles", "fix the UI", or "make it more visually appealing". Do NOT use for gameplay logic changes (use add-feature instead).
phaser
playableintelligence/game-creator
Build 2D browser games with Phaser 3 using scene-based architecture and centralized state. Use when creating a new 2D game, adding 2D game features, working with Phaser, or building sprite-based web games.
game-audio
playableintelligence/game-creator
Game audio engineer using Web Audio API for procedural music and sound effects in browser games. Zero dependencies. Use when adding music or SFX to a game.
game-architecture
playableintelligence/game-creator
Game architecture patterns and best practices for browser games. Use when designing game systems, planning architecture, structuring a game project, or making architectural decisions about game code.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image