CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

motion-advanced

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.

Quality

85%

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

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

Excellent actionability and lean, non-padded writing: complete executable components, clear decision tables, rules tied to anti-patterns with fixes. The weaknesses are duplication between examples and a monolithic single-file layout with zero progressive disclosure — no references/ files despite enough example material to justify them.

Suggestions

Split the 14+ code examples into one-level-deep reference files (e.g. references/drag-gestures.md, references/text-svg-animation.md, references/loaders.md) and keep SKILL.md as an overview with the decision tables, rules, and anti-patterns, linking to each.

De-duplicate repeated content: drop the standalone drag-to-dismiss example in favor of the end-to-end version, and factor the shared visibilitychange pause pattern (ShimmerSkeleton and PulseDot are near-identical) into one canonical snippet or a shared hook.

Add the missing trigger synonyms from the description's scope (swipe, reorder, spinner/loading state) to the 'When to Activate' list so routing matches how users actually phrase these requests.

DimensionReasoningScore

Conciseness

The body is dense and code-forward with essentially no explanation of concepts Claude already knows — no 'what is motion' padding, compact decision tables, and terse one-line principles. It is not a 5 because of verbatim duplication: the drag-to-dismiss sheet appears both standalone and again inside the end-to-end example, and the visibility-pause pattern is repeated nearly identically in both ShimmerSkeleton and PulseDot.

4 / 5

Actionability

Nearly every pattern ships as a complete, copy-paste-ready component with imports, 'use client', token/spring usage, and cleanup — e.g. 'export function BottomSheet', 'export function CursorFollower', 'export function LoadingButton' — covering the common cases named in the Outputs section. The few JSX fragments (draggable card, swipe detection) are idiomatic usage snippets rather than pseudocode, so this sits at anchor 5 rather than 4.

5 / 5

Workflow Clarity

Sequencing and routing are clear: 'Requires motion-foundations to be set up first', 'Use these when motion-patterns is not enough', a 'Choosing the right advanced API' decision table, and numbered Rules cross-referenced from an Anti-Patterns table with fixes. It is not 5 because there is no explicit multi-step workflow with validation checkpoints (acceptable for a non-destructive reference skill, but the anchor-5 feedback-loop structure is absent); not 3 because the ordering, prerequisites, and decision guidance present no real gaps.

4 / 5

Progressive Disclosure

The file has good section structure and no broken or nested references, but there are no bundle files at all — all 14+ full code examples plus an end-to-end example are inlined in a single ~590-line SKILL.md. Content that would fit one-level-deep reference files (loader components, text/SVG examples, the end-to-end sheet) is inline, matching the anchor-3 pattern of 'content that should be separate is inline' despite decent organization.

3 / 5

Total

16

/

20

Passed

Description

88%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 strong description: concrete capability list, explicit 'Use when' trigger clause, clear niche with a declared prerequisite. The main gap is incomplete synonym coverage in trigger terms (no 'swipe', 'reorder', 'spinner', or 'loading state') and unstated differentiation from the sibling motion-patterns skill.

DimensionReasoningScore

Specificity

The description lists multiple concrete, named capabilities — 'drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree' — comprehensively covering the skill's stated scope. It exceeds the anchor-4 example ('several specific actions; minor gaps') because no meaningful capability from the body is missing.

5 / 5

Completeness

It explicitly answers both questions: the 'what' is the concrete action list, and the 'when' is an explicit 'Use when building drag and drop, gestures, text or SVG animation...' clause with concrete trigger phrases. This matches the anchor-5 example structure exactly; the anchor-4 case ('when' could be more explicit) does not apply.

5 / 5

Trigger Term Quality

'Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js' uses natural user phrasing with good coverage, matching the anchor-4 example in tone. It falls short of 5 because common synonyms users would actually say are absent — e.g. 'swipe', 'reorder', 'spinner', 'loading state', 'drag-to-dismiss'.

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche ('Advanced motion patterns... drag & drop, gestures, SVG path drawing') with distinct triggers and declares the dependency 'Requires motion-foundations'. It is not a 5 because the phrase 'animation in React or Next.js' overlaps with the sibling 'motion-patterns' skill (referenced only in the body, not the description), leaving minor conflict risk between the family members.

4 / 5

Total

18

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

frontmatter_unknown_keys

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

Warning

Total

14

/

16

Passed

Repository

affaan-m/ECC

Path

skills/motion-advanced/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.