AgentSkillsCN

agent-studio-playground

致力于游戏游乐场（前端 /playground 与后端游戏 API）的开发。适用于新增或排查游戏、渲染模式（场景 vs 帧）、会话生命周期、控制与键盘操作，以及后端环境（Gymnasium、Snake、Tetris）的开发与调试。游戏游乐场开发：新增/排查游戏、前后端协议、渲染模式（scene/frame）、会话管理、键盘与控制面板。

SKILL.md
--- frontmatter
name: agent-studio-playground
description: Work on Game Playground (frontend /playground and backend game API). Use for adding/debugging games, render modes (scene vs frame), session lifecycle, controls/keyboard, and backend environments (Gymnasium, Snake, Tetris). 游戏游乐场开发：新增/排查游戏、前后端协议、渲染模式(scene/frame)、会话管理、键盘与控制面板。

Agent Studio Game Playground

Understand the contract (backend API)

  • •Backend routes live in backend/main.py.
  • •Session selection and env mapping live in backend/engine/session_manager.py.
  • •Gym wrapper (frame rendering) lives in backend/engine/gym_wrapper.py.

Endpoints:

  • •GET /health
  • •POST /api/game/start body: { "env_id": "<gameId>", "config": { ... } }
  • •POST /api/game/{session_id}/step body: { "action": <int> }
  • •POST /api/game/{session_id}/reset
  • •DELETE /api/game/{session_id}

Rendering:

  • •render.mode === "scene": frontend should draw from render.scene.
  • •render.mode === "frame": frontend should display render.frame / state.frame (often a data URL).

Understand the frontend wiring

  • •Lobby: src/app/playground/page.tsx + src/lib/games/registry.ts
  • •Game page: src/app/playground/[gameId]/page.tsx
  • •Shared gameplay logic/components: src/components/features/playground/
  • •Scene renderers: src/components/games/renderers/*
  • •Controls/settings: src/components/games/controls/*, src/components/games/settings/*

Add a new game (checklist)

  1. •Register it in src/lib/games/registry.ts (id, category, renderMode, actions, available).
  2. •Backend:
    • •If it’s custom scene mode, add an env in backend/engine/games/ and map it in backend/engine/session_manager.py.
    • •If it’s a Gym env, ensure the env_id is valid for gymnasium.make.
  3. •Frontend:
    • •For renderMode: "scene", add/extend renderer + types under src/components/games/.
    • •Update keyboard mapping/controls/settings as needed.
  4. •Verify the API payload shape matches src/components/features/playground/types.ts.

Smoke test the backend game API

Run the bundled script after starting the backend:

  • •python docs/skills/agent-studio-playground/scripts/smoke_game_api.py --env-id CartPole-v1 --steps 5