CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

motion-figure

Builds figures that move or respond to the reader, in three tiers: SMIL animations and slider widgets inside lessons, interactive mechanism figures that show the named parts of a real system with a computed verdict, and ordered dither bands in the course palette. Triggers: "animated figure", "add a slider widget", "interactive figure", "show how this system works", "make this diagram move", "dither masthead", "mechanism figure", "figure fence".

Quality

93%

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 unusually disciplined body: terse, project-specific rules, a numbered method, and a strong final checklist, with details correctly pushed to five real reference files. The main defect is bundle integrity — both `templates/` files the Method and Files sections point to for tiers 2 and 3 are absent, which also weakens copy-paste readiness for those tiers.

Suggestions

Add the missing `templates/mechanism.html` and `templates/dither.js` to the bundle, or repoint Method step 2 and the Files section to the existing reference files — two of the seven referenced paths are currently dead ends.

For tier 1, point early in the Method to the complete example modules in `references/toolkit.md` (or inline a minimal module from IIFE through `LF.register`) so a first-time author can copy a working skeleton instead of assembling one from thirteen steps.

Close the feedback loop in 'Check before you finish' with one line stating what to do when an item fails (fix it and re-run the validator and checklist), rather than leaving the recovery step implicit.

DimensionReasoningScore

Conciseness

The body is dense with project-specific facts Claude cannot know (the LF runtime, fence syntax, keySplines values, the 279 px measurement at 375 px width, ES5 constraints) and explains no general concepts. Every line is prescriptive; matches anchor 5 (lean, assumes competence, every token earns its place) rather than anchor 4, which would require trimmable over-explanation that is absent here.

5 / 5

Actionability

Guidance is largely executable — exact fence syntax with a copy-paste example, the figure-function signature, `viewBox="0 0 520 H"`, `var(--blueprint,#3553ff)` patterns, and `LF.register` call. It falls short of anchor 5 because Method step 2 directs tier-2/3 authors to 'start from `templates/mechanism.html`' and 'copy `templates/dither.js`', and neither file exists in the bundle — those paths are dead ends, a concrete gap in executable guidance.

4 / 5

Workflow Clarity

A 13-step Method in strict order, ending in step 13's explicit instruction to run the 'Check before you finish' section, which is a 15-item validation checklist covering reduced motion, dark theme, 375 px width, slider min/max NaN, and per-tier reference checklists, plus a browser-console validator in `references/smil-rules.md`. This matches anchor 5 (clear sequence, explicit validation, checklists); the work is not destructive or batch, so no cap applies.

5 / 5

Progressive Disclosure

The body is a clean overview with one-level-deep references, all five `references/*.md` files exist, and the Files section summarizes each so navigation is easy — structurally an anchor 5. Scoring against the actual bundle per the rubric guideline, however, 2 of the 7 referenced paths (`templates/mechanism.html`, `templates/dither.js`) are missing from the directory, a real organization gap that fits anchor 4 (good structure, minor gaps) better than 5.

4 / 5

Total

18

/

20

Passed

Description

96%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 states three concrete capabilities in third person, explicitly lists natural trigger phrases, and covers what-and-when completely. The only weakness is one broad trigger phrase ('show how this system works') that overlaps the sibling explainer skill's territory.

DimensionReasoningScore

Specificity

Names multiple concrete actions across three tiers — 'SMIL animations and slider widgets inside lessons', 'interactive mechanism figures that show the named parts of a real system with a computed verdict', 'ordered dither bands' — with comprehensive coverage and no vague padding. Matches the anchor 5 example (multiple specific concrete actions); it exceeds anchor 4 because no tier or capability is left uncovered.

5 / 5

Completeness

Explicitly answers both questions: the 'what' is the three concrete artifact types, and the 'when' is given as an explicit trigger list ('Triggers: "animated figure", ...'). This mirrors the anchor 5 example's what-plus-when-with-concrete-trigger-phrases structure; anchor 4 would require the when to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Eight natural trigger phrases users would actually say, including request forms ('add a slider widget', 'make this diagram move', 'show how this system works') and synonyms spanning all three tiers ('animated figure', 'interactive figure', 'mechanism figure', 'dither masthead', 'figure fence'). Matches anchor 5's comprehensive natural-term coverage; only notional gaps like 'animate this diagram' exist, which are near-synonyms of phrases already present.

5 / 5

Distinctiveness Conflict Risk

The niche (figures that move or respond, in a course-site context) is clearly carved out with distinct triggers, but 'show how this system works' is a broad phrase that could also apply to the sibling isometric-explainer skill the body says covers explainer pages. Fits anchor 4 (mostly distinct, minor overlap risk with closely related skills) better than anchor 5's minimal-conflict example.

4 / 5

Total

19

/

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

rohitg00/ai-engineering-from-scratch

Path

skills/motion-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.