serverpod-flutter-frontend

Start by defining a clear visual direction, then implement it with Flutter Material widgets under a Scaffold, custom text themes via google_fonts, and deliberate layout and animation choices. This Skill structures that process into design thinking followed by code generation.

Add the google_fonts package to pubspec.yaml and reference its text themes in your ThemeData. Pair an expressive display typeface with a legible body font to give the interface a distinct typographic identity.

Do not use it when extending or fixing screens in an app that already has a design system, theme, or style guide. In those cases, follow the app's existing visual conventions instead of introducing a new aesthetic.

Generic Flutter UI comes from default fonts like Roboto, predictable color gradients, and standard Material boilerplate layouts. Avoid it by committing to a specific aesthetic, using custom typography, asymmetric layouts, and purposeful animation.

It is intended for greenfield work where no visual language exists yet. For apps with established themes, the Skill explicitly defers to the existing design system rather than overriding it.