---
name: hibot-machines
description: >-
  Draw an everyday machine as one self-contained interactive HTML file in the
  Hi, Bot (hibot.space) style: isometric line drawing on black, amber as the one
  signal, buttons that actually work, and a live panel showing what the machine
  senses, the rule it follows and what it does, plus one control that fools its
  sensor. Use for /hibot-machines, "make a Hi, Bot machine", or "how does a
  <machine> know when to <do something>".
---

# Hi, Bot Machines

One sentence in ("a night-light that turns on when it gets dark"), one `.html` file out. A kid aged 8–16 opens it, presses things, and can say how the machine "knows" what to do and how to trick it.

Reference build: `https://hibot.space/machines/night-light.html` (read it before your first figure; reuse its shell).

The idea of a one-sentence-to-working-figure skill comes from April Zhu's Colorfigures (april-zhu.com/colorfigures, MIT). This skill shares no code or art with it.

## Install

```bash
mkdir -p ~/.claude/skills/hibot-machines && curl -fsSL https://hibot.space/machines/SKILL.md -o ~/.claude/skills/hibot-machines/SKILL.md
```

## Output contract

- One file, `<machine-slug>.html`, saved where the user asks (default: current directory). Tell them the path.
- HTML + inline SVG + vanilla JS. **No network requests** of any kind: no CDNs, no Google Fonts, no images by URL, no fetch. The only `http` string allowed is the SVG namespace. It must work opened from disk.
- Under ~40 KB. No build step.

## The loop panel (the Hi, Bot part, required)

Every figure has a panel beside the drawing with three rows, updated live:

| Row | Shows | Example |
|---|---|---|
| **Senses** | the sensor's current reading, a number with a unit or scale | `Light level: 12 / 100` |
| **Rule** | the decision in plain words, with the real threshold | `If light is below 30, turn on.` |
| **Does** | the output state, as a word | `Light ON` |

The row whose value just changed gets the amber left rule. Then add:

- **One "fool it" control.** It changes what the sensor reads without changing the world (cover the eye, warm the thermometer with your hand, hold a magnet to the reed switch). Its caption names the lesson: *the machine only knows what its sensor tells it.*
- **A grown-up aside** in a closed `<details>`: the real mechanism in 2–4 sentences, and the link to AI ideas when it is honest (a threshold rule is the same move a single neuron makes). If you are not sure how the real machine works, say "simplified" and don't invent parts.

## Design tokens (copy as-is)

```css
:root{--black:#0A0A0A;--ink:#111418;--surface:#15181D;--card:#1B1F26;--border:#23272E;
--muted:#848E99;--mid:#8B95A1;--offwhite:#E8E8E3;--white:#FFFFFF;--amber:#F5A524;--amber-dim:#B6791A;
--ease:cubic-bezier(.2,.7,.2,1)}
body{margin:0;background:var(--black);color:var(--offwhite);font:16px/1.65 "DM Sans",system-ui,sans-serif}
h1,h2{font-family:"Syne","DM Sans",system-ui,sans-serif;color:var(--white);letter-spacing:-.02em}
```

- Fonts are named, never loaded. If the host app already serves Syne and DM Sans they apply; otherwise system fallbacks are fine.
- **Amber is the one signal**: the machine's active output (the light that is on, the heater that is heating), focus rings and the changed panel row. Nothing else is amber.
- Ink lines are `--offwhite` at 1.5px, `stroke-linejoin:round`. Faces fill with `--surface` / `--card` / `--ink` to separate top, left and right. No gradients, no drop shadows, no glow filters; show light as a flat amber polygon at low opacity.
- Labels: `12px`, uppercase, `letter-spacing:.18em`, `--mid`. Headlines are sentences ending in a period.
- Buttons: `--card` fill, `--border` hairline, 8px radius (never pill-shaped), `min-height:44px`. A pressed toggle uses `aria-pressed="true"` and an amber border.

## Drawing

Isometric, original shapes, built from a helper so every face lines up:

```js
const U=22, OX=150, OY=220;                      // unit size and origin; tune per figure
const iso=(x,y,z)=>[OX+(x-y)*U*.866, OY+(x+y)*U*.5-z*U];
const pts=a=>a.map(p=>iso(...p).join(",")).join(" ");
// <polygon points="${pts([[0,0,0],[10,0,0],[10,0,9],[0,0,9]])}"/>   // a wall in the x–z plane
```

Draw back to front. Keep it to the parts the loop needs: the sensor, the thing it controls, and the world it senses (window, room, water). Every control must visibly change the drawing.

## Behavior

- Inputs are native: `<input type="range">` for amounts, `<button aria-pressed>` for toggles. Each has a visible `<label>`.
- **No autoplay and no repeating motion.** State changes animate once (fill/opacity, 220ms, `var(--ease)`) and then hold still.
- `@media (prefers-reduced-motion: reduce){*{transition:none!important}}`.
- Announce the "Does" row in an `aria-live="polite"` region.
- The SVG is `role="img"` with a `<title>` that describes the current state, updated on change.
- Never color alone: every state has a word ("ON", "Day").
- Layout: drawing and panel side by side from 768px up, stacked below. No sideways scroll at 360px.

## Voice

Plain, curious, dryly funny, for ages 8–16. No "AI-powered", "magic", "smart" as praise, or emoji. Say what the machine can't know.

## Verify before saying done

1. Open the file (or a local preview) at 1280px and 360px wide and press every control. Zero console errors, and `document.documentElement.scrollWidth === clientWidth`.
2. Tab through everything; focus is visible and every control works from the keyboard.
3. Search the file for `http`: the SVG namespace is the only hit.
4. Report anything you could not check instead of claiming it passed.

## Don't

- Copy another figure kit's code or art. Draw it fresh.
- Invent sensors or rules the real machine doesn't have. Simplify and say so.
- Add sound, timers that loop, chat boxes, or text inputs that go anywhere.