Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

GSAP Motion · qierkang | DecimalAI

frontendby qierkang

GSAP Motion

qierkang/gsap-motion

Source qierkang/platform-project-skill ↗License MIT

Implement purposeful GSAP motion in React web interfaces. Use only for rich sequencing, coordinated state transitions, or data animation that exceeds simple CSS micro-interactions and when the selected motion Profile is motion-gsap or motion-gsap-advanced.

SkillScore83Maintained

Automatic

Frontend / UI pack

Last verified 8/28/2026

What it changes

Passed 19 of 23 test cases with the skill, and 14 of 23 without it.

Without skill61%

With skill83%

Checks it passed that the model alone missed

The implementation handles prefers-reduced-motion settings.
The response includes support for prefers-reduced-motion users.
The implementation targets CSS transform properties during expansion.

and 6 more in the full report

6 fixed13 passed either way3 still failing1 broke

Pass-rate lift: +22 pp
Tokens: -7%
Agent turns: 0%
Response time: -6%

Model gemini-3.6-flashMeasured 8/28/2026v119 of 23 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/qierkang-gsap-motion/SKILL.md https://app.decimal.ai/s/qierkang-gsap-motion/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add qierkang-gsap-motion, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/qierkang-gsap-motion/ and pins it in .decimal/skills.lock

decimalai skills add qierkang-gsap-motion

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/qierkang-gsap-motion/SKILL.md https://app.decimal.ai/s/qierkang-gsap-motion/SKILL.md

Raw file: /s/qierkang-gsap-motion/SKILL.md ↗ · machine-readable summary at /s/qierkang-gsap-motion.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

Our marketing site's hero section has several GSAP timelines and hover interactions built into a React component, but users are reporting frame drops and memory issues when navigating away. Please review our animation setup and provide refactored code that improves performance and lifecycle safety.

What was checked, without and with the skill
Checked	Without skill	With skill
The response explicitly states the user-experience purpose for the animations.	Missed	Passed
The refactored implementation delegates hover state transitions to pure CSS.	Missed	Passed
The React component uses animation context cleanup to revert timelines on unmount.	Passed	Passed

case-02 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md10 linessingle file

GSAP Motion

State the user-experience purpose and choose the smallest motion primitive.
Prefer CSS for simple hover, focus, opacity, and one-step transitions.
For React, scope selectors, keep animation ownership with the component, and revert contexts on cleanup.
Animate transform and opacity where possible.
Provide equivalent content and control under prefers-reduced-motion.
Test interruption, rapid navigation, resize, unmount, and repeated data updates.

Do not hijack scrolling, delay primary input, animate every element, or hide latency behind an uninterruptible sequence. Register plugins once and verify lifecycle cleanup.

Track record

Benchmark

19 / 23

test cases passed, vs 14 / 23 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/9/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

qierkang / platform-project-skill

assets/templates/omni-platform/.agents/skills/gsap-motion/SKILL.md

View on GitHub ↗

License MITImported 10/3/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

qierkang/gsap-motion-advancedBuild advanced GSAP timelines, ScrollTrigger sequences, and plugin-driven interactions. Use only when an approved interaction requires coordinated timelines or scroll-linked storytelling and the selected Profile is motion-gsap-advanced.Close match+28 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

GSAP Motion

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills