CtrlK
BlogDocsLog inGet started
Tessl Logo

gsap-scrolltrigger-storytelling

Build cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.

52

Quality

56%

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

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/gsap-scrolltrigger-storytelling/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

47%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 lean, well-sectioned guidance document that avoids padding and names real GSAP APIs, but it lacks any executable code, its Workflow section is empty (no sequenced build process or validation checkpoints), and it duplicates the description in the body. Filling the workflow with a concrete ordered build sequence and a minimal ScrollTrigger snippet would address the weakest dimensions.

Suggestions

Fill the empty "## Workflow" section with a sequenced build process (e.g., set up gsap.context() → build the pinned timeline with labels → scrub-bind via ScrollTrigger → refresh after asset load → verify pin offsets and reduced-motion fallback), including explicit validation checkpoints.

Add one minimal executable example, such as a gsap.timeline() with ScrollTrigger { pin: true, scrub: 1 } and labeled scenes, so the concrete API references become copy-paste actionable.

Remove the verbatim duplicate of the description under "Use When" and delete or merge redundant sections (Scope vs. Experience target) to tighten token efficiency.

DimensionReasoningScore

Conciseness

The body is bullet-style with no concept over-explanation, but it can be tightened: the "Use When" section restates the frontmatter description verbatim, "## Workflow" is an empty header, and "Scope" overlaps "Experience target". This matches anchor 3 (mostly efficient, some unnecessary content) rather than 4, since the duplication and dead header are clearly removable.

3 / 5

Actionability

Guidance names real APIs and options ("scrub", "pin: true", "gsap.context()", "ScrollTrigger.refresh", "matchMedia()", "quickSetter/quickTo"), which goes beyond high-level hints, but the skill contains zero executable code for a code-oriented GSAP skill — no timeline/ScrollTrigger snippet to copy. Anchor 3 (some concrete guidance but incomplete) fits; anchor 4 requires mostly executable guidance.

3 / 5

Workflow Clarity

The "## Workflow" section is literally empty — there is no step sequence at all, only thematic guidance sections, and no validation checkpoints (e.g., verifying pin offsets, reduced-motion fallback, or visual testing). This matches anchor 2 (rough organization, many gaps, poorly defined steps); it is not 1 because the remaining sections are coherent and ordered logically.

2 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent) and the ~45-line body is organized into clear, scannable sections with no nested or buried references, which suits a lean single-file skill. Minor organization gaps — the empty "Workflow" header and the duplicated "Use When" line — keep it at anchor 4 rather than 5.

4 / 5

Total

12

/

20

Passed

Description

66%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 specific, domain-anchored description that clearly states what the skill builds, but it omits any "Use when..." trigger guidance and misses several natural trigger phrases users would say. Adding an explicit use-when clause with scroll-animation trigger terms would lift it substantially.

Suggestions

Append an explicit trigger clause, e.g. "Use when the user wants scroll-driven or scroll-synced animation, pinned/sticky sections, a cinematic product landing page, or an animated storytelling page with GSAP ScrollTrigger."

Include natural synonyms users actually say — "animate on scroll", "pinned sections", "parallax", "scroll-driven landing page" — alongside the existing cinematic phrasing.

Mention the key technical surfaces the body covers (pinning, scrubbed timelines, React cleanup) so the capability list is comprehensive rather than partially representative.

DimensionReasoningScore

Specificity

The description names the domain and tool ("GSAP ScrollTrigger") and lists five concrete capability areas ("sticky product storytelling", "progressive UI reveals", "scroll-synced animation", "smooth interpolation", "immersive section transitions"), matching anchor 4. It falls short of 5 because capabilities the body actually covers (pinned scenes, React integration, performance/refresh handling) are missing, and it exceeds anchor 3's 1-2 action limit.

4 / 5

Completeness

The "what" is explicit and concrete (build cinematic sticky storytelling with GSAP ScrollTrigger), but there is no "Use when..." clause or equivalent trigger guidance anywhere in the description; the rubric guideline caps this at 3. It is not a 4 because the "when" is entirely missing rather than merely weak.

3 / 5

Trigger Term Quality

"cinematic", "sticky product storytelling", "scroll-synced animation", and "immersive section transitions" are natural user phrasings, giving good keyword coverage. Common variations a user might actually say — "animate on scroll", "pinned sections", "parallax", "landing page" — are absent, so it does not reach anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

"GSAP ScrollTrigger" plus "sticky product storytelling" carves a clear niche that is mostly distinct from generic web-animation or UI skills, with only minor overlap risk against a broader front-end animation skill. It lacks the razor-sharp trigger phrasing of anchor 5.

4 / 5

Total

15

/

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