Skip to content

Motion Design Skill — Setup Guide

Source: lottiefiles/motion-design-skill GitHub: lottiefiles/motion-design-skill (985 stars) Skills: 1 skill · 8.1K installs Category: Design / Motion First Seen: Apr 13, 2026 · catalogued August 15, 2026 evening sweep Quality Tier: 🟢 Production (Gen Agent Trust Hub Pass, Socket Pass, Snyk Pass)

LottieFiles' motion design skill encodes when and how to animate: functional feedback timing, brand motion identity, Disney animation principles for storytelling, and the 1/3 rule for choreographing multi-element scenes. The decision tree routes each request to the right animation discipline instead of defaulting to decorative motion.

Installation

npx skills add https://github.com/lottiefiles/motion-design-skill --skill motion-design

Prerequisites

Requirement Details
Node.js + npx For the skill installer
UI project Web or app interface to animate

What It Provides

Skill Installs Purpose
motion-design 8.1K UI animation, micro-interactions, and motion identity

Quick Start

  1. Install: npx skills add https://github.com/lottiefiles/motion-design-skill --skill motion-design
  2. Ask: "design the loading and success states for this feature, and define its motion identity"
  3. Follow the skill's decision tree: functional feedback, brand personality, storytelling, or choreography

CorpusIQ Use Cases

Use Case How
Product UI polish Motion guidance for CorpusIQ and client interfaces
Brand motion identity A structured way to define how our brand moves
Lottie pairing Natural fit with LottieFiles' animation format for web and apps
Design reviews The decision tree doubles as a motion critique checklist

Limitations / Verification

  • Security audits: Gen Agent Trust Hub Pass, Socket Pass, Snyk Pass — full green
  • Design guidance only — no asset generation; pair with LottieFiles tooling for production assets
  • Verification command: npx skills add https://github.com/lottiefiles/motion-design-skill --skill motion-design

Powered by CorpusIQ