skills.rest
vTRKA
vTRKACOMMUNITY
Explore all skills by this author →
GitHub

lottie-rive-animation

Verify Lottie and Rive motion assets for browser delivery.

Updated Apr 27, 2026
Search Tags:#state machines#lottie#rive#anti-ai-slop#reduced motion#animation verification#browser proof
One-click install
npx skills add https://github.com/vTRKA/supervibe --skill lottie-rive-animation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-rive-animation
Source: https://github.com/vTRKA/supervibe/tree/main/skills/lottie-rive-animation
Command: npx skills add https://github.com/vTRKA/supervibe --skill lottie-rive-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Broken or unverified Lottie/Rive motion commonly fails in real browsers due to missing assets, unsupported runtime features, invisible frames, reduced-motion gaps, or absent fallbacks—leaving product states unclear and delivery confidence low.

Core Features & Use Cases

  • Evidence-first runtime verification: plans and insists on browser proof for load, nonblank render, playback behavior, reduced-motion handling, interaction, performance, and cleanup.
  • Purpose-driven runtime selection: guides choosing the lightest viable option (native CSS/WAAPI/SVG/DOM first, then Lottie or Rive) and rejects decorative-only motion.
  • Anti-AI-Slop artifact governance: requires an artifact-scoped anti-slop report with gate taxonomy evidence before approval or handoff, preventing generic “looks good” claims.
  • Rive state-machine and fallback discipline: validates artboard/state-machine inputs and ensures interaction, fallback, and disabled/error states are covered.
  • Video-adjacent integrity: supports storyboard/poster alternatives when rendered video capability or media proof is unavailable.

Quick Start

Ask your AI tool to run the Lottie/Rive animation skill to plan, implement, and produce a browser-proof report with required anti-slop gates for your target asset.

Frequently Asked Questions about lottie-rive-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Lottie animation show blank frames or fail silently in the browser?▼

Lottie animations often fail silently due to unsupported runtime features, missing assets, or untested browser playback. Browser-proof verification checks for nonblank renders, playback behavior, and missing dependencies before delivery to prevent invisible frames.

How do I verify Rive state machine inputs for onboarding and empty states?▼

Verifying Rive state machines requires validating artboard inputs, interaction behavior, and fallback states. State-machine discipline ensures your onboarding, empty states, and loaders have covered disabled, error, and fallback states for browser delivery.

What is the best way to ensure reduced motion fallbacks for Lottie and Rive assets?▼

Reduced motion fallbacks require evidence-backed runtime verification that checks playback behavior and missing fallback coverage. Browser-proof testing enforces fail-closed behavior when proof is missing, preventing reduced-motion regressions in delivered assets.

Do I need native CSS or SVG animations instead of Lottie for simple product state feedback?▼

Purpose-driven runtime selection guides choosing the lightest viable option, prioritizing native CSS, WAAPI, SVG, or DOM before Lottie or Rive. Browser-proof verification rejects decorative-only motion and ensures evidence-backed runtime requirements for product feedback.

How do I prevent unverified motion assets from passing design-to-prototype handoff?▼

Anti-AI-slop artifact governance requires an artifact-scoped report with gate taxonomy evidence before handoff approval. This prevents generic claims, enforces artifact hashes, and ensures browser-proof motion delivery through fail-closed behavior when proof is missing.

Related Skills

Explore More Design & Creative Skills→
BasedHardwareBasedHardware
4

lottie

Add and manage Lottie animations in React using LottieFiles.

Official
Intermediate
vTRKAvTRKA

programmatic-video-production

Generate proof-backed Remotion or browser-recording video plans with provenance and accessibility fallbacks.

Community
Advanced
lapc506lapc506
4

Animation & Motion Design

Implement implicit and explicit animations in Flutter applications.

Community
Advanced
vTRKAvTRKA

media-processing-pipeline

Plan and verify media pipelines with capability detection and runtime playback proof.

Community
Advanced