CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

scroll-experience

You see scrolling as a narrative device, not just navigation. You create moments of delight as users scroll. You know when to use subtle animations and when to go cinematic. You balance performance with visual impact. You make websites feel like movies you control with your thumb.

Quality

54%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/scroll-experience/SKILL.md

The canonical home for this skill is scroll-experience in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

57%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 body delivers solid, executable pattern code for scroll animations, parallax, and sticky sections, plus useful anti-patterns. Its main weaknesses are padding (duplicated persona text, empty boilerplate sections), a missing implementation workflow with validation checkpoints, and dangling references to solution sections that were never written.

Suggestions

Either write the four solution sections referenced in the Sharp Edges table (Fixing Scroll Jank, Mobile-Safe Parallax, Accessible Scroll Experiences, Content-First Scroll Design) or remove those references and inline one-line fixes.

Delete the duplicated Role/persona block and the empty "When to Use" filler; replace the latter with real trigger guidance and a short sequenced workflow (pick stack → design story beats → implement → test on mobile → verify performance).

Add validation checkpoints for the risky cases the skill itself flags, e.g., verify prefers-reduced-motion support and test scroll performance on a real device before considering a section done.

DimensionReasoningScore

Conciseness

The code snippets and tables are lean, but the body pads tokens with non-instructing material: the frontmatter description is repeated verbatim as the Role block, filler lines like "Tools and techniques for scroll animations" and "Tell stories through scroll depth" add nothing, and the closing "When to Use" section is empty boilerplate ("This skill is applicable to execute the workflow or actions described in the overview."). Mostly efficient but could be tightened — fits anchor 3, not 4, because the padding is more than minor.

3 / 5

Actionability

Concrete, largely copy-paste-ready code is provided for the common cases: GSAP ScrollTrigger setup, Framer Motion useScroll/useTransform parallax, native CSS scroll-timeline, CSS sticky, GSAP pin, and horizontal scroll sections. Not anchor 5 because key details are missing or broken: the Sharp Edges table's "Solution" column points to sections ("## Fixing Scroll Jank", "## Mobile-Safe Parallax", "## Accessible Scroll Experiences", "## Content-First Scroll Design") that do not exist anywhere in the skill, so the highest-severity fixes have no actionable guidance.

4 / 5

Workflow Clarity

The skill is a pattern reference rather than a workflow: the story-beats sequence (Hook → Context → Journey → Climax → Resolution) gives a rough narrative order, and each pattern has a "When to use" note, but there is no sequenced implementation workflow (choose stack → design beats → implement → verify mobile/performance) and no validation checkpoints. Anchor 3 (sequence present but checkpoints missing) fits better than 4, which requires most checkpoints.

3 / 5

Progressive Disclosure

Section structure exists (## Patterns with ### subsections, anti-patterns, sharp edges) and no bundle files are provided, so everything is inlined — acceptable for a ~250-line skill but the three full pattern guides are candidates for split-out references. The decisive defect is that the Sharp Edges table references four solution sections that don't exist, so navigation fails exactly where it is signaled. Anchor 3 (some structure, could be better organized) rather than 2, since headers and tables do provide real navigable structure.

3 / 5

Total

13

/

20

Passed

Description

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

The description is persona fluff written in second person with zero concrete actions, no trigger guidance, and no 'Use when...' clause. It would rarely be selected for the right task because it tells the model nothing actionable about what the skill does or when to invoke it.

Suggestions

Rewrite in third person with concrete actions, e.g., "Implements scroll-driven animations, parallax storytelling, sticky sections, and scroll snapping using GSAP ScrollTrigger, Framer Motion, or native CSS scroll-timeline."

Add an explicit trigger clause: "Use when building scroll-driven web experiences, parallax effects, scroll-triggered reveals, or cinematic scrolling pages."

Include natural synonyms users would say (parallax, scroll animation, scroll-triggered, sticky section) to improve both trigger matching and distinctiveness from generic frontend skills.

DimensionReasoningScore

Specificity

No concrete actions are stated anywhere: "create moments of delight", "balance performance with visual impact", and "make websites feel like movies you control with your thumb" are pure abstract persona language with no specific operations. Base level was 2 (domain named but generic actions), reduced by 1 per the rubric's voice penalty because the entire description is written in second person ("You see...", "You create...", "You know...").

1 / 5

Completeness

The 'what' is only vaguely implied through persona statements, and there is no 'Use when...' clause or any trigger guidance whatsoever. This matches anchor 2 (vague 'what', no 'when') — it cannot reach 3 because the 'what' never states concrete actions, and the missing-when cap applies anyway.

2 / 5

Trigger Term Quality

Relevant natural keywords are present ("scrolling", "scroll", "animations", "websites"), but common variations a user would actually say are missing: parallax, scroll-triggered/scroll-driven, scroll snapping, sticky sections, and no library names (GSAP, Framer Motion). Fits anchor 3 (some relevant keywords, missing common variations) rather than 4, which requires good coverage.

3 / 5

Distinctiveness Conflict Risk

The scroll-experience domain is somewhat specific (scrolling, scroll animations), but the persona framing overlaps with generic frontend/animation/web-design skills, and no distinct triggers are given. Anchor 3 (somewhat specific, could overlap) fits better than 4, which requires mostly-distinct triggers.

3 / 5

Total

9

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

plugins/AI-Agents-Safe-Coding-Skills-claude/skills/scroll-experience/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.