CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

scroll-progress-timeline

Turn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion behavior. Use for onboarding, checkout, roadmaps, recipes, case studies, service processes, histories, or narratives where progress through the sequence should become visible while scrolling.

Quality

87%

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

78%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 tightly written, highly actionable build guide with an excellent verification checklist, weakened by two things: code snippets with undefined inputs, and a closing reference block that points to three files absent from the bundle, so the promised deep-dive material cannot be reached.

Suggestions

Ship the referenced bundle files (demo/index.html, demo/PROMPT.md, REFERENCES.md) or remove the dangling links — as written, all three paths 404 within the skill's own directory.

Make the progress snippet self-contained by defining viewportAnchor, lineStart, and lineEnd (e.g., show one line computing them from getBoundingClientRect of the first/last step).

Add a short error-recovery step to the Verify section (e.g., 'if the line head and active step disagree at a boundary, re-measure first/last centers before debugging state logic') to close the feedback loop.

DimensionReasoningScore

Conciseness

The body is lean and imperative throughout — "Place one progress line on top with transform-origin: top", "Collapse to a simple left rail on small screens" — with zero conceptual padding (no explanation of what IntersectionObserver or prefers-reduced-motion is) and every section earning its tokens. It matches the 5 anchor "lean and efficient; assumes Claude's competence" and sits above 4 because there are no instances of over-explanation to trim.

5 / 5

Actionability

Guidance is mostly executable: the steps data structure, the normalized-progress formula with scaleY transform, specific ARIA usage ("aria-current=\"step\""), and concrete viewport widths (390/768/1024/1440). It falls short of fully copy-paste-ready because the code snippet's inputs (viewportAnchor, lineStart, lineEnd) are never defined and no listener wiring is shown, leaving minor gaps; it is above 3 because the code is real, not pseudocode, and the layout decision rules are concrete and testable.

4 / 5

Workflow Clarity

Sections form a clear build sequence (model → line → layout → animate → navigation → reduced motion → verify) and the Verify section is an explicit checklist ending with an acceptance criterion ("The active step and line head must agree at every boundary"). It does not reach 5 because there is no error-recovery/feedback loop (what to do when a checkpoint fails), and it stays above 3 because validation is not merely implied — it has its own dedicated checklist section.

4 / 5

Progressive Disclosure

The body is well organized into seven focused sections, but the closing pointers — "Use [demo/index.html](demo/index.html) as the working reference and [demo/PROMPT.md](demo/PROMPT.md) to recreate or remix it. Keep [REFERENCES.md](REFERENCES.md) as the links-only implementation source list" — reference files that do not exist anywhere in the bundle (no references/, scripts/, assets/, or demo/ directories are present). Scored against the actual bundle structure per the judging guidelines, dangling references leave navigation broken at the one place the skill points outward, which fits the 3 anchor (structure present, references not usable) rather than 4.

3 / 5

Total

16

/

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, concrete capability list, and an explicit Use-when clause with multiple natural scenario triggers. The only gap is that the most common user phrasings for the artifact itself (timeline, steps, stepper) are not present as trigger synonyms.

DimensionReasoningScore

Specificity

The description enumerates concrete capabilities — "data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion behavior" — listing multiple specific actions with comprehensive coverage, matching the top anchor. It is not below-5 material because no capability area of the skill is left unnamed.

5 / 5

Completeness

Both halves are explicit: the "what" is the concrete capability list in the first sentence, and the "when" is the explicit "Use for onboarding, checkout, roadmaps, recipes..." clause with concrete trigger phrases. This matches the 5 anchor exemplar structurally and in concreteness; a 4 would require the when-clause to be less explicit or specific, which it is not.

5 / 5

Trigger Term Quality

Natural scenario terms are well covered ("onboarding, checkout, roadmaps, recipes, case studies, service processes, histories, or narratives"), but common phrasings users would actually say — "timeline", "steps", "stepper", "scroll animation" — are absent from the description itself ("timeline" appears only in the name, which the description judge does not score). Good coverage with a few natural terms missing fits the 4 anchor; it exceeds 3 because multiple real user scenarios are named, and falls short of 5 because direct synonyms for the core artifact are missing.

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche — scroll-linked progress visualization of ordered sequences — with scenario triggers (onboarding, checkout, roadmaps) that are unlikely to fire for unrelated skills, matching the 5 anchor's "clear niche with distinct triggers; minimal conflict risk". It does not fit the 4 anchor because there is no meaningful overlap with a closely related generic skill given the specificity of the trigger list.

5 / 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

relative_links

Relative link issues: 3 missing

Warning

Total

15

/

16

Passed

Repository

MengTo/Skills

Path

agent-skills/web-design/scroll-progress-timeline/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.