Skip to content
Get packs

Matter.js Physics Skill

Teaches the agent to build 2D physics scenes with Matter.js in the browser

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

This skill teaches an AI agent how to add 2D physics simulation to a web page using the Matter.js library. Once installed, the agent knows how to set up a physics engine, create bodies like boxes and floors, render them on a canvas, and optionally add mouse or touch dragging. It also knows basic cleanup steps for single-page apps. The skill is a set of instructions and example code; it does not run anything by itself.

Great for

  • Front-end developers adding playful physics effects to a landing page or interactive canvas
  • Designers prototyping interactive motion or draggable elements with a working example
  • Developers who want a quick, correct starting point for Matter.js setup and teardown

Skip it if

  • Production 3D or high-precision physics, since Matter.js is a 2D library and is not designed for scientific accuracy
  • Projects that do not use Matter.js, since the guidance is specific to that library's API

Try asking

  • “Create a simple Matter.js scene with a floor and a falling box on a web page”
  • “Add mouse drag interaction to my existing Matter.js canvas”
  • “Show me how to stop and clean up a Matter.js simulation in a React single-page app”
  • “Build a scroll-friendly physics canvas that pauses when offscreen”
Step-by-step guide: how to use Matter.js Physics SkillInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    matterjs.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip matterjs.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

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

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Tell the agent whether you use plain HTML, React, or canvas-only so it picks the right setup
  • Specify viewport size and whether you want Matter.Render debug output or a custom renderer
  • Review the generated code before using it, since the skill itself only supplies instructions and examples

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.