Skip to main content
skill CX Codex

add-feature — Claude Code skill: what it does, how to install

Adds gameplay mechanics to Three.js or Phaser browser games. It helps implement power-ups, combo systems, or double jumps while keeping the core architecture intact.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add PlayableIntelligence/game-creator --skill add-feature -a claude-code
Open on GitHub

What add-feature does

The skill inspects a browser game codebase, detects Phaser or Three.js from package.json, and reads EventBus.js, Constants.js, GameState.js, and Game.js. Before writing code, it outlines what changes from the player's perspective, what files it creates, and what existing scripts need wiring.

Implementation follows strict rules: zero hardcoded values, state domains added directly into GameState.js, and all inter-system communication routed through EventBus.js. The new mechanic wires into the main loop inside Game.js, followed by verification with npm run build.

This workflow strictly targets game mechanics rather than visuals. Styling updates or sprite replacements require dedicated tools like design-game and add-assets. If your game lacks an event bus or centralized state architecture, the skill breaks because it cannot locate the standard wiring points.

What it helps with

  • implement gameplay mechanics like power-ups or combo multipliers
  • decouple game subsystems through a centralized EventBus.js
  • extract mechanic configuration into Constants.js without hardcoded values
  • register new state domains in GameState.js

Example prompts for the agent

  • /add-feature add a speed boost power-up that spawns randomly
  • /add-feature add combo multiplier that increases when you score quickly
  • /add-feature add a double-jump power-up

How to install add-feature

1Skills CLI (Vercel)

npx skills add PlayableIntelligence/game-creator --skill add-feature -a claude-code

2Manually: put the files in place

~/.claude/skills/add-feature/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/add-feature/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about add-feature

How to install add-feature in Claude Code?

Run npx skills add PlayableIntelligence/game-creator --skill add-feature -a claude-code in your terminal.

Which game engines does add-feature support?

The skill inspects package.json and supports browser games built with Phaser or Three.js.

Can add-feature handle graphics or sprite updates?

No, this skill only handles gameplay logic. For visual styling, use design-game, and for sprite replacements, use add-assets.

Source text

SKILL.md · MIT
---
name: add-feature
description: Add a new gameplay feature to an existing browser game following its architecture patterns. Use when the user says "add a feature", "add double-jump", "add a power-up", "add a leaderboard", or describes a specific game mechanic to implement. Do NOT use for visual-only changes (use design-game) or replacing shapes with sprites (use add-assets).
argument-hint: "[feature-description]"
license: MIT
metadata:
  author: OpusGameLabs
  version: 1.3.0
  tags: [game, feature, gameplay, mechanic, power-up]
---

## Performance Notes

- Take your time to do this thoroughly
- Quality is more important than speed
- Do not skip validation steps

# Add Feature

Add a new feature to your game. Just describe what you want in plain English — for example, "add a double-jump power-up" or "add a high score leaderboard" — and the feature will be built following your game's existing patterns.

## Instructions

The user wants to add: $ARGUMENTS

### Step 1: Understand the codebase

- Read `package.json` to identify the engine (Three.js or Phaser)
- Read `src/core/Constants.js` for existing configuration
- Read `src/core/EventBus.js` for existing events
- Read `src/core/GameState.js` for existing state
- Read `src/core/Game.js` (or GameConfig.js) for existing system wiring
- Read existing scene and gameplay files to understand what's already built

### Step 2: Plan the feature

Before writing code, explain the plan in plain English:

1. **What it does**: Describe the feature from the player's perspective
2. **How it works**: List the new files, events, and settings that will be created
3. **What it touches**: List existing files that need small changes to wire in the feature

Then determine what's needed technically:
- New module file(s) and where they go in the directory structure
- New events to add to the Events enum
- New constants to add to Constants.js
- New state to add to GameState.js
- How to wire it into the Game orchestrator

### Step 3: Implement

Follow these rules strictly:
1. Create the new module in the correct `src/` subdirectory
2. Add ALL new events to `EventBus.js` Events enum
3. Add ALL configuration values to `Constants.js` (zero hardcoded values)
4. Add any new state domains to `GameState.js`
5. Wire the new system into `Game.js` (import, instantiate, update in loop)
6. Use EventBus for ALL communication with other systems
7. Follow the existing code style and patterns in the project

### Step 4: Verify

- Run `npm run build` to confirm no errors
- Confirm the feature integrates without breaking existing systems
- Check that no circular dependencies were introduced
- Ensure event listeners are properly cleaned up if applicable
- Summarize what was added in plain English

## Troubleshooting

### Game breaks after adding feature
**Cause:** New code conflicts with existing EventBus events or GameState fields.
**Fix:** Check for event name collisions in EventBus.js. Ensure new state fields have defaults in GameState.reset().

### Feature works but breaks existing gameplay
**Cause:** Modified shared constants or collision groups.
**Fix:** Add new constants rather than changing existing ones. Test original gameplay after changes.

## Output

Tell the user:
1. What the feature does (from the player's perspective)
2. What files were created or changed
3. How to test it — "Run `npm run dev` and try [specific action]"

## Example Usage

### Adding a power-up
```
/add-feature add a speed boost power-up that spawns randomly
```
Result: Creates `src/entities/PowerUp.js`, adds `POWER_UP` events to EventBus, adds spawn timing and duration to Constants.js, wires into Game.js. Player collects power-up → speed doubles for 8 seconds.

### Adding a scoring mechanic
```
/add-feature add combo multiplier that increases when you score quickly
```
Result: Adds `comboMultiplier` and `comboTimer` to GameState, creates combo logic in scoring system, adds `COMBO_CHANGED` event for UI updates.

## Tips

> You can run this command as many times as you want to keep adding features. Each one builds on the last.
>
> When you're happy with the gameplay, run `/game-creator:design-game` to polish the visuals, `/game-creator:add-audio` for music and sound effects, or `/game-creator:review-game` for a full quality check.

© OpusGameLabs · MIT · PlayableIntelligence/game-creator

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set27

game-3d-assets Finds, generates, and integrates GLB/GLTF models into Three.js browser games to replace primitive cubes and spheres. CX Codex +1 1,100installs threejs-game Locks in a project layout and four core modules for building 3D browser games with Three.js. Useful when the agent scaffolds a scene and game loop from scratch. CX Codex +1 1,100installs add-audio This skill adds background music and sound effects to a browser game using the Web Audio API. No audio files, no npm packages — everything is synthesized in the browser. CX Codex +1 1,000installs add-assets Swaps the circles and rectangles in a 2D game for pixel art sprites of characters, enemies and items. Useful once the prototype plays fine but looks like a wireframe. CX Codex +1 997installs review-game Audits an existing game project for architecture, performance, code quality and monetization readiness. Read-only, no edits. CX Codex +1 954installs add-3d-assets Swaps primitives like BoxGeometry for actual GLB models: animated characters, houses, trees, barrels. Useful when your Three.js game still looks like a pile of boxes. CX Codex +1 938installs qa-game Sets up Playwright automated tests for web games, covering boot sequences, scene transitions, visual regressions, and FPS. Useful for verifying game mechanics without manual runs. CX Codex +1 931installs meshyai Generates 3D models from text or images with Meshy AI, rigs humanoids, and pulls in walk and run animations for Three.js games. CX Codex +1 907installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor