architecture-diagram-creator agent skill by mhattingpete
Creates HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment for system documentation and high-level overviews.
At a glance
| Publisher | mhattingpete |
|---|---|
| Repository | mhattingpete/claude-skills-marketplace (18 listed skills) |
| Category | Video, Image, Audio and Creative |
| License | Apache-2.0 |
| Last commit | July 25, 2026 (repository) |
| SKILL.md | 77 lines, 295 words |
| Bundled files | 4 files, including references, assets or templates |
| Quality score | 78/100 · C Passes all seven graded checks |
| Security scan | Not scanned |
| README badge | Get the listing badge and raise the score |
Before you install
Read from the skill's files at the directory's October 19, 2026 snapshot: what ships with it, what its code reads, and the terms it is published under.
- Bundled scripts: none.
- License: Apache-2.0, an open-source or open-content license.
Install architecture-diagram-creator
The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.
npx skills add https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/architecture-diagram-creatortmp="$(mktemp -d)"
git clone --depth 1 https://github.com/mhattingpete/claude-skills-marketplace.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"visual-documentation-plugin/skills/architecture-diagram-creator .claude/skills/
rm -rf "$tmp"python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
--repo mhattingpete/claude-skills-marketplace \
--path visual-documentation-plugin/skills/architecture-diagram-creatormhattingpete/claude-skills-marketplace is third-party code. Read SKILL.md and any bundled scripts before you install it.
How the author describes it
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
From the description field of SKILL.md. Agents read this line to decide when to load the skill.
Sections in SKILL.md
- When to Use
- Components to Include
- HTML Structure
- SVG Pattern for Data Flow
- Workflow
Files in the skill folder
SKILL.mdassets/templates/architecture_components.htmlassets/templates/base_template.htmlreferences/example_architecture.html
Suede Skill Check: 78/100 · C
Report snapshot · · graded-v2
The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.
Source revision: b5b34bcf4c92. Report version fee18f505ada. Badge URLs follow the latest listing; save the report to keep this version.
Download report · Request a fresh review
What to review next
- Boundary clause: 0 of 4 points. 4 when the description says when not to use the skill (“Not for …”, “Do not use …”, “Use … instead”).
- Example request: 0 of 3 points. 3 when the description quotes an example request (3–60 characters in quotation marks).
- Instruction depth: 4 of 7 points. 7 for a SKILL.md body of 500–3,000 words; 4 for 250–4,500; 1 for 100 or more.
Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.
architecture-diagram-creator passes the required frontmatter check and all seven graded checks, which cover the SKILL.md format, a declared license and a commit in the last year. Those checks earn 56 of the score’s points; the rest come from description quality, instruction depth, bundled files, maintenance and curated-list citations. How the score works.
See the checks and points
| Check | Result |
|---|---|
| Frontmatter parses and declares a name and a description | Pass |
| Name uses lowercase letters, digits and hyphens, 64 characters or fewer | Pass |
| Name matches the skill's folder name | Pass |
| Description is between 50 and 1,024 characters | Pass |
| Description says when an agent should use the skill | Pass |
| SKILL.md body is 500 lines or fewer | Pass |
| A license is declared in the frontmatter or the repository | Pass |
| Repository has a commit in the last 12 months | Pass |
| Score component | Points |
|---|---|
| Structural checks | 56 of 56 |
| Description length | 5 of 5 |
| Boundary clause | 0 of 4 |
| Example request | 0 of 3 |
| Instruction depth | 4 of 7 |
| Reference files | 3 of 3 |
| Bundled scripts | 0 of 2 |
| Recent maintenance | 6 of 9 |
| Curated-list citations | 4 of 7 |
| Tool permissions declared | 0 of 2 |
| Compatibility declared | 0 of 2 |
Show the listing and raise the score
architecture-diagram-creator is listed with 78/100 · C. This badge links to its Suede listing. Skills scoring 80–99 add a numeric and a letter quality shield; the largest open points for architecture-diagram-creator are boundary clause (4), example request (3) and instruction depth (3). Send your repository and the points you want to raise, then request a fresh review after updating the skill.
[](https://skills.suedeai.ai/directory/mhattingpete/claude-skills-marketplace/architecture-diagram-creator/)<a href="https://skills.suedeai.ai/directory/mhattingpete/claude-skills-marketplace/architecture-diagram-creator/"><img src="https://skills.suedeai.ai/directory/badge.svg" alt="Suede Skills Directory: listed" height="20"></a>Where this skill is cited
mhattingpete/claude-skills-marketplace appears in 3 curated lists: BehiSecc/awesome-claude-skills, ComposioHQ/awesome-claude-skills, heilcheng/awesome-agent-skills.