Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add joao-aires/agent-skills-public --skill architecture-diagraminggit clone --depth 1 https://github.com/joao-aires/agent-skills-publicWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/joao-aires/agent-skills-public/architecture-diagraming)<a href="https://agentmods.dev/skills/joao-aires/agent-skills-public/architecture-diagraming"><img src="https://agentmods.dev/badge/skills/joao-aires/agent-skills-public/architecture-diagraming/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/joao-aires/agent-skills-public/architecture-diagraming"><img src="https://agentmods.dev/badge/skills/joao-aires/agent-skills-public/architecture-diagraming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00165 | $0.02595 |
| Opus 5 | $0.00082 | $0.01298 |
| Sonnet 5 | $0.00033 | $0.00519 |
| Haiku 4.5 | $0.00016 | $0.00260 |
Grade A, and why
architecture-diagraming scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 186 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Architecture Mapper
Create beautiful, responsive, single-file HTML architecture diagrams with dark/light theme support.
When to Use
Use this skill any time the user needs a visual representation of how things connect, flow, or are structured in a software system. This includes but is not limited to:
- System or application architecture overviews
- Cloud infrastructure layouts (AWS, Azure, GCP)
- Microservice interaction maps
- Data flow and pipeline diagrams
- Sequence diagrams (component interactions over time)
- State machine visualizations
- Network topology and deployment maps
- Integration diagrams between systems
- DevOps / CI-CD pipeline flows
- Availability and resilience diagrams
Why HTML Over Mermaid or Static Images
HTML-based diagrams are the right choice when flexibility matters more than speed-of-creation:
- Text wraps naturally — no truncation or overflow issues
- CSS variables enable instant theme switching — one palette change recolours everything
- Rich content inside nodes — embed lists, badges, links, status indicators
- Responsive by default — diagrams adapt to any viewport with
clamp()and grid - Version-controllable — diffs are meaningful, unlike binary images
- Interactive — hover effects, theme toggles, clickable elements are trivial to add
Architecture
Each diagram is a single self-contained HTML file with all CSS and JS inline. No build step, no dependencies. Open it directly in a browser.
Key Principles
- Single file — everything in one HTML file for portability
- No frameworks — vanilla HTML, CSS, and minimal JS only
- Dark theme default with light toggle — dual-theme via CSS variables and
html.light-modeclass - CSS variables everywhere — never use raw hex in component markup; always
var(--name)orcolor-mix() clamp()for all sizing — every font-size, padding, margin, and gap usesclamp(min, preferred, max)- HTML nodes, CSS connectors — nodes are
<div>elements; connectors use CSS gradients and borders; SVG only when unavoidable
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 186 lines · 165 tokens per session scan A bd4553118dbd
architecture-diagraming is a skill published in the GitHub repository joao-aires/agent-skills-public (2 stars, last pushed 4d ago), licensed MIT. It adds 165 tokens to every session and 2,595 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
browserwing-executor
Control browser automation through HTTP API. Supports page navigation, element interaction (click, type, select), data extraction, accessibility snapshot analysis, screenshot, JavaScript execution, and batch operations.
dstack-prototyping
Use with the dstack skill for model-serving work when the image, serving command, resources, backend/fleet choice, or service behavior is not proven. Guides task-first prototyping on real hardware, choosing fleets/backends that can reuse idle instances and caches, checking vLLM/SGLang sources, and verifying the final…
ranui
Use when building UI with the ranui web-component library (elements like , , , , ) or its fluent DOM builder (ranui/builder — Div/View/Span/signal/createEffect/EventManager). Covers the import map, the full element inventory, conventions, accessibility, and where the authoritative API reference lives.
form-list-layout
Configure what a form and a list look like — sysuiform, sysuisection and sysuielement for forms; sysuilist, sysuilistelement and sysuirelatedlist for lists; sysfilter for saved filters. Views, why a field must exist in the dictionary first, and what snowcreatemenu really writes.
sequence-diagrams
Create animated sequence diagrams showing interactions between participants using the Excalimate MCP server. Use when asked to visualize API call sequences, message flows, protocol handshakes, request/response patterns, authentication flows, or communication between services, users, and systems.
reka-ui
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.