dimensional-drawing

Diagram Design is a diagram-generation skill for Claude Code, Codex, Factory Droid, and Pi. It produces self-contained HTML and SVG diagrams through 39 editorial visual types, including architecture, flowchart, sequence, state-machine, data-flow, timeline, Sankey, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database-schema diagrams. It can read a website to match its brand, and can redraw draw.io or Mermaid sources at a selected format, size, and detail level. Its semantic system patterns describe behavior separately from layout, so queues, policy traces, and trust boundaries can use an existing diagram type without adding new layout types. The repository supplies each type in minimal-light, minimal-dark, and full-editorial variants. Static HTML is the default; optional accessible motion is available for ordered explanations. The diagrams require no build step, JavaScript, or external image dependency.

Anatomy is an open-source agent skill for Claude Code, Antigravity, OpenCode, and Codex that explains technical ideas by constructing interactive isometric illustrations of physical machines, instruments, tools, or other mechanisms. It uses a workflow that collects the relevant numbers, invents a physical object for the concept, creates a parts list and geometry, renders parts back to front, adds interaction, and verifies the result with geometry and browser checks. The skill can produce standalone HTML pages, embedded SVG files, or React/Next.js components. Its SVG kit provides isometric solids, round parts, pipes, cables, four-tone shading, animation, cards, and live readouts; optional WebGL layers add effects such as fire, exhaust, water, caustics, light, and glow, while a beta 3D mode re-projects and re-shades moving parts each frame. The repository includes Node build scripts, complete examples, React components, reference guides, and headless Chrome tools for screenshots, scripted interaction, line-end checks, and geometry audits. It uses Node.js built-in modules without npm dependencies for the kit and examples, with React 18+ required for React output and Chrome or Chromium required for browser checks. The project is distributed under the MIT license. Its stated limits include not being a chart library, not targeting people or exact maps, and requiring WebGL for shader effects.

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.