Agent skill
flutter-animations
Flutter animations: Rive-first approach, Lottie, micro-interactions, timing guidelines. Use when adding animations or improving UX polish.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/flutter-animations
SKILL.md
Flutter Animations (Rive-First)
Animation Stack Priority
- Rive (Primary): Interactive, 60fps, small files, state machines
- Lottie (Secondary): Non-interactive, existing assets
- flutter_animate: Micro-interactions, quick effects
Timing Guidelines
| Type | Duration | Use |
|---|---|---|
| Micro-interactions | 50-150ms | Button press, toggle |
| Component transitions | 200-400ms | Expand, collapse |
| Page transitions | 300-600ms | Hero, route change |
| Loading indicators | 800-1200ms | Infinite loop |
Rive (Recommended)
// State machine pattern
class AnimatedButton extends StatefulWidget {
@override
State<AnimatedButton> createState() => _AnimatedButtonState();
}
class _AnimatedButtonState extends State<AnimatedButton> {
SMIBool? _isPressed;
void _onInit(Artboard artboard) {
final controller = StateMachineController.fromArtboard(artboard, 'ButtonState');
artboard.addController(controller!);
_isPressed = controller.findInput<bool>('isPressed') as SMIBool?;
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) => _isPressed?.value = true,
onTapUp: (_) => _isPressed?.value = false,
child: RiveAnimation.asset(
'assets/animations/button.riv',
onInit: _onInit,
),
);
}
}
Lottie
Lottie.asset(
'assets/animations/loading.json',
width: 100,
height: 100,
repeat: true,
)
flutter_animate
Text('Hello')
.animate()
.fadeIn(duration: 200.ms)
.slideX(begin: -0.2, end: 0)
Implicit Animations
AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: _expanded ? 200 : 100,
color: _active ? Colors.blue : Colors.grey,
)
AnimatedOpacity(
duration: const Duration(milliseconds: 150),
opacity: _visible ? 1.0 : 0.0,
child: content,
)
Hero Animations
// Source
Hero(tag: 'event-${event.id}', child: EventCard(event: event))
// Destination
Hero(tag: 'event-${event.id}', child: EventImage(event: event))
Asset Organization
assets/animations/
├── buttons/
├── loaders/
├── onboarding/
└── icons/
Related Skills
- flutter-ui-components: Widget patterns
- flutter-performance: Performance
- flutter-accessibility: A11y
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?