Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →agentera/architecture-diagram
Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG.
Passed 3 of 22 test cases with the skill, and 5 of 22 without it.
and 1 more in the full report
2 fixed1 passed either way15 still failing4 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Generate an HTML architecture chart for a financial trading portal. Add embedded JavaScript click handlers so users can expand or collapse component details dynamically.
| Checked | Without skill | With skill |
|---|---|---|
| The HTML document contains no script tags. | Missed | Passed |
The instructions your model reads when the skill loads.
Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.
#020617 with a subtle 40px grid pattern.rx="6"), 1.5px stroke, semi-transparent
fills. Colour components by role:
rgba(8,51,68,0.4), stroke #22d3eergba(6,78,59,0.4), stroke #34d399rgba(120,53,15,0.3), stroke #fbbf24rgba(76,29,149,0.4), stroke #a78bfargba(251,146,60,0.3), stroke #fb923crgba(30,41,59,0.5), stroke #94a3b8#94a3b8.marker arrowhead; draw connecting arrows before boxes so
they sit behind them.Return the complete HTML document as a single string. Do not include commentary outside the HTML.
test cases passed, vs 5 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.