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 Upgraderagentcreative
- Antigravity GSAP Spatial UI Expertagentcreative
- High-End Agency UI Design Instructoragentcreative
- Stitch Semantic Design System Generatoragentcreative
- Image-First Website Design Coderagentcreative
- Premium Website Section Image Directoragentcreative
- Industrial Brutalist Tactical UI Engineeragentcreative
- Minimalist Editorial UI Code Generatoragentcreative
- Antigravity UI Motion Design Expertagentcreative
- Multi-Format Banner Design Workflowagentcreative
- Design Sub-Skill Routing and Generation Guideagentcreative
- Bold Aesthetic Frontend Interface Builderagentcreative
- AI Marketing Video Produceragentcreative
- P5.js Algorithmic Art Generatoragentcreative
- Antigravity UI Motion Design Expertagentcreative
- Magic Animator AI Motion Workflowagentcreative
- Magical UI Micro-Interactions Enhanceragentcreative
- Website Design Image Recreatoragentcreative
- Mermaid Diagram Expert Creatoragentcreative
- Magic UI Component Variations Generatoragentcreative
- Magic Animator AI Motion Workflowagentcreative
- PPTX Research Poster HTML Creatoragentcreative
- Magical Micro-Interactions UI Designeragentcreative
- Iconsax Premium Icon Library Skillagentcreative
- Iconsax Premium Icon Library Workflowagentcreative