skills.rest
afzalmukhtar
afzalmukhtarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-agent-architecture-svg

Generate three-section SVG diagrams of AI agent architectures with data contracts and safety.

Updated Apr 12, 2026
Search Tags:#architecture#validation#agent#svg#diagram#render-gate#phased-construction
One-click install
npx skills add https://github.com/afzalmukhtar/agent-architecture-skill --skill build-agent-architecture-svg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-agent-architecture-svg
Source: https://github.com/afzalmukhtar/agent-architecture-skill/tree/main
Command: npx skills add https://github.com/afzalmukhtar/agent-architecture-skill --skill build-agent-architecture-svg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The skill helps design consistent, production-ready SVG diagrams for agent architectures, ensuring clear data flows, data contracts, and class structure, without modifying any source code.

Core Features & Use Cases

  • Phase-driven SVG construction for single-agent, multi-agent, and hierarchical setups
  • Three-section canvas: Message Flow, Data Contracts & Safety, Class Architecture
  • Companion render-gate hook to enforce automatic validation after each SVG write
  • Clear, evidence-based content discipline with layout formulas and accessibility guidelines
  • Install, usage, and workflow guidance to integrate diagrams before code generation

Quick Start

Describe your system and run this skill to generate a three-section SVG diagram without altering any code.

Frequently Asked Questions about build-agent-architecture-svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an SVG diagram for a multi-agent system architecture?▼

Generate multi-agent SVG architecture diagrams by describing your system to trigger phased construction, producing a structured canvas covering Message Flow, Data Contracts, and Class Architecture.

What is the best way to visualize data contracts and safety considerations in AI agents?▼

Visualize AI agent data contracts and safety considerations by rendering a dedicated SVG section enforcing evidence-based content discipline, ensuring every arrow label corresponds to a model box.

How do you enforce validation when rendering architecture SVG diagrams?▼

Enforce architecture SVG validation by applying a companion render gate hook that automatically validates structural consistency and layout formulas after each diagram write.

Can I create hierarchical agent architecture diagrams without modifying my source code?▼

Create hierarchical agent architecture diagrams without modifying source code by running this skill to generate standalone SVG visualizations anchored by constants extracted from your codebase.

Does this architecture diagram generator support single-agent configurations?▼

The architecture SVG generator supports single-agent configurations alongside multi-agent and hierarchical setups, rendering class architecture and message flow tailored to the chosen agent topology.

Related Skills

Explore More Software Engineering Skills→
duy-tungduy-tung

ck:tech-graph

Generate SVG+PNG technical diagrams from natural language descriptions.

Community
Advanced
PedroGiudicePedroGiudice
5

architecture-diagram-creator

Generate HTML architecture diagrams with data flows and deployment layers.

Community
Advanced
Ayub-KhanAyub-Khan

documentation

Generate and synchronize README files, API specs, ADRs, and diagrams with source code.

Community
Intermediate
stitts-devstitts-dev

claude-md-audit

Audit codebases and generate CLAUDE.md documentation with parallel Explore agents.

Community
Advanced