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.

80

Quality

100%

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

100%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is concise, fully actionable, and well-structured: executable JS/CSS snippets, a short workflow, a usage checklist, customization knobs, pitfalls, and clarifying questions. It assumes Claude's intelligence and adds only what is needed.

DimensionReasoningScore

Conciseness

Lean body that assumes Claude's competence — no boilerplate explaining what IntersectionObserver or Tailwind is; code comments are limited to usage instructions, and every section earns its place.

3 / 3

Actionability

Provides fully executable, copy-paste-ready code: a complete IntersectionObserver script, @keyframes CSS, and a Tailwind class example, plus concrete customization knobs (threshold, rootMargin, once, translateY, blur).

3 / 3

Workflow Clarity

A simple snippet skill with a clear three-step sequence (confirm specs → provide snippet → offer tweaks) and a usage checklist that doubles as verification; no destructive/batch operation requires a feedback loop here.

3 / 3

Progressive Disclosure

Self-contained skill with well-organized, clearly labeled sections and no nested or multi-level references; inline copy-paste code is appropriate for this snippet-based skill and there are no bundle files to navigate.

3 / 3

Total

12

/

12

Passed

Description

100%

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, third-person description that concisely states concrete capabilities and provides explicit natural-language triggers for when to use the skill. It answers both 'what' and 'when' without padding or over-claims.

DimensionReasoningScore

Specificity

Names multiple concrete actions — 'Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes' — matching the top anchor that lists several specific capabilities.

3 / 3

Completeness

Explicitly answers both what ('Create an on-scroll animation trigger...') and when ('Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations...'), with an explicit 'Use when' trigger clause.

3 / 3

Trigger Term Quality

Includes natural terms users would say — 'scroll-reveal', 'animate-on-scroll', 'sequencing element animations when they enter the viewport' — giving good coverage of common phrasings.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (scroll-reveal animation triggers) with distinct, specific triggers unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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.