CtrlK
BlogDocsLog inGet started
Tessl Logo

architecture-diagram

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

48

Quality

54%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/creative/architecture-diagram/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

60%Weight 40%Scale 1-5

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

The body is a well-organized, information-dense design system covering colors, typography, spacing, and document structure with concrete values, and the workflow is clear. Its main weakness is that its single external reference — the full HTML template it tells Claude to load — is absent from the bundle, breaking both actionability and navigation.

Suggestions

Ship the referenced `templates/template.html` (or a references/ equivalent) in the bundle so the 'Load the full HTML template' instruction resolves to a real file.

If the template cannot be bundled, inline the minimal working HTML skeleton (head/CSS, SVG skeleton, legend) in SKILL.md so generation does not depend on a missing file.

Add a light post-generation step (e.g. confirm the HTML file was written and suggest opening it) to close the workflow with an explicit checkpoint.

DimensionReasoningScore

Conciseness

The body is dense and efficient — exact rgba/hex palette in a table, terse px sizing rules, and a minimal SVG pattern snippet — with only minor trim candidates such as the Preview section's `open`/`xdg-open` commands, which Claude already knows. Not 5 because of those few over-explained spots.

4 / 5

Actionability

Concrete guidance is strong (exact color values, the double-rect masking technique, z-order rules, legend placement rules, an HTML card snippet), but the promised full HTML template — the structural backbone the body directs Claude to load via `skill_view(name="architecture-diagram", file_path="templates/template.html")` — is missing from the bundle, leaving a key gap between anchor 4's 'minor gaps' and this.

3 / 5

Workflow Clarity

The 4-step workflow (describe → generate → save with a default path → open in browser) is clearly sequenced with a sensible default output location; no validation checkpoints, but the operation is a single non-destructive generation, so neither the destructive-cap nor batch guidance applies. Not 5 because there is no explicit post-generation check (e.g. verifying the file renders).

4 / 5

Progressive Disclosure

The body is well sectioned and points one level deep to a single template file, but that referenced file (`templates/template.html`) does not exist in the bundle — no references/, scripts/, assets/, or templates/ directory is present — so the navigation promise is broken and the detailed material is inaccessible, fitting anchor 2 rather than the well-signaled but complete structure of anchor 4.

2 / 5

Total

13

/

20

Passed

Description

48%Weight 40%Scale 1-5

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

The description is concise and distinct, naming a clear niche and output format, but it is a verbless noun phrase with no 'Use when...' trigger guidance and limited synonym coverage. Adding an action verb and an explicit trigger clause would move it into the top band.

Suggestions

Rewrite as a third-person action statement, e.g. 'Generates dark-themed technical architecture, cloud infrastructure, and system diagrams as standalone SVG-in-HTML files.'

Add an explicit trigger clause: 'Use when the user asks for an architecture diagram, cloud/infrastructure map, service topology, or deployment diagram.'

Include common synonyms users would say ("system diagram", "network topology", "deployment diagram") to raise trigger-term coverage.

DimensionReasoningScore

Specificity

"Dark-themed SVG architecture/cloud/infra diagrams as HTML" names the domain and output format well but contains no action verb at all — it is a noun phrase, matching 'Names the domain but actions are minimal or generic' rather than the 3 anchor's 1-2 concrete actions.

2 / 5

Completeness

The 'what' is clear (generate dark-themed SVG architecture diagrams as HTML) but there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

Terms like "architecture", "cloud", "infra", "SVG", "HTML", and "diagrams" are ones users would naturally say, but common variations and synonyms are missing (e.g. "system diagram", "deployment diagram", "infrastructure" spelled out).

3 / 5

Distinctiveness Conflict Risk

"Dark-themed SVG architecture/cloud/infra diagrams" carves a distinct niche with specific triggers; only minor overlap risk exists with general diagramming skills (concept-diagrams, excalidraw).

4 / 5

Total

12

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

13

/

16

Passed

Repository
NousResearch/hermes-agent
Reviewed

Table of Contents

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.