CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figure

Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Use when a change or an explanation needs a diagram — how a request flows, what a background job does, what a feature changed — or when the user asks for a diagram, figure, animation or "show it visually". The docs site's own pages use the interactive player instead (see step 4).

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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.

An exemplary skill body: it teaches an unknown DSL through one complete worked example, gives copy-paste-ready commands for every step, and builds in an explicit look-before-you-ship validation loop with error-recovery guidance. The only refinements are a slightly trimmable main example and format documentation that could be moved to a reference file.

DimensionReasoningScore

Conciseness

The body is dense and teaches only what Claude cannot know — the Giotto JSON DSL and repo-specific workflow — assuming competence elsewhere ("the quoted <<'DOC' heredoc passes the JSON through untouched" is one brief justifying clause, not a tutorial). The 36-line JSON example is the core teaching device but a slightly trimmed version plus the pointer to the 13 example figures could save tokens, so it is not 'every token earns its place'.

4 / 5

Actionability

Guidance is fully executable and copy-paste ready: a complete working diagram JSON, "npx giotto export - path/to/out.svg <<'DOC'", "npx giotto spec out.svg", "python3 -m http.server 8777", the raw GitHub URL pattern, and the exact MDX snippet for the docs-site variant. Common cases, including the static/dark export, are all covered with concrete commands.

5 / 5

Workflow Clarity

The four steps (write → render → look → place) are clearly sequenced with an explicit mandatory validation step ("Look at it before you ship it — Always", with a two-screenshot loop to catch later beats) and error-recovery feedback ("warnings print on stderr: fix them"; a broken element reference "is an error: the export fails and writes nothing"). The operation is non-destructive, so the batch/destructive cap does not apply.

5 / 5

Progressive Disclosure

Sections are well organized and numbered, and external references (the FORMAT text in node_modules/giotto/lib/edit.js and the 13 figures in hindsight-docs/figures/) are clearly signaled and one level deep. However, the ~40-line inline format specification is the kind of reference material that could live in a separate bundle file, leaving a minor organization gap — there is no bundle to split into, so this is 'good structure' rather than optimal splitting.

4 / 5

Total

18

/

20

Passed

Description

83%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: it explicitly states what the skill produces (a self-contained animated SVG figure), when to use it with natural trigger phrasings, and where the output belongs. The only weakness is a few missing natural synonyms (chart, SVG) that keep trigger coverage and distinctiveness just short of top marks.

DimensionReasoningScore

Specificity

The description gives concrete specifics around the core action — "Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post" — naming the artifact, its parts, and exact destinations. It falls short of the 5 anchor because it describes one draw action rather than multiple distinct concrete actions.

4 / 5

Completeness

Both what and when are explicitly answered: the what is "one self-contained SVG" with named element types, and the when is an explicit "Use when" clause with concrete trigger scenarios ("how a request flows, what a background job does, what a feature changed") and user phrasings ("diagram, figure, animation or 'show it visually'").

5 / 5

Trigger Term Quality

Natural trigger phrases are well covered: "diagram", "figure", "animation", "show it visually", plus context terms (README, PR, issue, blog post). A few natural synonyms a user might say (chart, SVG, drawing, visualize) are missing, matching the 'good keyword coverage; a few natural terms missing' anchor rather than comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

The niche is clear and distinct — an animated SVG figure for markdown contexts — and it even disambiguates from the docs site's interactive player. Trigger words like "diagram" or "figure" could still overlap with charting or drawing skills, so minor overlap risk remains.

4 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

vectorize-io/hindsight

Path

.claude/skills/figure/SKILL.md

Reviewed

Table of Contents

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.