AutoGineer
Generated banner for Matterjs
Generated logo for Matterjs

Matterjs

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Use when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to integrating Matter.js into web projects. It covers the essential setup of the physics engine, world, renderer, and runner, as well as common patterns for adding bodies, constraints, and mouse interactions. It also includes best practices for managing the lifecycle of physics simulations in single-page applications to ensure proper teardown and performance.

What it does

  • Provides boilerplate code for initializing the Matter.js engine, world, and renderer.
  • Demonstrates how to add static and dynamic bodies to the physics world.
  • Explains how to implement mouse-based interactions for dragging objects.
  • Outlines necessary cleanup steps to prevent memory leaks in SPA environments.
  • Offers guidance on choosing between built-in rendering and custom loops.

When to use it

  • When you need to add 2D physics to a web-based project.
  • When setting up interactive canvas elements that require gravity or collision detection.
  • When troubleshooting physics simulation performance or lifecycle management.
  • When integrating Matter.js into frameworks like React or plain HTML.

Advantages

  • Reduces boilerplate setup time for physics simulations.
  • Ensures consistent handling of engine and runner lifecycles.
  • Provides clear patterns for common tasks like adding mouse constraints.
  • Includes essential cleanup procedures for modern web application architectures.

Usage examples

“Show me how to set up a basic Matter.js scene with a falling box.”
The agent provides a complete HTML/JS snippet initializing the engine, renderer, and adding a static ground and a dynamic box.
“How do I add mouse interaction to my Matter.js canvas?”
The agent provides the code to create a MouseConstraint and add it to the world, along with the necessary configuration for the render canvas.
“What is the best way to clean up Matter.js when navigating away from a page?”
The agent provides a checklist including stopping the runner, removing the canvas from the DOM, and clearing the engine.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/matterjs/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip matterjs.zip -d .agents/skills

Documentation by Meng To

Matter.js Skill

Workflow

  1. Confirm environment (plain HTML, React, or canvas-only) and rendering approach (Matter.Render for debug vs custom renderer).

  2. Provide a minimal Engine/World/Render/Runner setup and add bodies.

  3. Add interactions (mouse constraint) or constraints only if requested.

  4. Share cleanup steps for SPA or teardown scenarios.

Minimal setup

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;

  const engine = Engine.create();

  const render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false
    }
  });

  const runner = Runner.create();
  Runner.run(runner, 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>

Common patterns

  • Use Composite.add(engine.world, [...]) to add bodies to the world.

  • Use Render.create({ element, engine }) to create a canvas automatically, or pass a canvas you create yourself.

  • Set render.options.wireframes = false for solid rendering.

  • Use Runner.run(runner, engine) for a simple loop, or call Engine.update in your own loop if you need custom timing.

Mouse interaction (optional)

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

Cleanup checklist (SPA)

  • Stop the runner with Runner.stop(runner).

  • Remove the render canvas from the DOM.

  • Clear engine and world if needed.

Questions to ask when specs are missing

  • What viewport size and scaling should the canvas use?

  • Are we using Matter.Render or a custom renderer?

  • Do you want mouse/touch drag interaction?

  • Should the simulation loop be paused when offscreen?

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/matterjs · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download matterjs.zip