Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →zrosenbauer/svg-creator
This skill should be used when the user wants to create, fix, or convert SVG assets in any project — banners, badges, icons, logos, window/IDE mockups, terminal screenshots, or diagram nodes. Common triggers include "create an SVG", "make a banner", "design an icon", "draw a logo", "fix the viewBox", "convert SVG to PNG", and "preview this SVG". Bakes in edge-to-edge viewBox discipline (`viewBox="0 0 W H"` — no padding, no offsets), hardcoded hex colors (SVG cannot read CSS variables), a Node- b
Passed 16 of 19 test cases with the skill, and 8 of 19 without it.
and 7 more in the full report
10 fixed9 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
When the preview server script is running for an SVG file, what HTTP endpoints does it expose for testing and health monitoring?
| Checked | Without skill | With skill |
|---|---|---|
| The response identifies the endpoints /, /svg, and /health | Missed | Passed |
The instructions your model reads when the skill loads.
End-to-end procedure for creating SVG assets that render correctly across every consumer (GitHub README, slide deck, web app, mobile email, social card). Each section explains the why so you can adapt — don't follow them mechanically.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" width="W" height="H">
The viewBox must start with 0 0 and use the actual content
dimensions. No offsets like viewBox="120 40 660 420". No padding.
Why: padding inside an asset can't be removed downstream. It bakes
empty pixels into every usage, fights object-fit: contain, breaks
alignment in any consumer's layout, and makes the asset unreusable at
different sizes. Layout spacing belongs in the layout (CSS, README, slide
template), not in the asset.
What this means in practice: if you want a "window inside a workspace" look, the workspace is the asset — make the workspace itself the bounding box. Don't simulate "the window inside a frame" by offsetting the window inside a larger viewBox.
node scripts/preflight.mjs
Checks Node ≥ 20, that sharp is resolvable from cwd, and whether the
chrome-devtools MCP is configured. Prints fix commands and exits 1 if any
required dep is missing. Add --install (with optional --yes for
non-interactive use) to install missing deps via the repo's package
manager (auto-detects pnpm / yarn / bun / npm).
test cases passed, vs 8 / 19 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.