CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

architecture-diagram

Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.

Quality

86%

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

SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-3

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

A detailed, actionable design-system reference with concrete SVG/HTML patterns and numeric layout rules, weakened by some redundant explanation, a missing output-validation step, and a referenced template file that does not exist in the bundle.

Suggestions

Trim concepts Claude already knows (e.g., the SVG paint-order explanation) and compress the SRI/integrity-hash detail into a reference file to improve token efficiency.

Add an explicit validation step to the generation workflow — e.g., open the produced .html in a browser and confirm component boxes do not overlap and the legend sits outside all boundary boxes.

Provide the referenced 'resources/template.html' (or correct the path) so the one-level-deep progressive-disclosure reference resolves to a real file.

DimensionReasoningScore

Conciseness

Mostly lean and actionable, but includes explanation Claude already knows ('SVG elements are painted in document order, so arrows drawn first will appear behind shapes') and a verbose export-toolbar section with full SRI integrity hashes — tighter than the verbose anchor at 1, but not the every-token-earns-its-place level at 3.

2 / 3

Actionability

Provides concrete, copy-paste-ready snippets — the rgba color table, grid/arrowhead SVG patterns, component box pattern, and numeric spacing rules with explicit y-coordinates — matching the fully-executable anchor.

3 / 3

Workflow Clarity

The Template section gives a 6-step customization list but no validation/verification checkpoint for the generated output; the Wrong/Right spacing examples act as partial checkpoints, so it sits above the unclear-steps anchor at 1 but below the explicit-validation anchor at 3.

2 / 3

Progressive Disclosure

Sections are well-organized, but the body references 'resources/template.html' while no references/scripts/assets bundle directory exists, so the one-level-deep reference is broken; this keeps it below the well-signaled-working-references anchor at 3 and above the monolithic/deeply-nested anchor at 1.

2 / 3

Total

9

/

12

Passed

Description

100%Weight 40%Scale 1-3

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 concise, well-formed description that states a concrete capability, includes natural trigger terms, and explicitly pairs what-it-does with when-to-use it. It carves a distinct niche unlikely to conflict with other skills.

DimensionReasoningScore

Specificity

States a concrete composite action — 'Create polished dark-themed architecture diagrams as self-contained HTML+SVG files' — naming both the output type and the HTML+SVG medium, matching the multiple-concrete-actions anchor rather than the partial domain-only anchor at 2.

3 / 3

Completeness

Explicitly answers both what ('Create ... HTML+SVG files') and when ('Use when the user asks for ...'), satisfying the both-what-and-when anchor; the 'Use when' clause is present so it is not capped at 2.

3 / 3

Trigger Term Quality

Lists natural user-facing terms — 'system, infrastructure, cloud, security, or network topology diagrams' — covering the phrasings a user would actually say, matching the good-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

Has a clear niche (dark-themed architecture/topology diagrams) with distinct topology triggers, making overlap with general diagram or code skills unlikely; matches the clear-niche anchor.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

Cocoon-AI/architecture-diagram-generator

Path

architecture-diagram/SKILL.md

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.