How to use the Isometric Mono Illustration agent skill

What the skill makes the agent do

A skill is a folder of instructions and helper files that an agent loads when a request matches its description. This one covers a single illustration style. Every scene sits on one rounded, bevelled off-white slab, with seven to ten objects arranged on it in true isometric projection.

Each face is filled from five greens according to the direction it faces: the top is lightest and the right side darkest. Every visible edge gets a 0.9 deep-green outline, and the slab has soft green shadows and glows. Scenes are dense with fine repeated detail such as rack units, ribs, vents, keys and code lines.

The skill draws no people, sky or background shapes, and uses no colours outside the green ramp. Its output is SVG, so the artwork stays as vector shapes rather than a raster image.

Install the skill

Download the ZIP of the skill from this page. Then install it in one of two ways.

For a personal install, unzip the folder into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.

If you use the Claude apps, you can upload the ZIP instead: open Settings, go to Capabilities, then Skills, and upload it there.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

What you need before you start

The skill's scripts are written for Node.js, which runs the .mjs files. They use only Node's built-in fs module, and the source does not list any third-party dependencies. The skill's scripts run code on your machine, but the source states that they do not use the network.

You do not need an account with any image service. The output is an SVG file you can open in a browser or an editor.

• Node.js installed locally
• No third-party packages are listed in the source
• No network access is used by the scripts

How to trigger the skill with a natural request

The agent loads the skill when your request matches its description. Plain wording is enough. Name the style and the subject, and say what the artwork is for.

The description lists these triggers: isometric illustration, an iso scene, 2.5D tech art, monochrome or green isometric art, a server room, a dev stack or cloud picture, and art for empty states, onboarding, 404 pages, blog headers, feature spots or marketing cards in this style.

The demo prompts in the skill name it directly, for example: use the illustration-isometric-mono skill to draw a 480x360 SVG card. Naming the skill is the most reliable way to load it.

• Use the illustration-isometric-mono skill to draw a 480x360 SVG card of an API gateway with a router, three services and a key vault on one slab.
• Make a green isometric 404 illustration of a server room with a status tower.
• Create an isometric dev stack scene for a blog header: a laptop with code, a database stack and a shipping container.

Check the output and run the bundled scripts

The skill ships several helper scripts. scripts/dev-stack.gen.mjs builds a sample card. The source gives this command to reproduce it: node scripts/dev-stack.gen.mjs out.svg. scripts/iso.mjs is the scene kit with props such as racks, databases, laptops, containers, cards, badges, books, plants, cables and a status tower.

The checking scripts are scripts/lint.mjs and scripts/ramp-check.mjs. The source says face colours often come out as in-between hex values, so colour checks should use ramp-check.mjs rather than a visual inspection. lint.mjs with the --palette flag lists those values as warnings, and the source says this is by design.

Review the scripts before running them on any machine you do not trust, because they execute code locally.

• node scripts/dev-stack.gen.mjs out.svg
• scripts/ramp-check.mjs for colour checks
• scripts/lint.mjs (use --palette to list palette warnings)
• scripts/render.mjs is also included

Tips for better results

Keep the subject to infrastructure, tooling or workflow. The style suits dev stacks, pipelines, studios and data centres. Ask for a 480x360 card, since the style is built around that width.

If you need a character or a person, this skill is the wrong one. The source points to other skills for those cases: illustration-flat-with-black or illustration-outlined-cartoon for a character acting out a tech moment, illustration-teal-spot for one hero object with a hard offset shadow, and illustration-bold-pop for chunky navy-extruded pop geometry.

• Name the objects you want, for example a laptop with code, two racks and a mug.
• Say where the art goes (empty state, 404 page, blog header) so the layout suits the space.
• Ask for one hero object and a few supporting ones; the style works best with seven to ten objects.