mcpField

gsap-animated-frontend

github.com/yousefabdallah171Design & UI87 installs
Repository

About gsap-animated-frontend

A model-agnostic skill for planning GSAP animations on new and existing frontends. It routes work through `gsap-new` or `gsap-refactor` and stores workflow decisions in `.gsap` project artifacts.

Key features

  1. 01Route new work and refactors separately
  2. 02Persist plans and decisions in `.gsap`
  3. 03Inspect code before planning refactors
  4. 04Include reduced-motion and mobile rules
  5. 05Plan phased implementation tasks

Use cases

  1. 01Plan animation for a new page or section
  2. 02Improve motion in existing components
  3. 03Resume animation work across agent sessions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yousefabdallah171/gsap-animated-frontend --skill gsap-animated-frontend

After installing, type/gsap-animated-frontendin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md
gsap_cli.py
requirements.txt
agents/
openai.yaml
gsap-new/agents/
openai.yaml
gsap-refactor/agents/
openai.yaml
references/
performance-guide.md
animation-recipes.md
gsap-core-patterns.md
scroll-trigger-patterns.md
scripts/
brand_extractor.py
gsap_workflow.py
project_intelligence.py
interview_generator.py
structure_search.py
phase_planner.py
interview_strategy.py
subskills/gsap-new/agents/
openai.yaml
subskills/gsap-refactor/agents/
openai.yaml
templates/
animation-spec.md
animation-tasks.md
phase.md
audit-report.md
page-animation.md
animation-plan.md

Details

From the project README

GSAP Animated Frontend

Use this skill as the root router for a model-agnostic GSAP workflow.

Public Workflow Surface

Expose only two primary workflows:

  • gsap-new
  • gsap-refactor

Do not present scan, audit, recipes, doctor, validate, or similar helpers as primary user-facing workflows.

Source Of Truth

Always read and update these project artifacts first:

  • .gsap/animation-spec.md
  • .gsap/animation-plan.md
  • .gsap/audit-report.md
  • .gsap/pages/*.animation.md

Never rely on chat history as the workflow memory.

Workflow Routing

For new pages, new sections, or first-time motion systems:

  • read subskills/gsap-new/SKILL.md

For existing pages/components that need improvement:

  • read subskills/gsap-refactor/SKILL.md

Internal Helpers

Use internal scripts and templates for support work:

  • scripts/gsap_workflow.py
  • scripts/brand_extractor.py
  • scripts/structure_search.py
  • scripts/interview_generator.py
  • scripts/phase_planner.py
  • templates/animation-spec.md
  • templates/animation-plan.md
  • templates/audit-report.md
  • templates/animation-tasks.md
  • templates/page-animation.md
  • templates/phase.md

Use references only as needed:

  • references/gsap-core-patterns.md
  • references/scroll-trigger-patterns.md
  • references/animation-recipes.md
  • references/performance-guide.md

Non-Negotiables

  1. Persist decisions back into .gsap.
  2. Ask questions only when required by missing artifact data.
  3. Read current code before planning refactors.
  4. Include reduced-motion and mobile downgrade rules in every plan.
  5. Keep helper commands internal; the visible experience stays centered on gsap-new and gsap-refactor.
  6. Let the workflow script inspect framework, packages, page structure, design signals, and existing motion before asking questions.
  7. Do not implement an entire page in one pass; generate phased artifacts and execute one major section per phase.
  8. Keep .gsap/tasks/*.md and .gsap/phases/**/*.md current so a fresh agent can resume safely.

Comments

Markdown supported