skills.rest
CaufieldZ
CaufieldZCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagrams

Organize multi-system designs into a single HTML document with tabbed architecture diagrams.

4|Updated Apr 8, 2026
Search Tags:#design#architecture#templates#documentation#html#diagrams#css-grid
One-click install
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill architecture-diagrams-caufieldz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagrams
Source: https://github.com/CaufieldZ/pm-workspace-public/tree/main/.claude/skills/architecture-diagrams
Command: npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill architecture-diagrams-caufieldz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

When architectural needs involve multi-system interactions, this skill helps produce clear, tabbed architecture diagrams in a single HTML document for reviews, planning, and risk analysis.

Core Features & Use Cases

  • Single-file HTML diagrams with CSS-grid layout and inlined templates.
  • Multi-tab navigation to present overview, accounts/flows, roadmaps, risks, and decisions.
  • Reusable skeletons for design reviews and technical assessments.

Quick Start

Populate arch-diagrams HTML with the provided templates and fill in the required tab content, then open the file in a browser to verify the layout.

Frequently Asked Questions about architecture-diagrams

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

FAQPage Schema
How do I generate architecture diagrams as a single HTML document?▼

You can generate architecture diagrams as a single HTML document by using a JS template that organizes multi-system designs into a self-contained file with a CSS-grid layout for clear presentation.

What is the best way to document multi-system interactions for design reviews?▼

Documenting multi-system interactions is best handled by creating tabbed HTML diagrams that separate concerns into Overview, Accounts/Flows, and Roadmap views for technical assessments.

Can I present system risks and roadmaps in one HTML file with multiple tabs?▼

Yes, you can present system risks and roadmaps in one HTML file using multi-tab navigation to display overview, accounts/flows, roadmaps, risks, and decisions within a single document.

How to create a self-contained HTML artifact with a CSS-grid layout for architecture?▼

Create a self-contained HTML artifact by populating an HTML template with inlined scripts and using a CSS-grid layout to render architecture diagrams without external dependencies.

Does the architecture diagram template support roadmapping and risk analysis?▼

Yes, the architecture diagram template supports roadmapping and risk analysis by providing reusable skeletons with specific tabs for visualizing risks, decisions, and roadmap milestones.

Do I need external libraries to render multi-tab architecture diagrams in a browser?▼

No, you do not need external libraries to render multi-tab architecture diagrams; the skill generates a self-contained HTML file with inlined templates and CSS-grid layout that opens directly in a browser.

Related Skills

Explore More Design & Creative Skills→
catlog22catlog22
2.1k

project-analyze

Generate architecture, design, and methods reports from codebases with Mermaid diagrams.

Community
Advanced
ivanov-iivanov-i

visual-explainer

Convert terminal outputs into self-contained HTML pages with Mermaid diagrams.

Community
Advanced
mshaheerzmshaheerz
1

HTML Multi-Page Template Architecture

Generates a complete multi-page static HTML/CSS/JS template architecture for web applications.

Community
Intermediate
AJBcodingAJBcoding
4

d3-viz

Create custom interactive D3.js visualizations with data binding and responsive sizing.

Community
Intermediate