atlas-shape-art

atlas-shape-art is a skill for Claude Code from KilledByAPixel/LittleJS-AI. It costs 73 tokens per session (1,452 once invoked), scanned A, original, MIT.

A rendering technique for LittleJS games, an HTML5 game engine, that draws repeated geometric shapes from a shared image atlas instead of rebuilding each shape every frame.

In plain words
What is it for?
Use it when creating or optimizing abstract, neon, or shape-heavy LittleJS games with many repeated visual entities.
Why use it?
It can reduce rendering work when a game displays many circles, polygons, particles, or other simple shapes at once.

Skill for Claude Code

Written for Claude Code: ${CLAUDE_SKILL_DIR} variable.

Part of the littlejs plugin — 4 skills shipped together

Good fit Use it when creating or optimizing abstract, neon, or shape-heavy LittleJS games with many repeated visual entities.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/killedbyapixel/littlejs-ai/atlas-shape-art
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add KilledByAPixel/LittleJS-AI --skill atlas-shape-art
Clone the repo
git clone --depth 1 https://github.com/KilledByAPixel/LittleJS-AI

Made for: Claude Code.

Or install littlejs, the plugin that ships this one along with the rest of its 4 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for atlas-shape-art

README.md
[![agentmods](https://agentmods.dev/badge/skills/killedbyapixel/littlejs-ai/atlas-shape-art/github.svg)](https://agentmods.dev/skills/killedbyapixel/littlejs-ai/atlas-shape-art)
Your own site
<a href="https://agentmods.dev/skills/killedbyapixel/littlejs-ai/atlas-shape-art"><img src="https://agentmods.dev/badge/skills/killedbyapixel/littlejs-ai/atlas-shape-art/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for atlas-shape-art

Your own site · 80×15
<a href="https://agentmods.dev/skills/killedbyapixel/littlejs-ai/atlas-shape-art"><img src="https://agentmods.dev/badge/skills/killedbyapixel/littlejs-ai/atlas-shape-art.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 73 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,452 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00073 $0.01452
Opus 5 $0.00036 $0.00726
Sonnet 5 $0.00015 $0.00290
Haiku 4.5 $0.00007 $0.00145

Measured 12d ago against content hash 53e18027a9a2, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

atlas-shape-art scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/atlas-shape-art/SKILL.md · 84 lines

How it starts

The opening of the file, as written. The whole thing — 84 lines — stays where its author put it; the contents beside it link to each section on GitHub.

atlas-shape-art

For shape-based LittleJS games, bake the 16 built-in white icons ONCE with initDefaultAtlas() and draw every entity as a per-instance tinted drawTile — instead of drawCircle/drawEllipse/drawPoly. The shapes already exist in templates/textureGenerator.js; you do not hand-roll a canvas or a star-point array.

Core win: one shared atlas → every sprite is a single quad in one unbroken WebGL batch, recolorable to any hue for free, zero external assets.

When to use

  • New game whose look is geometric/abstract/neon/puzzle/arcade, or has lots of round/polygon entities (orbs, gems, bubbles, asteroids, stars, particles-as-entities).
  • Retrofit: an existing game calling many drawCircle/drawEllipse/drawPoly/drawRegularPoly per frame and the rendering is a hot spot.

Not for: representational art (a specific character, a detailed prop) — draw that as a custom sprite with drawToTexture. A handful of shapes drawn once is fine as-is; this is for many instances or a shape-driven art style.

Why it's faster (don't skip — agents get this wrong)

drawCircledrawEllipsedrawRegularPoly tessellates a 32-sided polygon (glCircleSides = 32) and pushes ~32 verts per call through the untextured-poly path. drawPoly / drawRegularPoly are the same path. A tinted drawTile is one quad (2 triangles) and all atlas drawTile calls collapse into a single batched draw.

Common misconception: "drawCircle batches in WebGL too, 300 is trivial." It batches, but at ~16× the vertices of a quad and on a separate path from your textured sprites, breaking the uniform batch. drawRect is the exception — it is already drawTile(pos, size, undefined, color), a single quad, so rects are NOT the bottleneck. The win is round/polygon shapes and keeping everything in one texture batch.

The 16 shapes (tiles 0–15)

circle glow ring roundSquare · triangle diamond pentagon hexagon · heart droplet plus arrow · spark star burst bolt

Read the full file on GitHub · 84 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 84 lines · 73 tokens per session scan A 53e18027a9a2

Subscribe to this mod's changes

atlas-shape-art is a skill published in the GitHub repository KilledByAPixel/LittleJS-AI (78 stars, last pushed 6d ago), licensed MIT. It adds 73 tokens to every session and 1,452 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.