flutter-design_skill

Overview

This skill provides Flutter and Dart implementation patterns that translate Refactoring UI principles into practical, production-ready theming and styling code. It focuses on ThemeData (Material 3), ColorScheme, TextTheme, spacing, BoxDecoration, shadows, and reusable utilities to keep apps consistent and theme-aware. Always check and prefer existing project theme artifacts before adding new styles.

How this skill works

The skill inspects common Flutter theming patterns and offers concrete code recipes: ThemeData setup with Material 3, ColorScheme access patterns and extensions, a 4dp spacing system, TextTheme usage, BoxDecoration recipes for cards and inputs, and a shadow scale. It enforces priority: project-defined theme → Theme.of(context) → hardcoded values. It supplies reusable constants and extension examples to encourage consistent usage across widgets.

When to use it

• When establishing or migrating an app to Material 3 theming.
• When building reusable components that must respect light and dark modes.
• When you need a consistent spacing, typography, or shadow system across the app.
• When refactoring widgets that currently use hardcoded colors, sizes, or styles.
• When creating app-level ThemeData, color seeds, or custom ThemeExtensions.

Best practices

• Always check for existing AppColors, AppTextStyles, or ThemeExtension and reuse them before adding new values.
• Use Theme.of(context).colorScheme and TextTheme instead of hardcoded colors and TextStyle values.
• Follow a 4dp spacing grid and expose SizedBox shortcuts (AppSpacing) for consistency.
• Centralize shadows and decoration patterns (AppShadows, BoxDecoration recipes) so components share the same elevation language.
• Prefer ColorScheme.fromSeed and useMaterial3: true to keep brand and system coherence.
• Use small extension helpers on BuildContext to simplify access (context.colors, context.textTheme).

Example use cases

• Create app-level ThemeData with light and dark ColorScheme.fromSeed and a shared TextTheme for consistent type scale.
• Refactor legacy widgets that use Colors.blue and inline TextStyle to use context.colors.primary and context.textTheme.bodyLarge.
• Implement card and input container patterns using BoxDecoration templates with borderRadius, borders, and AppShadows.md.
• Build a spacing system (AppSpacing) and replace scattered SizedBox/EdgeInsets values to align with a 4dp grid.
• Add ThemeExtensions or AppColors to surface brand tokens for cross-team reuse.