CtrlK
BlogDocsLog inGet started
Tessl Logo

cinematic-scroll-storytelling

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.

72

Quality

88%

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

77%

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

Highly actionable with a clear build sequence and QA checkpoints, but kept as one large inline file and padded slightly with buzzwordy taste notes and definitions of known concepts. Splitting the full implementations into reference files and trimming 'Target Feel'/'Effect Vocabulary' would raise it.

Suggestions

Move the full implementation functions into scripts/ or references/ files and keep SKILL.md as a concise overview pointing to them, so progressive disclosure reaches one-level-deep references.

Trim or remove the 'Target Feel' buzzwords ('Apple-level motion polish', 'Modern Awwwards interaction language') and the 'Effect Vocabulary' definitions of concepts Claude already knows (e.g. scrub) to improve conciseness.

The closing 'Prompt Template' largely restates the description; consider dropping it or shortening it to avoid token redundancy.

DimensionReasoningScore

Conciseness

Mostly efficient directive prose plus copy-paste code, but 'Target Feel' ('Apple-level motion polish', 'Modern Awwwards interaction language') is buzzwordy and 'Effect Vocabulary' defines concepts like scrub that Claude already knows. Not a 3 because these sections could be tightened; not a 1 because the bulk is lean and actionable.

2 / 3

Actionability

Provides complete executable functions (initPreloader, splitWords, initSplitReveals, initStickyCardStack, initParallax, etc.), CSS, HTML markup, an npm command, and concrete motion tokens — copy-paste ready, matching the fully-executable anchor.

3 / 3

Workflow Clarity

A clear 9-step 'Build Order' plus 'Page Anatomy' sequence, with a 'QA Checklist' supplying verification checkpoints (e.g. ScrollTrigger.refresh after layout shifts, preloader exit reliability). Not a 2 because verification is explicit; this is a non-destructive domain so no feedback-loop cap applies.

3 / 3

Progressive Disclosure

Well organized into named sections, but it is a ~420-line monolithic SKILL.md with substantial inline implementation code and no bundle files (references/scripts/assets absent). Matches the score-2 anchor where content that could be separate is inline; not a 3 because nothing is split into one-level-deep references.

2 / 3

Total

10

/

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 description that names concrete capabilities, gives explicit 'Use when' triggers, and occupies a distinct niche. Voice is third-person/imperative with no first/second-person to penalize.

DimensionReasoningScore

Specificity

Lists many specific concrete actions: 'Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders.' This matches the 'lists multiple specific concrete actions' anchor and is not vague, so it is not a 2.

3 / 3

Completeness

Explicitly answers both 'what' (the full capability list) and 'when' via the clause 'Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.' Not a 2 because the when-trigger is explicit rather than implied.

3 / 3

Trigger Term Quality

Natural domain keywords a user would say are well covered: 'premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling', plus 'parallax', 'staggered text reveals', and 'preloader'. This exceeds the 'some relevant keywords but missing variations' (2) level.

3 / 3

Distinctiveness Conflict Risk

Clearly niche (Lenis + GSAP ScrollTrigger cinematic scroll storytelling) with distinct triggers unlikely to fire for unrelated skills. Better than 2 because it would not plausibly overlap with generic frontend 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.