architecture-diagram

Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A tight, specific, well-organized instruction body that wastes no tokens and clearly scopes a single deliverable. The main gap is the absence of an executable HTML/SVG skeleton that would lift actionability to copy-paste-ready.

Suggestions

Add a minimal self-contained HTML boilerplate (with the Google Fonts link, grid background, and one SVG marker arrowhead) so the skill is copy-paste ready rather than assembled from a spec.

Include a short worked example of one layered band with two component boxes and a connecting arrow to anchor the color-by-role and behind-the-box arrow rules concretely.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence — it gives exact values ("#020617", "rx=\"6\"", "1.5px stroke", "≥40px") with no padding or explanation of what HTML/SVG or architecture diagrams are.	3 / 3
Actionability	Concrete specifics are excellent (hex/rgba fills, font sizes, gap rules), but no executable HTML/SVG skeleton is provided, so it stops short of copy-paste-ready code that the score-3 anchor calls for.	2 / 3
Workflow Clarity	This is a simple single-task skill whose one action is unambiguous and organized into clear sections (Visual design system, Layout rules, Output); as a non-destructive generation task it does not require a validation gate.	3 / 3
Progressive Disclosure	The body is under 50 lines, has no bundle files or nested references, and is organized into well-labeled sections, matching the simple-skills allowance for a top score on progressive disclosure.	3 / 3
	Total	11 / 12 Passed

Description

92%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that pairs a concrete deliverable spec with an explicit Use-when trigger and natural keywords. Its only weakness is moderate overlap risk with general diagramming skills from somewhat broad trigger terms.

Suggestions

Tighten trigger terms toward the specific output (e.g., "Use when asked for an HTML/SVG architecture or system diagram") to reduce overlap with general diagramming or Mermaid-style skills.

Consider naming the deliverable format earlier as a discriminator ("single self-contained HTML architecture diagram") so the niche reads as unambiguous on first scan.

Dimension	Reasoning	Score
Specificity	Quotes a concrete action with specific output attributes — "Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG" — naming exact deliverable properties rather than vague language.	3 / 3
Completeness	Explicitly answers both what ("Create...architecture diagram as a single self-contained HTML file with inline SVG") and when ("Use when asked to visualize system components...") via an explicit Use-when clause.	3 / 3
Trigger Term Quality	Includes natural phrasings a user would say — "architecture diagram", "visualize system components", "layers", "services", and "how parts of a codebase fit together" — giving good coverage of common request variations.	3 / 3
Distinctiveness Conflict Risk	The dark-themed HTML/SVG architecture-diagram niche is fairly distinct, but broad triggers like "system design" and "visualize...components" could overlap with general diagramming or visualization skills, so it is not a clear 3.	2 / 3
	Total	11 / 12 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: AgentEra/Agently
Path: examples/skills_executor/skills/architecture-diagram/SKILL.md
Commit: 1317da6

Reviewed: about 4 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.