Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From phaser-assets
Visually inspect and map sprite sheet tiles to animations and layer compositions for Phaser JS games. Triggers when the user wants to map animations, inspect a sprite sheet, define frame sequences, identify tile indices, or compose layered characters from a sprite sheet.
npx claudepluginhub ehartye/phaser-assets --plugin phaser-assetsHow this skill is triggered — by the user, by Claude, or both
Slash command
/phaser-assets:sprite-inspectorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Open a visual inspector for sprite sheets so the user can define animation frame sequences and layer compositions interactively.
Exports pixel art sprites from Aseprite to PNG, GIF, spritesheets, and JSON metadata for game engines like Unity, Godot, Phaser. Supports layouts, scaling, and frame exports.
Use this skill when drawing images in PixiJS v8. Covers Sprite with anchor/tint/texture, AnimatedSprite for frame animation, NineSliceSprite for resizable UI panels, TilingSprite for scrolling/repeating backgrounds. Triggers on: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite, Sprite.from, anchor, tint, tilePosition, animationSpeed, gotoAndPlay, leftWidth, topHeight, constructor options, SpriteOptions, AnimatedSpriteOptions, NineSliceSpriteOptions, TilingSpriteOptions.
Defines import, slicing, atlas packing, and naming rules for 2D sprite assets to ensure consistency, performance, and replaceability across a project.
Share bugs, ideas, or general feedback.
Open a visual inspector for sprite sheets so the user can define animation frame sequences and layer compositions interactively.
Use this after a sprite sheet has been downloaded into the project (via the asset-finder skill or manually). The user wants to:
Before opening the inspector, determine:
assets/images/characters/knight.png)If the sprite sheet was downloaded by asset-finder, use the metadata from that session. If the user provides the sheet manually, ask for tile dimensions or inspect the image to determine them.
curl -s http://localhost:8483/health || python "$CLAUDE_PLUGIN_ROOT/scripts/server.py" --port 8483 --no-open &
project_path so the server can resolve the image):curl -s -X POST http://localhost:8483/api/inspector/load \
-H "Content-Type: application/json" \
-d '{"project_path": "<absolute_project_path>", "image_path": "<relative_path>", "tile_width": <W>, "tile_height": <H>, "margin": <M>, "spacing": <S>}'
Tell the user to open http://localhost:8483/inspector to use the visual inspector. Explain the two modes:
Wait for the user to finish and click "Send to Claude".
curl -s http://localhost:8483/api/inspector/results
Wait until status is "submitted".
Use the results to generate Phaser animation code. The results contain:
sprite_sheet: path to the imagetile_size: [width, height]animations: named animation sequences with frames, frameRate, and loopcompositions: named layer stacks with tile indicesFor each animation, generate:
this.anims.create({
key: '<animation_name>',
frames: this.anims.generateFrameNumbers('<sprite_key>', { frames: [<frame_indices>] }),
frameRate: <frameRate>,
repeat: <loop ? -1 : 0>
});
Read references/phaser-integration.md (in the asset-finder skill directory) for complete Phaser code patterns.
Shut down the server when done:
curl -s -X POST http://localhost:8483/shutdown