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

96%

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

92%

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

The body is highly actionable with concrete commands, copy-paste markup, a sequenced workflow, and explicit render-verification checkpoints. Its main weakness is progressive disclosure: large reference tables are inline and the bundle files it points to are not verifiable in this snapshot.

Suggestions

Move the color-token, typography-token, and ground-truth editor-source tables into a bundled reference file (e.g. references/tokens.md) and keep SKILL.md as a concise overview that links to it, deepening progressive disclosure.

Ensure the referenced bundle paths (snippets/template.svg, snippets/primitives.svg, examples/*.svg, scripts/svg-kit-lint.mjs) ship with the skill so the one-level-deep references resolve.

Consider trimming the 'Why SVG, not a screenshot' rationale to a single line since the hard constraints and workflow already establish the design choice.

Dimension	Reasoning	Score
Conciseness	Body stays lean and task-specific — reference tables, exact hex values, and non-obvious XML-strictness traps each earn their place, and no generic concepts Claude already knows (SVG syntax, git) are re-explained. It is not a 2 because there is no padded explanation of basics despite the doc's length.	3 / 3
Actionability	Fully executable guidance throughout: `resvg path/to/figure.svg /tmp/check.png`, `grep -rl "docs-svg-kit" docs/editor/`, `pnpm --filter docs start`, and copy-paste-ready markup like `<rect class="sel-outline">` and `<use href="#anchor-pin">` with exact coordinates and naming conventions.	3 / 3
Workflow Clarity	A clear 6-step workflow plus an explicit verification feedback loop (render with resvg, inspect, re-run after edits) and a pre-publish checklist with checkboxes; validation is present rather than missing, so the destructive/batch cap does not apply.	3 / 3
Progressive Disclosure	Sections are well-signaled and the snippet/example files act as one-level-deep references, but substantial reference-grade material (color-token, typography-token, and ground-truth editor-source tables) is inline rather than split out, and the referenced bundle files (snippets/, examples/, scripts/) are not present in the snapshot to verify. It is above 1 because structure and navigation exist, but below 3 because the inline reference bulk should be externalized and the referenced paths cannot be confirmed.	2 / 3
	Total	11 / 12 Passed

Description

100%

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 strong: third-person voice, concrete capabilities, an explicit Use-when clause, and natural trigger phrases. It is distinguishable and unlikely to conflict with other skills.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions and contents — "Author SVG figures", "reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples to crib from" — matching the anchor for several specific concrete actions.	3 / 3
Completeness	Answers both what (author SVG figures / primitives / tokens / template / examples) and when with an explicit "Use when drawing diagrams that explain UI behaviour..." clause, matching the top anchor.	3 / 3
Trigger Term Quality	Explicit "Trigger phrases: \"svg diagram\", \"draw a figure\", \"visual for docs\", \"explain this gesture visually\", \"before/after diagram\"\" are natural terms a user would actually say, giving good coverage.	3 / 3
Distinctiveness Conflict Risk	Niche is clearly bounded (SVG docs figures for Grida, screenshot-replacement) with distinct triggers unlikely to fire for unrelated skills; it would not score below 3 because it is neither generic nor overlapping.	3 / 3
	Total	12 / 12 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: 2e0d276

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