aiticker

Skill · #226 trending skills repo

AI Iso Skill

MrBongoC/ai-iso-skill

Claude skill that draws interactive isometric figures in a single HTML file

Frontend & UI
Install ↓GitHub ↗Website ↗
Stars
341
This week
—
Forks
23
Open issues
0
Skills inside
1

Get started

Install the skills

npx skills add MrBongoC/ai-iso-skill

Installs into Claude Code, Codex, Cursor, OpenCode and the other agents it finds on your machine.

Inside this repo

1 skill

iso-figureBuild an interactive isometric line-art "figure" (Fig N style) of an object in a single HTML/SVG file: monochrome technical-illustration look, parts you can press that produce real output, live state readout. Use for hero illustrations, interactive diagrams, product figures, and playable desk objectskills/iso-figure

Documentation

README

View on GitHub ↗

iso-figure

A skill for Claude that draws interactive isometric figures. Name an object and you get back one HTML file: a hairline isometric drawing on a numbered plate, with parts that work when you press them.

Fig 4, a desk synth, holding a C major chord while the waveform switches from saw to square, triangle and sine

Fig 5, a pocket calculator, working out 12.5 × 8 and then 100 ÷ 3

Both were made with the skill. Click either one to play with it, or open the files in examples.

How it works

The figures are plain SVG with no libraries. About 15 lines of projection code turn each face of a box into an SVG matrix(), so ordinary rects, text and paths drawn flat land on the right isometric plane, text and rounded corners included. Paint order handles depth. One state object and one render() drive the interaction, and CSS does the motion.

Before drawing anything, the skill has Claude decide what pressing a part produces: typed text, a number, a note. If the object has nothing to press, it picks a different object.

SKILL.md has the kernel, the procedure, and the rules for the look.

Install

Claude Code, as a plugin:

/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill

Or copy the skill folder in by hand:

git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

On Claude.ai, download iso-figure.skill from the latest release and upload it in your skill settings.

Using it

Ask for a figure of something with parts you can press:

iso figure of a kitchen timer with minute buttons and a display that counts down
fig 6, a wall light switch that turns a lamp on and off

License

MIT

Releases

Recent versions

All releases ↗
  1. v1.0.0