flutter-animations

The flutter-animations skill provides guidance and code patterns for implementing, debugging, and refactoring Flutter animations. It assists with implicit animations, explicit controllers, Hero transitions, staggered sequences, and physics-based motion while enforcing accessibility and performance standards.

14.4K
Installs
7
Use cases
9/10
Quality

Is flutter-animations safe to install?

Review before installing

Review before installing: our audit of flutter-animations's source files found 2 shell commands, 0 external URLs, file reads and writes (medium risk). Every command and URL listed appears verbatim in the skill's source. The skill reads local project files to inspect widget trees and state management. It instructs the agent to run formatting and analysis commands on the user's codebase.

How we audit skills: our security review methodology.

Who is this skill for?

Flutter developers who need to implement or troubleshoot motion effects within their applications.

What can you do with it?

  • Implementing state-driven property changes using implicit animation widgets.
  • Managing complex animation lifecycles with AnimationController and custom builders.
  • Creating shared-element transitions between routes using Hero.
  • Sequencing list or menu reveals with staggered timing.
  • Integrating physics-based motion like springs, flings, and custom scroll behavior.
  • Refactoring animation code to improve performance and ensure proper resource disposal.
  • Ensuring animation accessibility by respecting reduced-motion settings.

How good is this skill?

Quality score: 9/10. The skill documentation is highly structured, provides clear decision-making logic, and includes specific validation steps for the agent to follow.

What does the skill file contain?

SKILL.md
# Flutter Animations

You are a Flutter motion implementation specialist. Build animation changes that
fit the app's existing widget structure, state model, navigation, theme, and
performance constraints.

## Principle 0

Motion must not become hidden state or unverified demo code. Before adding or
changing animation logic, inspect the target widget, lifecycle, route structure,
and existing patterns. After the change, verify analyzer-clean Dart and call out
any animation behavior that could not be run or visually checked.

## Workflow

1. Identify the user's actual request: add a new animation...

Frequently asked questions

Does this skill automatically add animations to my code?

No. The skill provides patterns and templates for the agent to adapt to your existing widget structure and state model.

How does the skill handle accessibility?

The skill requires checking MediaQuery.disableAnimations and existing reduced-motion policies to provide static alternatives for non-essential motion.

Can I use the provided templates directly in production?

No. Templates are demo files. You must rename classes, remove main() and MaterialApp wrappers, and adapt them to your project's specific assets and state.

Data sourced from madteacher/mad-agents-skills on GitHub. Install counts from skills.sh. The summary and security audit are derived from the skill's source files: every command and URL listed appears verbatim in the source.

Related skills

shadcn

217.3K

Developers building UI components and design systems using shadcn/ui

The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.

highuicomponentsshadcn

emil-design-eng

114.3K

Developers and designers building user interfaces who want to improve the feel and responsiveness of their software

This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.

nonedesignengineeringemilkowalski

make-interfaces-feel-better

37.7K

Frontend developers and designers using AI agents to review UI code or implement design system improvements

This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.

noneuidesignjakubkrehel

flutter-apply-architecture-best-practices

21.6K

Flutter developers building new projects or refactoring existing codebases for scalability

This skill provides a structured architectural framework for Flutter applications, enforcing a layered approach consisting of UI, Logic, and Data layers.

noneflutterarchitectureflutter