CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

74

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

96%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.

Excellent body content: executable code throughout, no padding or re-teaching of known concepts, a clear workflow with pitfalls and clarifying questions, and clean organization. The only structural note is that a moderately sized single file inlines everything rather than splitting reference material, which is a minor organization gap rather than a defect at this size.

Suggestions

If the skill grows, move customization knobs and pitfalls into a references/ file so SKILL.md stays a lean overview.

Add the one-line fix for the third pitfall ('element already in view before observer init') to complete the error-recovery guidance.

DimensionReasoningScore

Conciseness

Lean and efficient throughout: no explanation of what IntersectionObserver or keyframes are, no library comparisons, and every section (checklist, snippets, knobs, pitfalls, questions) adds non-obvious value. The in-snippet comments are user-facing usage instructions for the generated page, not padding, so it matches the 'every token earns its place' anchor rather than the 'minor trimming' anchor at 4.

5 / 5

Actionability

Fully executable, copy-paste-ready: complete observer script, complete keyframes block, the exact Tailwind class ('[animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll'), and a worked example div. Concrete customization knobs (threshold, rootMargin, once, duration/delay) cover the common cases; nothing is pseudocode or hand-wavy.

5 / 5

Workflow Clarity

A clear sequenced workflow ('1. Confirm animation style... 2. Provide the keyframes + JS snippet... 3. Offer focused tweaks'), a usage checklist ordering the insertion steps, a 'Common pitfalls' section for error recovery, and a 'Questions to ask when specs are missing' section acting as a feedback loop. Per the rubric's simple-skill allowance, the single task is unambiguous and no validation checkpoint is needed for this non-destructive operation, so it is not capped at 4.

5 / 5

Progressive Disclosure

Well-organized single-file structure with clear section headers, and no bundle files exist to reference, so nothing is buried or nested. However, the body is ~105 lines (above the under-50-line small-skill allowance for a top score) with everything inlined, so it sits at 'good structure, minor organization gaps' rather than the ideal overview-plus-references split.

4 / 5

Total

19

/

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: concrete capabilities, third-person voice, explicit 'Use when' trigger clause with natural keywords, and a well-delineated niche. The only weakness is slightly limited keyword synonym coverage, which keeps trigger-term quality just below comprehensive.

Suggestions

Add one or two common user phrasings to the trigger clause, e.g. 'fade in on scroll' or 'reveal elements as they enter the viewport', to broaden natural-term coverage.

Mention the once-vs-repeat trigger option in the capability sentence to slightly round out coverage of what the skill does.

DimensionReasoningScore

Specificity

Names the domain (on-scroll animation trigger) and several concrete capabilities: 'using IntersectionObserver with Tailwind-friendly animation classes and keyframes'. Not a score of 5 because it stops short of enumerating the full range of concrete actions (e.g., customizing trigger timing, repeat-vs-once behavior) that a comprehensive description would list.

4 / 5

Completeness

Explicitly answers both: what ('Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes') and when ('Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport') with concrete trigger phrases. Not below 5 because neither half is vague or implied.

5 / 5

Trigger Term Quality

Includes natural phrases users would say: 'scroll-reveal', 'animate-on-scroll', 'sequencing element animations when they enter the viewport'. A few common variants are missing (e.g., 'fade in on scroll', 'reveal on scroll', 'scroll animation'), which keeps it below the comprehensive synonym coverage of a 5.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (viewport-triggered animations) with distinct triggers ('scroll-reveal', 'animate-on-scroll', IntersectionObserver) that a general animation or Tailwind skill would not claim. Minimal conflict risk; not a 4 because the trigger phrases are specific enough to avoid meaningful overlap with adjacent 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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

MengTo/Skills

Path

agent-skills/web-design/animation-on-scroll/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.