celebration-animation-generator_skill

Overview

This skill generates self-contained p5.js celebration animation modules tailored for MicroSims in an educational textbook project. It creates a single JavaScript animation file placed in /docs/sims/shared/animations/ and wires the animation into the animation-lib-tester for quick verification. The output follows naming, API, and color/pattern conventions to avoid conflicts and ensure consistency.

How this skill works

Given a short user description, the skill extracts the animated object, motion pattern, origin point, and a suggested filename. It emits a JavaScript file that implements four standard API functions (create, updateAndDraw, isActive, clear), uses a unique particle array and helper suffixes, and supports a speedMultiplier parameter. Finally, it updates the animation-lib-tester (HTML import and test JS) and appends documentation to the animations README.

When to use it

• Requesting a new celebration animation (e.g., "butterflies floating up")
• Adding particle effects or reward animations for student achievements
• Creating visual feedback for correct answers or level completion
• Expanding or standardizing the shared animation library
• Testing new animation ideas quickly via the animation-lib-tester

Best practices

• Provide a concise description containing object, motion, and origin (e.g., "hearts floating from bottom-left").
• Use kebab-case for filenames and PascalCase for exported function roots to match conventions.
• Pick unique particle array and helper suffix names to avoid namespace collisions.
• Support speedMultiplier (0.5, 1.0, 1.8) and use the standard rainbow color palette for variety.
• Follow one of the referenced motion patterns (Burst Up, Float Up, Explode Out, etc.) for predictable physics.

Example use cases

• Create a "baseball-explosion.js" file that bursts baseballs upward from the bottom-center when a mini-game is solved.
• Generate a "butterfly-float.js" animation where butterflies gently float up when a reading milestone is reached.
• Add a "confetti-spray.js" file that radiates rainbow confetti from the current word location as instant feedback.
• Implement a "rocket-zoom.js" horizontal zoom animation for timed challenge completion.
• Produce a "star-fall.js" animation with falling stars for end-of-lesson celebrations.