SVG Animation Engineer (AI Skill)

A highly specialized AI Skill (prompt instruction set) designed to turn any AI Assistant into a Master SVG Animation Engineer. It enforces strict generation rules to produce clean, cross-browser compatible, and visually stunning 2.5D geometric vector animations using pure SVG and CSS Keyframes.

🌟 Key Features

• Zero Dependencies: Generates raw .svg or .html files that run flawlessly in any modern browser without external libraries (No GSAP, no Lottie needed).
• Geometric Flat Design: Enforces a strict aesthetic of flat illustration, high-contrast corporate/macaron color palettes, and perfect geometric shapes.
• Physical Motion Principles:
  • Squash & Stretch: Simulates elasticity and gravity (e.g., bouncing, pulsing).
  • Overlapping Action: Employs animation-delay for trailing elements (e.g., waving hair, gears turning with slight offsets).
  • Parallax Backgrounds: Creates infinite, seamless looping backgrounds to simulate depth and travel.
• Cross-Browser Stability: Enforces transform-box: fill-box and static nested <g> tags to completely eliminate the notorious SVG CSS transform-origin bugs seen in Safari and some Chromium builds.

---

🚀 How to Use

Simply copy this folder into your AI Agent's skill or prompt directory, or pass the contents of SKILL.md directly into your system prompt.

Recommended Directory Structure for Agents

.agent/
 └── skills/
      └── svg-animation-engineer/
           ├── SKILL.md                 # Core instructions & Output Templates
           ├── references/
           │    └── motion-examples.md  # CSS exact implementations (Progressive Disclosure)
           └── examples/                # (Optional) Showcase of generated results

Example Prompting

Once the skill is loaded in your AI context, you can simply ask:

"Use the svg-animation-engineer skill to draw me a seamless looping animated scene of a fox riding a skateboard through a cyberpunk city."

---

📁 Repository Contents

• SKILL.md: The brain of the skill. Contains the core aesthetic rules, physical laws, and an exact XML/SVG output template pattern that the AI must follow.
• references/motion-examples.md: Advanced references. We use the "Progressive Disclosure" pattern so the AI only reads these complex CSS examples (like exact bezier curves for bouncing) when necessary.
• examples/: Contains raw SVG/HTML files purely generated by this skill as a demonstration of its power.

🎨 Demo / Examples

Check out the examples/ folder for live code generated by this skill:

1. validation_test_astronaut.svg: A floating astronaut waving in space with a pulsing jetpack flame.
2. riding_giraffe_style.svg: A beautiful sunset silhouette of a character riding a giraffe.
3. ore_process.html: A massive, highly complex industrial 2.5D animation showing a 4-stage ore processing plant (Jaw Crushers, Ball Mills, Flotation Tanks with froth physics, and Thickeners).

(You can open any of these files directly in Chrome/Safari to see the animations in action!)

---

Created by [Your Name/Handle]. Let's make the web beautiful with pure code.