CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

motion-dev-animations

Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects. Use when user requests animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animations, animated UI, micro-interactions, page transitions, or layout animations. Generates production TypeScript/JSX code with accessibility (prefers-reduced-motion) and performance validation (≥60fps). Supports entrance animations, gesture interactions (hover/tap/drag), scroll-based reveals, and layout transitions using spring physics and natural timing. Do NOT use for CSS-only transitions (use native CSS), static sites without JavaScript, Vue animations (use motion-v variant instead), or SVG/Canvas complex animations (GSAP better suited).

66

Quality

83%

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

63%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 is a dense, actionable reference with a clear workflow and verification step, but it is undermined by dangling references — the entire progressive-disclosure layer (examples, API reference, templates, validation script) points to files that do not exist — and by padded, redundant sections (duplicate design philosophy, duplicated when-to-use, meta-commentary metadata).

Suggestions

Ship the referenced bundle files (./examples/, ./reference/, ./templates/, ./scripts/validate_motion_config.py, ./schema/motion-config.schema.json) or remove the links — as delivered, every on-demand reference is a dead end.

Merge 'Purpose' and 'Design Philosophy (Apple/Jon Ive Principles)' into one section and delete the trailing 'Metadata' section (research citations, token-efficiency claims) — none of it changes how the skill is executed and it duplicates frontmatter metadata.

Make the 'Common Patterns' snippets fully executable by adding the import line (e.g. import { motion } from 'motion/react') to each code block, and drop the 'When to Use' section that restates the frontmatter description.

DimensionReasoningScore

Conciseness

The bulk is dense reference material (tables, decision tree, patterns), but several sections are padded or redundant: 'Purpose' and 'Design Philosophy (Apple/Jon Ive Principles)' state the same philosophy twice, 'When to Use' duplicates the frontmatter description, and the trailing 'Metadata' section (arXiv citations, '87% core reduction') is meta-commentary irrelevant to execution. This fits 'mostly efficient but includes some unnecessary explanation or could be tightened' rather than anchor 2, since the core content is compact tables rather than prose re-explaining known concepts.

3 / 5

Actionability

Strongly concrete: copy-paste patterns ('whileHover={{ y: -8, boxShadow: … }}'), a decision tree with exact values ('stiffness: 300-400, damping: 20', 'viewport={{once: true, amount: 0.3}}'), install commands, and an error table with specific fixes. Falls short of 5 because the 'Copy-Paste Ready' snippets omit import statements (imports appear only in the framework table) and the 'More patterns → ./examples/ directory' pointer targets files that do not exist in the bundle.

4 / 5

Workflow Clarity

The 'Clarify → Plan → Implement → Verify' workflow is a clear sequence, and Step 4 is an explicit verification checkpoint with named tools (Chrome DevTools Performance tab, Lighthouse CLS audit, system reduced-motion test), complemented by the Error Handling table for recovery. Not 5 because checkpoints name tools rather than define validate→fix→retry loops, and the 'Implement in Phases' bullets remain high-level.

4 / 5

Progressive Disclosure

The structure is well signaled — 'Examples Library (Progressive Loading)', 'Reference Documentation (Load On-Demand)', and Templates sections all point one level deep — but the actual bundle contains none of the referenced files: ./examples/*.md, ./reference/api-reference.md, ./reference/spring-physics.md, ./templates/*.tsx, ./scripts/validate_motion_config.py, and ./schema/motion-config.schema.json are all missing. The on-demand loading strategy the skill is built around breaks at runtime; the reasonably self-sufficient inline content keeps this at 3 rather than 2.

3 / 5

Total

14

/

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.

An exemplary description: concrete capabilities, an explicit and comprehensive 'Use when' trigger list, and negative triggers that disambiguate adjacent tools (CSS, motion-v, GSAP). The only nit is light marketing flavor in '120fps GPU-accelerated', which does not materially reduce clarity.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with concrete parameters: 'Creates 120fps GPU-accelerated animations with Motion.dev', 'Generates production TypeScript/JSX code with accessibility (prefers-reduced-motion) and performance validation (≥60fps)', and 'Supports entrance animations, gesture interactions (hover/tap/drag), scroll-based reveals, and layout transitions'. Coverage is comprehensive across the skill's scope, matching the anchor for multiple specific concrete actions rather than the 'minor gaps' anchor below it.

5 / 5

Completeness

Explicitly answers both questions: what ('Creates… animations with Motion.dev… Generates production TypeScript/JSX code with accessibility and performance validation') and when ('Use when user requests animation, motion, scroll effects…'), and adds negative triggers ('Do NOT use for CSS-only transitions… Vue animations… SVG/Canvas complex animations'). Both are concrete and explicit.

5 / 5

Trigger Term Quality

The 'Use when' clause enumerates natural user phrasings comprehensively: 'animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animations, animated UI, micro-interactions, page transitions, or layout animations' — including synonyms, lay terms, and API-level terms. Nothing common is missing.

5 / 5

Distinctiveness Conflict Risk

Clear niche (Motion.dev animations for React/Next.js/Svelte/Astro) with explicit disambiguation against neighboring tools: 'Do NOT use for CSS-only transitions (use native CSS), static sites without JavaScript, Vue animations (use motion-v variant instead), or SVG/Canvas complex animations (GSAP better suited)'. Minimal conflict risk.

5 / 5

Total

20

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

metadata_field

'metadata' should map string keys to string values

Warning

relative_links

Relative link issues: 12 missing

Warning

Total

13

/

16

Passed

Repository

whimzyLive/nightshift-ai

Path

.agents/skills/motion-dev-animations/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.