remix-game-best-practices

스타10

포크5

업데이트2026년 3월 5일 21:21

Mobile-first game creation best practices for Remix

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

farworld-labs

farworld-labs/remix-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Game Creation Best Practices

Mobile-First Requirements

Build for portrait orientation only.
Canvas must be 720x1080 (2:3 aspect ratio).
Do not use landscape layouts or controls.
Design for thumb-friendly interactions and readable UI.

Mandatory Remix SDK Usage

Include the SDK script in HTML <head>:

<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

Use only the supported SDK APIs:

window.RemixSDK.singlePlayer.actions.saveGameState({ gameState: {...} })
window.RemixSDK.singlePlayer.actions.gameOver({ score: number })
window.RemixSDK.onPlayAgain(() => { ... })
window.RemixSDK.onToggleMute((data) => { ... })
window.RemixSDK.ready()
window.RemixSDK.gameState
window.RemixSDK.hapticFeedback()

Forbidden APIs and Patterns

Do not use localStorage.
Do not use sessionStorage.
Do not use navigator.vibrate(...).
Do not use window.RemixSDK.vibrate(...).
Do not use non-existent SDK methods (save, checkpoint, etc.).

Game Over and Restart Flow

End runs only with:

window.RemixSDK.singlePlayer.actions.gameOver({ score: finalScore })

Do not implement a custom game-over screen.
Handle replay via window.RemixSDK.onPlayAgain(...).

State Persistence

Persist progress only with saveGameState.
Read persisted values from window.RemixSDK.gameState after await window.RemixSDK.ready().
Keep saved state compact and serializable.

Haptics and Audio

Use window.RemixSDK.hapticFeedback() for collisions, scoring, UI interactions, and game over.
Respect onToggleMute state for all game audio.
Use lightweight Web Audio API SFX for better mobile performance.

Framework Rules

Phaser (2D)

Use global Phaser (no imports).
Use scene lifecycle (preload, create, update).
Use Arcade physics for collisions.
Do not set parent in Phaser.Game config.

Three.js + Cannon-ES (3D)

Use globals THREE and CANNON (no imports).
Use requestAnimationFrame loop.
Include ambient + directional lighting.
Sync mesh transforms from physics bodies every frame.

Code and Runtime Constraints

Write ES6 JavaScript only (no TypeScript).
Do not use import statements.
Assume browser-only runtime (no Node.js APIs).
Define initGame() and call it at the end of the file.

Validation Checklist

Before finalizing a game, verify:

Portrait 2:3 canvas (720x1080).
SDK hooks present (gameOver, onPlayAgain, onToggleMute).
No forbidden storage or vibration APIs.
Haptics integrated for meaningful gameplay events.
Restart flow works cleanly from onPlayAgain.

이 저장소의 다른 Skills

같은 저장소

remix-add-image

farworld-labs/remix-skills

Generate and add images to a Remix game

2026-04-1510

remix-add-sprite

farworld-labs/remix-skills

Generate and add sprites to a Remix game

2026-04-1510

remix-agent-publish

farworld-labs/remix-skills

Build and publish Remix games with the current Remix toolchain. Use when work touches the official Remix CLI, MCP server, REST publishing APIs, or the @remix-gg/sdk game runtime.

2026-04-1510

remix-api-reference

farworld-labs/remix-skills

OpenAPI-first endpoint reference for Remix game publishing REST routes

2026-04-1510

remix-cli

farworld-labs/remix-skills

Use the official Remix CLI for authentication, config inspection, game creation, uploads, and analytics. Trigger this skill when a task involves `remix login`, `remix whoami`, `.remix-cli.json`, `REMIX_API_KEY`, or terminal-based game management on Remix.

2026-04-1510

remix-mcp-quickstart

farworld-labs/remix-skills

Quickstart for the official Remix MCP server. Use when configuring or operating `@remix-gg/mcp`, wiring MCP auth, or choosing the right Remix MCP tools and skill resources.

2026-04-1510

name	remix-game-best-practices
description	Mobile-first game creation best practices for Remix

Game Creation Best Practices

Mobile-First Requirements

Build for portrait orientation only.
Canvas must be 720x1080 (2:3 aspect ratio).
Do not use landscape layouts or controls.
Design for thumb-friendly interactions and readable UI.

Mandatory Remix SDK Usage

Include the SDK script in HTML <head>:

<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

Use only the supported SDK APIs:

window.RemixSDK.singlePlayer.actions.saveGameState({ gameState: {...} })
window.RemixSDK.singlePlayer.actions.gameOver({ score: number })
window.RemixSDK.onPlayAgain(() => { ... })
window.RemixSDK.onToggleMute((data) => { ... })
window.RemixSDK.ready()
window.RemixSDK.gameState
window.RemixSDK.hapticFeedback()

Forbidden APIs and Patterns

Do not use localStorage.
Do not use sessionStorage.
Do not use navigator.vibrate(...).
Do not use window.RemixSDK.vibrate(...).
Do not use non-existent SDK methods (save, checkpoint, etc.).

Game Over and Restart Flow

End runs only with:

window.RemixSDK.singlePlayer.actions.gameOver({ score: finalScore })

Do not implement a custom game-over screen.
Handle replay via window.RemixSDK.onPlayAgain(...).

State Persistence

Persist progress only with saveGameState.
Read persisted values from window.RemixSDK.gameState after await window.RemixSDK.ready().
Keep saved state compact and serializable.

Haptics and Audio

Use window.RemixSDK.hapticFeedback() for collisions, scoring, UI interactions, and game over.
Respect onToggleMute state for all game audio.
Use lightweight Web Audio API SFX for better mobile performance.

Framework Rules

Phaser (2D)

Use global Phaser (no imports).
Use scene lifecycle (preload, create, update).
Use Arcade physics for collisions.
Do not set parent in Phaser.Game config.

Three.js + Cannon-ES (3D)

Use globals THREE and CANNON (no imports).
Use requestAnimationFrame loop.
Include ambient + directional lighting.
Sync mesh transforms from physics bodies every frame.

Code and Runtime Constraints

Write ES6 JavaScript only (no TypeScript).
Do not use import statements.
Assume browser-only runtime (no Node.js APIs).
Define initGame() and call it at the end of the file.

Validation Checklist

Before finalizing a game, verify:

Portrait 2:3 canvas (720x1080).
SDK hooks present (gameOver, onPlayAgain, onToggleMute).
No forbidden storage or vibration APIs.
Haptics integrated for meaningful gameplay events.
Restart flow works cleanly from onPlayAgain.