CtrlK
BlogDocsLog inGet started
Tessl Logo

animation-on-scroll

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

70

Quality

85%

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

82%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 content is highly actionable with complete, copy-paste-ready code and sensible customization guidance, organized into clear sections. It is concise and assumes Claude's competence, with only minor redundancy and no real need for external references.

DimensionReasoningScore

Conciseness

The body is mostly lean executable code with minimal concept explanation, but the "Questions to ask when specs are missing" section overlaps with Workflow step 1, leaving minor trim opportunities.

4 / 5

Actionability

Fully executable IntersectionObserver JS, keyframes CSS, and a Tailwind class example are copy-paste ready, and the customization knobs reference concrete values (threshold, rootMargin, once, translateY, blur).

5 / 5

Workflow Clarity

A clear three-step workflow plus a usage checklist gives an unambiguous sequence for this single-purpose, non-destructive skill, though it lacks explicit validation checkpoints (none are strictly required here).

4 / 5

Progressive Disclosure

No bundle files exist; content is organized into clear, well-labeled sections in a single SKILL.md. At ~110 lines it exceeds the under-50-line simple-skill exception, so the inlined code blocks keep it just below the ideal split.

4 / 5

Total

17

/

20

Passed

Description

87%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 with explicit what-and-when structure and natural trigger terms. It is well-targeted to its niche and largely free of vague language.

DimensionReasoningScore

Specificity

"Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes" names several concrete components, but they describe one capability rather than multiple distinct actions, so it sits below the comprehensive-coverage anchor.

4 / 5

Completeness

It explicitly states what it does (create an on-scroll animation trigger...) and when to use it ("Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport") with concrete trigger phrases.

5 / 5

Trigger Term Quality

"scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport" gives good natural keyword coverage, though common synonyms like "fade in on scroll" or "reveal on scroll" are absent.

4 / 5

Distinctiveness Conflict Risk

The scroll-reveal/animate-on-scroll viewport niche is distinct with specific triggers, creating minimal overlap risk with other skills.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
MengTo/Skills
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.