| name | iii-infographic |
| description | Generate a single-page, dense, engineering-poster site for an iii-based project. Reads like a printed system reference, not a marketing page. Six to eight numbered sections, real numbers from the code, cream-paper canvas (or warm dark) with ember-orange + signal-green carrying a binary semantic. Use when the user wants a reference asset (printable, citable) for an iii deployment, a worker, or any technical project sitting on the iii substrate (iii.dev). Also handles diff reviews, plan reviews, and project recaps in the same visual register. |
| license | Apache-2.0 |
| metadata | {"version":"2.1","author":"iii (https://iii.dev)","brand":"iii"} |
iii Infographic Skill
Generates a single-page, dense, engineering-poster site for an iii-based project. The output is one self-contained index.html (CSS and JS inline). The visual vocabulary is opinionated and consistent across iii projects so the same reader can scan two pages and immediately know where to look.
When to use
- The project sits on iii primitives (workers, functions, triggers, state) and is worth mapping section by section.
- The audience is engineers, platform teams, or AI-evaluating reviewers, not buyers.
- The page should be a reference asset (printable, pinnable, citable), not a funnel.
- The codebase has real numbers worth showing: counts, ports, defaults, formulas, function signatures.
- The user wants a diff review, plan review, or project recap rendered in the iii editorial register.
When NOT to use
- The page is a marketing campaign. Use the iii website's brand register instead.
- The deliverable is one diagram. Use
iii-architecture-diagram instead.
- The deliverable is a talk deck. Use
iii-slides instead.
- The system is small enough to explain in a paragraph; an infographic is overkill.
Workflow
- Inventory + binary axis —
references/inventory.md. Capture every count, function, port. Pick the binary axis the project actually has.
- Verification fact-sheet — every claim the page will make, cited to
file:line. The fact-sheet is the source of truth during HTML generation.
- Plan sections —
references/sections.md. Six to eight numbered sections in canonical order.
- Open the scaffold —
templates/index.html ships with header + four sections wired up. Extend in place.
- Pull snippets —
templates/section-snippets/*.html for each remaining section.
- Walk the checklist —
references/checklist.md. Refuse to ship anything in references/anti-patterns.md.
References
| File | Covers |
|---|
references/tokens.md | Color, typography, density, color semantics |
references/inventory.md | Project inventory, binary axis selection, verification fact-sheet |
references/sections.md | §01–§08 information architecture, component library, snippet map |
references/checklist.md | Pre-output gate |
references/anti-patterns.md | Refuse-to-ship list |
references/external-svgs.md | Where to fetch real product/brand SVG logos (svgl, simpleicons, lucide, heroicons) and how to inline them |
Templates in templates/index.html + templates/section-snippets/*.html.
Commands
| Command | Source | What it builds |
|---|
/iii-infographic <project-path> | commands/iii-infographic.md | Full §01–§08 system reference page |
/iii-diff-review <git-ref> | commands/iii-diff-review.md | Before/after infographic with iii vocabulary (no GitHub red/green) |
/iii-plan-review <plan-file> | commands/iii-plan-review.md | Plan-vs-codebase audit, every claim cited |
/iii-project-recap | commands/iii-project-recap.md | Snapshot of the project at HEAD for context-switching |
iii context
For canonical iii primitive semantics (iii.registerFunction, iii.registerTrigger, worker registration, trigger types), see iii.dev/docs.
