Design game
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).From its SKILL.md
npx -y skills add PlayableIntelligence/game-creator --skill design-gameAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.6 KB, as published. Nobody here has run it
Performance Notes
- Take your time to do this thoroughly
- Quality is more important than speed
- Do not skip validation steps
Design Game
Run a UI/UX design pass on an existing game to improve visuals, atmosphere, and game feel. No design experience needed — this command analyzes your game and applies proven visual patterns.
Instructions
Analyze the game at $ARGUMENTS (or the current directory if no path given).
First, load the game-designer skill to get the full design vocabulary and patterns.
Step 1: Audit
- Read
package.jsonto identify the engine - Read
src/core/Constants.jsfor the current color palette and config - Read all scene files to understand current visuals
- Read entity files to see how game objects are drawn
- Read
src/core/EventBus.jsfor existing events
Step 2: Design Report
Score each area 1-5 and present as a table:
| Area | Score | Notes |
|---|---|---|
| Background & Atmosphere | ||
| Color Palette | ||
| Animations & Tweens | ||
| Particle Effects | ||
| Screen Transitions | ||
| Typography | ||
| Game Feel / Juice | ||
| Game Over | ||
| Expression Usage | If personality characters exist, score how reactively expressions change to game events. Score 1 if expressions never change. |
Then list the top improvements ranked by visual impact, with a plain-English description of what each one does (e.g., "Add a sky gradient so the background looks like a real sky instead of a flat color").
Step 3: Implement
Ask the user which improvements they want, or implement all if they say so. Follow the game-designer skill patterns:
- All new values in
Constants.js - Use EventBus for triggering effects
- Don't alter gameplay (physics, scoring, controls, spawn timing)
- Prefer procedural graphics
- New files in proper directories
Step 4: Verify
- Run
npm run buildto confirm no errors - Summarize all changes made in plain English
Example Usage
Full design pass
/design-game examples/asteroid-dodge
Result: Audits visuals → scores Background 2/5, Particles 1/5, Typography 3/5 → adds sky gradient background, star parallax, explosion particles on asteroid destroy, screen shake on hit, smooth scene transitions. All values in Constants.js.
Troubleshooting
Visual changes cause performance drops
Cause: Too many particle emitters or gradient fills per frame. Fix: Limit active particles (pool and reuse). Use cached gradient textures instead of recreating per-frame.
Design changes break layout on different screen sizes
Cause: Hardcoded pixel positions instead of using PX scale factor. Fix: All positions and sizes should use Constants.js PX-relative values.
Next Step
Tell the user:
Your game looks much better now! Next, run
/game-creator:add-audioto add chiptune background music and retro sound effects — all procedurally generated, no audio files needed.Pipeline progress:
/viral-game→/design-game→/add-audio→/qa-game→/review-game(This is the
/viral-gameone-shot pipeline — not the/make-gamemulti-session, milestone-driven workflow.)