Anatomy

Archify is an open-source agent skill and Node.js rendering and validation system that turns a codebase or system description into searchable, shareable interactive diagrams. It supports architecture, workflow, sequence, data-flow, and lifecycle diagrams and can be used with Cursor, Claude Code, Codex CLI, and OpenCode. Agents produce typed JSON intermediate representations, which Archify deterministically validates and compiles into self-contained HTML and SVG artifacts. The generated viewer supports node search, optional revision-verified source inspection, upstream and downstream reach tracing, route inspection, semantic-role comparisons, guided stories, themes, presets, and finite motion. Archify can compare two validated snapshots as Before, Delta, and After views, identifying added, removed, changed, moved, and rerouted facts. Its exports include PNG, SVG, WebM, and 1200×630 share cards; it can be installed as a global skill with `npx skills add tt-a1i/archify -g`.

Epic Infographics is an open-source skill for AI agents that generates data-driven infographics as HTML/CSS scenes rather than stock dashboard templates. It guides the agent through audience and story-angle selection, visual-metaphor and design-language selection, scene composition, chart construction, rendering, and self-review. Charts are computed from explicit arithmetic, palettes undergo color-blind-safety checks, and a headless preflight script checks text collisions, clipping, canvas boundaries, and readable sizes. The skill can render still PNGs and animate the same HTML through CSS keyframes into MP4 or GIF output using Playwright, headless Chromium, and ffmpeg; its motion workflow treats animation as a layer on an approved still and reviews contact sheets of the result. It includes named design-language specifications, composition and chart references, HTML templates, render, and animation workflows.

ai-iso-skill is a Claude skill that generates interactive isometric figures as single HTML files. It renders plain SVG without libraries: projection code maps box faces to SVG matrices, while paint order handles depth and a state object with render() drives interaction; CSS supplies motion. Before drawing, the skill has Claude determine what pressing a part should produce, such as typed text, a number, or a note. The resulting figures use a hairline drawing on a numbered plate and can include functional controls such as timer buttons or a light switch. It can be installed as a Claude Code plugin, copied into the Claude skills directory, or uploaded as an .skill file to Claude.ai. The project is MIT-licensed.

System Atlas is an agent skill from Inkboard that turns architecture discussions into an explorable isometric atlas. A single data file serves as the source for an interactive map and a generated SYSTEM.md text view, keeping structures, execution flows, design decisions, and open questions synchronized. The map supports hoverable structures, pinned views, drill-down into execution steps, pan and zoom, progressive-disclosure chapters, and inspectable data packets showing routes and representative JSON payloads. The generated SYSTEM.md includes a decisions table with ADR links, structure descriptions and steps, flow tables, and an index of questions tracked by stable IDs and states such as open, resolved, or routed. The skill can be installed with `npx skills add inkboard/system-atlas`. It generates a self-contained HTML map with no build step or runtime dependencies.