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

81%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, actionable reference with strong workflow and validation guidance tailored to a geometry-fragile task. Its main weaknesses are minor verbosity in the rationale/verify prose and large inline reference tables that could be split out.

Suggestions

Move the large primitives, color-token, and typography-token tables into a separate reference file (e.g. references/tokens.md) and keep SKILL.md as a concise overview with a pointer, tightening progressive disclosure.

Trim the 'Why SVG, not a screenshot' section to one or two lines of rationale; the constraints and workflow already convey the motivation.

Condense the verify section's prose (e.g. the resvg backstory) while keeping the commands, checklist, and tier structure intact.

Dimension	Reasoning	Score
Conciseness	Largely efficient, project-specific reference (tokens, primitives, source-file pointers) without explaining generic concepts Claude already knows, but the 'Why SVG, not a screenshot' rationale and some explanatory prose in the verify section could be trimmed.	4 / 5
Actionability	Concrete, executable guidance throughout — 'resvg path/to/figure.svg /tmp/check.png', 'grep -rl docs-svg-kit docs/editor/', watermark XML, primitive markup, embed syntax — with only minor gaps where SVG snippets are fragments rather than complete files.	4 / 5
Workflow Clarity	A numbered 6-step Workflow plus a tiered 'Verify before publishing' section with explicit validation checkpoints, a feedback loop ('After every meaningful edit, re-run resvg and re-inspect'), and a pre-publish checklist.	5 / 5
Progressive Disclosure	Good structure: an overview table of snippet files with roles, one-level-deep references to snippets/ and examples/, and clear 'when to look in which' guidance — though the large inlined primitives/color/typography tables could live in separate files, and the referenced bundle files are not present to verify they resolve.	4 / 5
	Total	17 / 20 Passed

Description

100%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 exemplary: concrete capabilities, explicit 'Use when' guidance, natural trigger phrases, and a clearly distinct niche. It does not pad or over-claim.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete capabilities — 'reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples' — giving comprehensive, non-abstract coverage.	5 / 5
Completeness	Explicitly answers both what ('Author SVG figures... Provides reusable primitives...') and when ('Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states — that a screenshot alone can't capture') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Provides explicit natural trigger phrases a user would actually say — 'svg diagram', 'draw a figure', 'visual for docs', 'explain this gesture visually', 'before/after diagram' — with good synonym coverage.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (SVG figures that explain UI behaviour in docs, vs screenshots) with distinct triggers, making overlap with other skills minimal.	5 / 5
	Total	20 / 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: 8ef5e53

Reviewed: about 11 hours 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.