Matter.js — 2D Physics Skill

SkillMedia

Implement 2D physics interactions with Matter.js, Engine/World setup, Render/Runner configuration, adding bodies and constraints, mouse interaction, and SPA cleanup patterns.

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Matter.js skill

What this skill tells your AI

The instructions your AI receives, as published by bidewio/better-openclaw in skills/matterjs-physics/SKILL.md and read by ahel’s review.

When to use

Interactive 2D physics: falling objects, drag interactions, physics-based UI elements
Canvas-based simulations and games
Fun, playful UI moments with real physics

Minimal setup

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;
  const engine = Engine.create();
  const render = Render.create({
    element: document.body, engine,
    options: { width: 800, height: 600, wireframes: false }
  });
  Runner.run(Runner.create(), engine);
  Render.run(render);
  const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  const box = Bodies.rectangle(400, 200, 80, 80);
  Composite.add(engine.world, [ground, box]);
</script>

Mouse interaction

const { Mouse, MouseConstraint } = Matter;
const mouse = Mouse.create(render.canvas);
const mc = MouseConstraint.create(engine, { mouse });
Composite.add(engine.world, mc);
render.mouse = mouse;

Common patterns

Composite.add(engine.world, [...]) to add bodies
render.options.wireframes = false for solid rendering
Runner.run(runner, engine) for a simple loop

Cleanup (SPA)

Runner.stop(runner) — stop simulation
Remove render canvas from DOM
Clear engine and world references

Tips for AI Agents

Ask about viewport size and scaling for the canvas.
Confirm rendering approach (Matter.Render vs custom renderer).
Check if mouse/touch drag interaction is needed.

Signals

GitHub stars: 58
Forks: 6
Last commit: Aug 2026

Advanced

Item type: skill
Key: matterjs-physics
Source: github.com/bidewio/better-openclaw

github.com/bidewio/better-openclaw