docs-svg-kit

Author SVG figures for Grida docs — diff-able, version-controlled vector diagrams embedded in doc pages instead of screenshots. Provides reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples to crib from. Canvas user docs (docs/editor/) are the first consumer; the kit is meant to generalize to any product's docs. Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states — that a screenshot alone can't capture. Trigger phrases: "svg diagram", "draw a figure", "visual for docs", "explain this gesture visually", "before/after diagram".

Quality

90%

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

88%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.

A highly actionable, well-sequenced skill body: concrete commands, exact tokens and markup patterns, and an unusually thorough three-tier verification workflow with checklists and error-recovery guidance. The only notable weakness is mild redundancy around the render-verification instruction and some advocacy padding in the 'Why SVG' rationale.

Suggestions

State the render-verification requirement once (in 'Verify before publishing') and reference it from 'Common pitfalls' and the checklist instead of repeating it four times.

Trim the screenshot-cost arithmetic in 'Why SVG, not a screenshot' to the decision rule ('when SVG can carry the meaning, prefer SVG') — the WebP/PNG byte counts don't change what the agent does.

Ship the referenced bundle paths (snippets/, examples/) alongside the skill so the catalog and crib examples are verifiably present at use time.

Dimension	Reasoning	Score
Conciseness	Nearly all content is kit-specific knowledge Claude cannot know (hard constraints, watermark scheme, token tables, resvg-specific XML traps), so tokens largely earn their place. Minor over-explanation could be trimmed: the WebP/PNG size math in 'Why SVG, not a screenshot', and the render-verification instruction repeated four times across 'Common pitfalls', the 'Verify before publishing' intro, Tier 1, and the checklist. Not a 3 because there is no explanation of concepts Claude already knows; not a 5 because of that redundancy.	4 / 5
Actionability	Copy-paste ready throughout: concrete commands ("resvg path/to/figure.svg /tmp/check.png", "grep -rl \"docs-svg-kit\" docs/editor/", "pnpm --filter docs start"), exact markup patterns per primitive ("<g transform=\"translate(cx,cy)\"><use href=\"#anchor-pin\"/></g>"), exact hex values, naming conventions, and a worked two-example crib list. The common cases are covered end-to-end from template copy to embedding.	5 / 5
Workflow Clarity	The Workflow section gives a clear 6-step sequence (copy template → browse catalog → compose → crib from examples → save with naming rule → embed with alt-text rule), and 'Verify before publishing' adds a three-tier validation ladder with an explicit feedback loop ("After every meaningful edit, re-run resvg and re-inspect"), failure signatures with fixes for the XML traps, and an 11-item pre-publish checklist — exactly the validate → fix → re-validate shape the anchor-5 example rewards.	5 / 5
Progressive Disclosure	Structure is good: snippet files are one level deep and clearly signaled, with a table of roles and a 'When to look in which' guide, plus a well-organized section flow. Not a 5 because the body is a ~250-line monolith that inlines the full token/typography/primitives/ground-truth tables — appropriate since the bundle's other files are SVG assets rather than docs, but a split reference would keep the overview lean; also, the referenced paths (snippets/*.svg, examples/, ../docs-canvas, ../vision) cannot be verified against the actual bundle because no bundle directories accompany this skill copy.	4 / 5
	Total	18 / 20 Passed

Description

92%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.

A strong description: third-person voice, concrete capability inventory, and an explicit 'Use when...' clause with natural trigger phrases. The only weakness is slightly narrow trigger coverage — a few common synonyms and the .svg extension are absent.

Suggestions

Add '.svg' and common synonyms like 'diagram' or 'illustration' to the trigger phrases to widen natural-keyword coverage.

Consider naming the companion boundary in the description itself (e.g. 'for visuals embedded in docs-canvas prose') to further reduce overlap risk with prose-focused skills.

Dimension	Reasoning	Score
Specificity	"Author SVG figures for Grida docs" is a concrete action, and the description comprehensively enumerates concrete artifacts by name — "reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples". Coverage of what the kit provides is comprehensive for its domain; not the level below (4) because there are no meaningful gaps in the capability inventory.	5 / 5
Completeness	What is explicit and concrete (author diff-able SVG figures with named primitives, tokens, template, examples) and when is explicit with concrete trigger phrases ("Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states — that a screenshot alone can't capture"). This matches the anchor-5 exemplar structure of clear 'what' + 'Use when...' with trigger phrases.	5 / 5
Trigger Term Quality	Explicit trigger phrases are natural and varied: "svg diagram", "draw a figure", "visual for docs", "explain this gesture visually", "before/after diagram", plus "Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states". Not a 5 because a few natural synonyms and the file extension are missing (".svg", "diagram", "illustration", "screenshot alternative").	4 / 5
Distinctiveness Conflict Risk	A clear niche — SVG figures explaining UI behaviour in Grida docs, explicitly contrasted with screenshots — with trigger phrases unlikely to fire for other skills. The closely related docs-canvas companion is disambiguated in the body ("Use that skill for the prose, this one for the visuals"), keeping conflict risk minimal.	5 / 5
	Total	19 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 3 missing, 3 suspicious	Warning
referenced_paths_exist	Referenced path issues: 1 missing	Warning

	Total	14 / 16 Passed

Repository: gridaco/grida
Path: .agents/skills/docs-svg-kit/SKILL.md
Commit: d086528

Reviewed: 7 days 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.