CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

cinematic-gsap-lenis-motion-system

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.

77

Quality

97%

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.

This is a strong, highly actionable skill: complete executable code for every advertised feature, a coherent setup-to-init workflow with a QA checklist, and taste/token guidance that encodes real design judgment rather than generic knowledge. The only weakness is that everything is inlined in one long file with no reference files to split overview from advanced detail.

Suggestions

Move the deeper material (hover recipes, pinned story-scene patterns, full CSS foundation) into one or more files under references/ (e.g. references/hover.md, references/pinned-sections.md) and keep short well-signaled links in SKILL.md, keeping the body as an overview.

Trim redundancy between the QA Checklist and Performance Rules (e.g., merge the animated-properties and blur guidance) so each rule appears once.

DimensionReasoningScore

Conciseness

The body is code-dense with almost no concept padding — it never explains what GSAP or smooth scrolling is, and sections like 'Motion Taste' and 'Base Tokens' capture design judgment Claude cannot infer. Minor trimming is possible (e.g., blur filters are applied broadly despite 'use blur sparingly' advice, and the QA checklist slightly overlaps Performance Rules), placing it just below the every-token-earns-its-place anchor.

4 / 5

Actionability

Nearly everything is copy-paste executable: an install command, a complete initialization block, full split-text/reveal/parallax/pin/magnetic/cursor/mouse-parallax functions with concrete GSAP parameters, preset maps, an explicit init order, and even manual line-wrapper markup for exact line breaks. Common cases are covered with specific values (eases, durations, staggers, trigger points).

5 / 5

Workflow Clarity

The sequence is explicit and complete: Install → Setup (with reduced-motion branch) → Markup API → CSS Foundation → per-feature initializers → a literal Init Order block → a QA Checklist that serves as a validation checkpoint. SPA cleanup (gsap.context()/ctx.revert(), killing ScrollTriggers on route transitions) is also addressed, giving clear error-avoidance and teardown guidance.

5 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/ directories), so all content lives inline in a single well-headered ~600-line file that is easy to navigate via its section structure. It is well organized, but advanced material such as the hover recipes, pinned-story patterns, or the full CSS foundation would sit more appropriately in one-level-deep reference files to keep the SKILL.md body as an overview — a minor organization gap rather than a structural problem.

4 / 5

Total

18

/

20

Passed

Description

100%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 an exemplary one-sentence skill description: concrete third-person capability statement naming specific libraries, followed by an explicit 'Use for' clause with rich natural-language trigger phrases. Both 'what' and 'when' are answered clearly and specifically.

DimensionReasoningScore

Specificity

The description lists multiple concrete capabilities — 'Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis', 'staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement' — naming both the exact libraries and the specific interaction patterns it produces, in third person.

5 / 5

Completeness

It explicitly answers 'what' (create cinematic web motion systems with named libraries and interaction types) and 'when' via a concrete 'Use for' clause listing trigger scenarios. Both halves are explicit and specific.

5 / 5

Trigger Term Quality

It covers natural user phrasing comprehensively: 'luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors', plus the library names GSAP/ScrollTrigger/Lenis users would mention. These are the terms a user would actually say when asking for this kind of site.

5 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — premium/cinematic web motion with GSAP, ScrollTrigger, and Lenis — that is unlikely to fire for unrelated skills; the trigger list is specific to this domain with minimal overlap risk.

5 / 5

Total

20

/

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

skill_md_line_count

SKILL.md is long (618 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

MengTo/Skills

Path

agent-skills/web-design/cinematic-gsap-lenis-motion-system/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.