agent creative skill risk: low
AI Logo UI Icon Animator
This prompt defines the Magic Animator skill, including context, triggers, a five-step execution workflow, strict rules, and limitations for animating static design elements such a…
SKILL 1 file
SKILL.md
--- name: magic-animator description: "AI-powered animation tool for creating motion in logos, UI, icons, and social media assets." --- # Magic Animator Skill [Magic Animator](https://magicanimator.com/) enables designers to add life to static designs in seconds using AI-driven motion, transforming flat UX into premium, dynamic experiences. ## Context This skill is essential for improving UX and engagement through high-quality motion. It works best for animating brand assets, interface elements, and micro-interactions. ## When to Use Trigger this skill when: - Adding life to a static logo or brand mark to make it memorable. - Enhancing website/app UI with loaders, animated widgets, or smooth transitions. - Animating icons or micro-interactions to guide user behavior with flair. ## Execution Workflow 1. **Select Asset**: Identify the static design element (SVG, PNG, or Figma layer) to animate. 2. **Choose Preset/Category**: Select the appropriate domain (Logos, UI, Icons, Social Media) to ensure the motion curves match the context. 3. **Animate**: Use the **AI Animation Assistant** via chat-based prompts to request specific, premium motion (e.g., "Make it feel like a high-end luxury brand reveal" or "Give it a kinetic, elastic pop"). 4. **Refine**: If available, edit keyframes for further polish, ensuring easing curves feel natural and high-end. 5. **Export & Integrate**: Export the final animation as **Lottie (JSON)** for web/mobile performance, or **GIF/MP4** for social. ## Strict Rules - **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT rely on basic, linear animations. Use motion to create a "wow" factor. - **Purposeful Motion**: Every animation must feel deliberate and premium. Avoid chaotic or overly fast motion that distracts from the core UX. - **Format Discipline**: Prefer Lottie for native app and web integrations to maintain crispness and low file size. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
REQUIRED CONTEXT
- static design element (SVG, PNG, or Figma layer)
OPTIONAL CONTEXT
- domain category (Logos, UI, Icons, Social Media)
- chat-based motion prompt
ROLES & RULES
- Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX.
- DO NOT rely on basic, linear animations.
- Use motion to create a "wow" factor.
- Every animation must feel deliberate and premium.
- Avoid chaotic or overly fast motion that distracts from the core UX.
- Prefer Lottie for native app and web integrations to maintain crispness and low file size.
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
EXPECTED OUTPUT
- Format
- unknown
- Constraints
-
- Prefer Lottie (JSON) export
- Ensure deliberate premium motion
- Avoid chaotic or overly fast animations
SUCCESS CRITERIA
- Utilize this skill to build modern, creative, and visually stunning UI/UX
- Make every animation feel deliberate and premium
- Prefer Lottie for integrations
CAVEATS
- Missing context
-
- Target design tool or file format constraints beyond SVG/PNG/Figma
- Success criteria or quality metrics for the resulting animation
- Ambiguities
-
- Does not specify desired output length or detail level for animation descriptions.
- "If available" for keyframe editing is conditional without defining availability criteria.
QUALITY
- OVERALL
- 0.72
- CLARITY
- 0.85
- SPECIFICITY
- 0.70
- REUSABILITY
- 0.60
- COMPLETENESS
- 0.75
IMPROVEMENT SUGGESTIONS
- Add explicit placeholders (e.g., {{asset_description}}, {{motion_style}}) to improve reusability as a template.
- Define concrete examples of "premium" vs. "basic" motion to increase specificity.
USAGE
Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.
MORE FOR AGENT
- Existing Web Design Premium Upgrader agent creative
- Antigravity GSAP Spatial UI Expert agent creative
- High-End Agency UI Design Instructor agent creative
- Stitch Semantic Design System Generator agent creative
- Image-First Website Design Coder agent creative
- Premium Website Section Image Director agent creative
- Industrial Brutalist Tactical UI Engineer agent creative
- Minimalist Editorial UI Code Generator agent creative
- Antigravity UI Motion Design Expert agent creative
- Multi-Format Banner Design Workflow agent creative
- Design Sub-Skill Routing and Generation Guide agent creative
- Bold Aesthetic Frontend Interface Builder agent creative
- AI Marketing Video Producer agent creative
- P5.js Algorithmic Art Generator agent creative
- Antigravity UI Motion Design Expert agent creative
- Magic Animator AI Motion Workflow agent creative
- Magical UI Micro-Interactions Enhancer agent creative
- Website Design Image Recreator agent creative
- Mermaid Diagram Expert Creator agent creative
- Magic UI Component Variations Generator agent creative
- Magic Animator AI Motion Workflow agent creative
- PPTX Research Poster HTML Creator agent creative
- Magical Micro-Interactions UI Designer agent creative
- Iconsax Premium Icon Library Skill agent creative
- Iconsax Premium Icon Library Workflow agent creative