ui-motion-design

Enforce animation, typography, and asset guidelines for Flutter apps.

1|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/code-sinobi/hoya-time-travel --skill ui-motion-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-motion-design
Source: https://github.com/code-sinobi/hoya-time-travel/tree/main/.agent/skills/ui-motion-design
Command: npx skills add https://github.com/code-sinobi/hoya-time-travel --skill ui-motion-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers to achieve consistent, professional motion design across Flutter apps using flutter_animate, Lottie, and Google Fonts.

Core Features & Use Cases

  • Animation guidelines: establish default motion curves, durations, and easing for a cohesive UI.
  • Typography guidelines: enforce consistent fonts via Google Fonts and theme-based text styles.
  • Asset guidelines: suggest where to store Lottie files and how to organize assets by feature.

Quick Start

Define a motion design spec for a Flutter screen that applies subtle animations and consistent typography using GoogleFonts and Lottie.

Frequently Asked Questions about ui-motion-design

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

FAQPage Schema
How do I maintain consistent Flutter animation curves and durations across different screens?

To maintain consistent Flutter animation, establish default motion curves, durations, and easing rules. Applying a unified motion design spec ensures cohesive UI transitions and prevents visual inconsistencies across features.

What is the best way to organize Lottie files and assets in a Flutter app?

The best way to organize Lottie files is to group assets by feature within structured directories. This asset management approach ensures maintainable UI resources and simplifies updates to motion graphics.

How do I enforce consistent typography in Flutter using Google Fonts?

You can enforce consistent typography in Flutter by applying theme-based text styles via Google Fonts. This ensures fonts remain uniform and cohesive across the entire application interface.

Can I use Lottie and flutter_animate together to polish UI transitions?

Yes, you can use Lottie and flutter_animate together to polish UI transitions. Combining these tools allows you to define motion design specs that apply subtle animations while maintaining transition consistency.

Do I need a motion design spec to refine Flutter UI typography and transitions?

You need a motion design spec to effectively refine Flutter UI typography and transitions. Establishing these guidelines enforces animation rules and typography standards, ensuring a cohesive and maintainable interface.

Why does my Flutter app feel visually inconsistent when adding new UI animations?

Your Flutter app feels visually inconsistent because it lacks defined animation guidelines. Without enforced rules for motion curves, durations, and typography, new UI animations break cohesion across features.