Skills

melonjs-ui-and-text

melonjs-ui-and-text is a skill in melonjs/melonJS, last changed 18 Oct 2026. It is instructions only: no scripts, no named hosts and no pre-approved tools. Our pattern check flagged nothing at commit c045d2d on 27 Oct 2026.

Pattern check: nothing flagged · commit c045d2d · 27 Oct 2026

Install
From the author
Use this skill for HUDs, buttons, menus, dialogue panels, progress bars and on-screen text in melonJS. Covers UIBaseElement/UISpriteElement/UITextButton, ProgressBar, UIPanel, Draggable and DropTarget, the floating screen-space container pattern, which of two overlapping panels gets the pointer, Text and BitmapText, web font loading, and NineSliceSprite panels. Triggers on: UI, HUD, button, UIBaseElement, UISpriteElement, UITextButton, ProgressBar, progress bar, health bar, gauge, Draggable, DropTarget, menu, dialogue, overlapping panels, moveToTop, onOver, onClick, bindKey, keyboard shortcut, button keyboard, Tween, easing, animate a label, wavy text, per-glyph effect, glyphEffect, shake text, rainbow text, Text, BitmapText, fillStyle, fillGradient, gradient text, tint, font, fontface, wordWrapWidth, NineSliceSprite, score display, floating., fullscreen, full screen, requestFullscreen, exitFullscreen, isFullscreen, fullscreen button, fullscreen option
Licence
MIT
Repo stars
6.4k
Folder last changed
18 Oct 2026 (opens in a new tab)
Publisher
melonjs
Files
1 file
Checked
c045d2d (opens in a new tab) · 27 Oct 2026

Install

Each tab says whether it installs commit c045d2d, the one we checked, or the latest version.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.

Pinned to commit c045d2d, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/melonjs/melonJS.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin c045d2dfacf0cb93ce125880930dad59c7f04dbd &&
  git -C "$tmp" sparse-checkout set -- packages/melonjs/skills/melonjs-ui-and-text &&
  git -C "$tmp" checkout -q c045d2dfacf0cb93ce125880930dad59c7f04dbd &&
  mkdir -p .claude/skills &&
  mkdir .claude/skills/melonjs-ui-and-text &&
  cp -R "$tmp"/packages/melonjs/skills/melonjs-ui-and-text/. .claude/skills/melonjs-ui-and-text/ &&
  rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Or install the melonjs plugin it ships in. Installs the latest version, not the one we checked. Installs everything in the plugin, including any hooks, MCP servers and scripts our check doesn't cover.

claude plugin marketplace add melonjs/melonJS --scope project &&
  claude plugin install melonjs@melonjs --scope project
Claude Code docs (opens in a new tab)

What it can touch

From the files and frontmatter at commit c045d2d. This is how much a skill can do, not whether it is risky.

What it can touch: Instructions only

It is instructions only: no scripts, no named hosts and no pre-approved tools.

Pattern check

Pattern check: nothing flagged · commit c045d2d · 27 Oct 2026

We checked every text file in this skill, at commit c045d2d on 27 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check worksReport an incorrect finding

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

  • Agent Skills specPasses with warnings

    The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.

    • Warning

      The body is 722 lines; the spec suggests under 500. B1

      Fix: Move detailed sections into reference files and link to them from SKILL.md.

    • Warning

      The body is about 7,494 tokens (approx.); the spec suggests under 5,000. B2

      Fix: Move detail into reference files that the agent reads only when needed.

  • Claude CodePasses

    Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.

    • Note

      The body is 722 lines; the spec suggests under 500. Claude Code's docs say the same. B1

      Fix: Move detailed sections into reference files and link to them from SKILL.md.

    • Note

      The body is about 7,494 tokens (approx.); the spec suggests under 5,000. After compaction Claude Code keeps only the first 5,000 tokens of a skill. B2

      Fix: Move detail into reference files that the agent reads only when needed.

  • Claude apps & API uploadPasses

    Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.

    • Note

      The description is 966 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4

      Fix: If the claude.ai upload refuses it, trim the description to 200 characters.

    • Note

      The body is 722 lines; the spec suggests under 500. Anthropic's guidance says the same. B1

      Fix: Move detailed sections into reference files and link to them from SKILL.md.

    • Note

      The body is about 7,494 tokens (approx.); the spec suggests under 5,000. Anthropic's guidance says the same. B2

      Fix: Move detail into reference files that the agent reads only when needed.

  • OpenAI (Codex & API)Passes
  • VS Code & CopilotPasses

SKILL.md

Files

1 file

PathSize
SKILL.md (opens in a new tab)30.3 KB

More from melonjs/melonJS

  • melonjs

    melonjs/melonJS

    Use this skill FIRST for any melonJS task; it routes to the right specialised skill and lists the companion packages. melonJS is an open-source 2D, 2.5D and 3D HTML5 game engine running on WebGPU, WebGL 2 or Canvas. Covers Application setup, the scene graph, renderables, sprites, tilemaps, physics, audio, particles, shaders, and the 3D tier — perspective cameras, meshes and glTF scenes. Triggers on: melonjs, melonJS, me.game, Application, app.init, app.world, Renderable, Sprite, Stage, state.change, Camera2d, Camera3d, Mesh, tilemap, Tiled, TMX, ParticleEmitter, ShaderEffect, how do I make a game, HTML5 game engine.

    • Names web addresses
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 18 Oct 2026

  • melonjs-20-migration

    melonjs/melonJS

    Use this skill when writing melonJS code that may be based on pre-20.x knowledge, when migrating a game from melonJS 19.x or earlier, or when an API you expected does not exist. Covers the mandatory async Application.init(), the WebGL 2 baseline and WebGPU backend, renderable post effects replacing the shader property, and the deprecated exports still present. Triggers on: migration, upgrade, melonJS 19, me.game, me.video.init, renderable.shader, Compositor, CanvasTexture, me.Math, deprecated.

    • Instructions only
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 30 Aug 2026

  • melonjs-3d

    melonjs/melonJS

    Use this skill for anything 3D or 2.5D in melonJS — Camera3d, Mesh, InstancedMesh, Sprite3d billboards, Light3d, ground shadows, glTF/GLB scenes, and depth sorting. Covers the Y-down/+Z-forward convention that is the inverse of OpenGL, the cameraClass opt-in, clip planes, and what does not work on the Canvas fallback. Triggers on: Camera3d, Mesh, InstancedMesh, Sprite3d, Trail3d, ribbon, exhaust trail, Light3d, billboard, glTF, glb, 3D, 2.5D, depth, cameraClass, fov, setClipPlanes, setFog, fog, distance fog, height fog, heightFalloff, transparent, transparency, alpha, blendMode, fade, castGroundShadow, lit, setBasis, getBasis, lookAt, up vector, gimbal, slerp, great circle, turn a direction.

    • Instructions only
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 16 Oct 2026

  • melonjs-3d-assets

    melonjs/melonJS

    Use this skill when loading 3D models into melonJS — glTF and GLB scenes, OBJ/MTL models, materials, imported lights, node animation, ground shadows and GPU instancing. Covers level.load options including the async flag, the rightHanded conversion, and exactly what the loader does and does not support. Triggers on: glTF, gltf, glb, OBJ, MTL, 3D model, getGLTF, getOBJ, getMTL, GLTFModel, GLTFScene, level.load glb, rightHanded, lightIntensityScale, castGroundShadow, shadowGroundY, EXT_mesh_gpu_instancing, KHR_lights_punctual, skinning, Blender export, 3D asset.

    • Instructions only
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 12 Oct 2026

  • melonjs-audio

    melonjs/melonJS

    Use this skill for sound and music in melonJS — loading audio, playing effects, background tracks, audio sprites, volume and muting, spatial audio, procedural tone/noise generation, and effects such as reverb or a compressor on the whole mix. Covers the mandatory audio.init format list, the directory-not-file src convention, playTrack versus play, the fixed listener and pixel-scale distances of positional sound, and browser autoplay unlocking. Triggers on: audio, sound, audio.init, audio.play, playTrack, stopTrack, audio.load, sfx, music, volume, mute, fade, rate, pitch, sprite audio, stereo, panner, position, listener, refDistance, reverb, echo, delay, compressor, distortion, filter, audio effect, audio.tone, audio.noise, getAudioContext, getMasterGain, hasAudio, hasFormat, autoplay, no sound, sound stopped working, context suspended, silent after idle, clips silent but tones play.

    • Instructions only
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 23 Oct 2026

  • melonjs-camera-and-drawing

    melonjs/melonJS

    Use this skill for camera control and immediate-mode drawing in melonJS — following a target, viewport bounds, shake and fade, secondary cameras and what each one draws, and drawing shapes, lines and gradients inside a custom draw(). Covers world versus screen coordinate conversion, clipping and masking, baking with CanvasRenderTarget, and reading pixels back. Triggers on: Camera2d, viewport, follow, offset, look ahead, setBounds, minimap, second camera, split screen, cullMask, visibilityLayer, hide from a camera, shake, fadeIn, fadeOut, worldToLocal, localToWorld, colorMatrix, renderer.fill, renderer.stroke, Rect, Ellipse, Polygon, Line, Gradient, clipRect, mask, CanvasRenderTarget, NoiseTexture2d, lookAt, setBasis, toImageData, getImageData, toBlob, toDataURL, screenshot, read pixels.

    • Instructions only
    Pattern check: Nothing flagged

    MIT · 6.4k repo stars · Updated 25 Oct 2026

All skills in melonjs/melonJS