Standardizes animation development using GSAP best practices and cleanup.
Install
mkdir -p .claude/skills/gsap-facundo-cachan && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15789" && unzip -o skill.zip -d .claude/skills/gsap-facundo-cachan && rm skill.zipInstalls to .claude/skills/gsap-facundo-cachan
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
This repository contains **GSAP (GreenSock Animation Platform) skills** for AI coding agents. When editing or adding skills, follow these rules.Key capabilities
- →Define skill directory names to match the skill's frontmatter name
- →Include a `name` field in the skill's frontmatter
- →Provide a `description` field in the skill's frontmatter
- →Write skill descriptions in the third person
- →Focus skill content on correct API usage and cleanup
- →Add new skills by creating a `SKILL.md` file in a skill-specific directory
How it works
This skill provides rules for structuring skill directories, defining `SKILL.md` frontmatter, and writing skill content. It ensures consistency across skills for AI coding agents.
Inputs & outputs
When to use gsap
- →Implementing web animations
- →Optimizing animation code
- →Ensuring animation cleanup
About this skill
Guidance for AI Agents Working in This Repo
This repository contains GSAP (GreenSock Animation Platform) skills for AI coding agents. When editing or adding skills, follow these rules.
Repo structure
- skills/ — Each subdirectory is one skill. The CLI and agents discover skills by scanning
skills/for directories that containSKILL.md. - Skill directory name must exactly match the
namein that skill’s frontmatter (e.g.skills/gsap-core/↔name: gsap-core).
SKILL.md requirements
- Frontmatter (YAML):
name(required): lowercase, hyphens only, max 64 chars, must match parent directory name.description(required): what the skill does and when to use it; include trigger terms so agents know when to apply it. Max 1024 chars.license(optional): e.g.MITif the skill is under the repo license.
- Body: Markdown instructions. Keep under ~500 lines; put long reference material in
references/orscripts/and link from SKILL.md.
Conventions
- Write descriptions in third person (e.g. "Use when…" not "You can use when…").
- Be concise; avoid restating general GSAP docs. Focus on correct API usage, pitfalls, and cleanup.
- When adding a new skill: create
skills/<skill-name>/SKILL.md, then update README.md "Skills" table and "Structure" section.
References
Limitations
- →Skill descriptions are limited to 1024 characters
- →SKILL.md body content should be kept under approximately 500 lines
- →Skill names must be lowercase, use hyphens only, and have a maximum of 64 characters
How it compares
This skill provides explicit guidelines for skill creation and modification, unlike a manual process that might lack standardized conventions.
Compared to similar skills
gsap side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| gsap (this skill) | 0 | 4mo | No flags | Beginner |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| interaction-design | 15 | 5mo | No flags | Intermediate |
| motion | 10 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
motion
onmax
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
frontend-enhancer
ailabs-393
This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
animation-performance-retro
TheOrcDev
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.