Claude-skill-registry flutter-mobile-design

This skill guides creation of distinctive, production-grade Flutter mobile applications using Material Design 3. Implement real working Dart/Flutter code with exceptional attention to aesthetic details, performance, and platform conventions.

The user provides mobile app requirements: a widget, screen, feature, or complete application to build. They may include context about the purpose, target platform (iOS/Android), or design references.

Design Thinking

Before coding, understand the context and commit to a strong design direction:

• Purpose: What problem does this app solve? Who uses it?
• Platform: iOS, Android, or both? Consider platform-specific conventions.
• Tone: Material Design 3 offers flexibility - choose a personality: vibrant & playful, calm & professional, bold & expressive, minimal & clean, warm & organic.
• Color Scheme: Use dynamic color (Material You) or create a custom ColorScheme with clear semantic meaning.
• Differentiation: What makes this app memorable? What's the signature interaction or visual element?

Then implement working Flutter code that is:

• Production-grade and functional
• Visually polished with Material Design 3
• Performant and responsive
• Accessible and platform-aware

Flutter & Material Design 3 Guidelines

Typography

Use Material 3 type scale with

Theme.of(context).textTheme

:

Text(
  'Headline',
  style: Theme.of(context).textTheme.headlineMedium,
)

Type roles:

displayLarge/Medium/Small

,

headlineLarge/Medium/Small

,

titleLarge/Medium/Small

,

bodyLarge/Medium/Small

,

labelLarge/Medium/Small

.

For custom fonts, define in

TextTheme

and apply via

ThemeData

. Prefer Google Fonts that complement Material 3.

Color System

Use Material 3 ColorScheme with semantic colors:

ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
    brightness: Brightness.light,
  ),
  useMaterial3: true,
)

Access colors semantically:

• colorScheme.primary

  /

  onPrimary

  - Key actions, FAB

• colorScheme.secondary

  /

  onSecondary

  - Less prominent actions

• colorScheme.tertiary

  /

  onTertiary

  - Contrasting accents

• colorScheme.surface

  /

  onSurface

  - Cards, sheets, dialogs

• colorScheme.error

  /

  onError

  - Error states

Support dark mode with

Brightness.dark

variant.

Components & Widgets

Prefer Material 3 widgets:

• FilledButton

  ,

  FilledButton.tonal

  ,

  OutlinedButton

  ,

  TextButton

• FloatingActionButton.extended

  with icon

• NavigationBar

  (bottom),

  NavigationRail

  (side),

  NavigationDrawer

• Card

  with

  elevation

  and

  surfaceTintColor

• SearchAnchor

  for search

• SegmentedButton

  for toggles

• Slider

  ,

  Switch

  ,

  Checkbox

  with M3 styling

Use

Material

widget with proper

elevation

and

surfaceTintColor

for custom surfaces.

Motion & Animation

Use purposeful, expressive motion:

// Implicit animations
AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeOutCubic,
  // ...
)

// Hero transitions
Hero(
  tag: 'item-$id',
  child: Image.network(url),
)

// Page transitions
MaterialPageRoute(
  builder: (context) => DetailScreen(),
)

Motion principles:

• Informative: Motion shows spatial relationships
• Focused: Draw attention to what matters
• Expressive: Reflect brand personality

Duration guidelines: 150ms (small), 300ms (medium), 500ms (large/complex).

Layout & Spacing

Use Material spacing scale (multiples of 4dp):

const EdgeInsets.all(16) // Standard padding
const EdgeInsets.symmetric(horizontal: 24, vertical: 16)
const SizedBox(height: 8) // Vertical spacing

Responsive layouts:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return WideLayout();
    }
    return NarrowLayout();
  },
)

Use

Flex

,

Wrap

,

GridView.builder

for adaptive grids.

Architecture & State Management

Recommended: Riverpod

// Define providers
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state++;
}

// Use in widget
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Alternative: BLoC (for larger apps)

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
  }
}

Project Structure

lib/
├── main.dart
├── app/
│   ├── app.dart              # MaterialApp setup
│   └── router.dart           # Navigation (go_router)
├── features/
│   └── feature_name/
│       ├── presentation/     # Widgets, screens
│       ├── application/      # Business logic, providers/blocs
│       ├── domain/           # Entities, repositories interfaces
│       └── data/             # Repository implementations, DTOs
├── shared/
│   ├── widgets/              # Reusable widgets
│   └── theme/                # ThemeData, ColorScheme
└── core/
    ├── constants/
    └── utils/

Performance Checklist

• Use

  const

  constructors everywhere possible
• Implement

  ListView.builder

  /

  GridView.builder

  for long lists
• Cache network images with

  cached_network_image

• Avoid rebuilding entire widget trees - use selective

  Consumer

  or

  BlocBuilder

• Profile with Flutter DevTools
• Keep build methods lean - extract widgets
• Use

  RepaintBoundary

  for complex animations

Platform-Specific Guidelines

iOS Considerations

• Support safe areas (

  SafeArea

  widget)
• Consider

  CupertinoPageRoute

  for iOS-style transitions
• Support dynamic type / text scaling
• Handle notch and home indicator

Android Considerations

• Support edge-to-edge display
• Handle back button / predictive back
• Material You dynamic colors when available
• Support foldables with adaptive layouts

Quality Checklist

• App size optimized (tree-shake, deferred loading)
• Startup time < 2 seconds
• Smooth 60fps animations
• Dark mode supported
• Accessibility: semantic labels, sufficient contrast
• Responsive across screen sizes
• Offline capability considered
• Error states handled gracefully

Code Style

// Good: Descriptive, const, proper typing
const EdgeInsets kDefaultPadding = EdgeInsets.all(16);

class ProductCard extends StatelessWidget {
  const ProductCard({
    super.key,
    required this.product,
    this.onTap,
  });

  final Product product;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colors = theme.colorScheme;

    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Widget content
          ],
        ),
      ),
    );
  }
}

Restricted

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

NEVER generate generic, boilerplate Flutter code. Each implementation should feel crafted for its specific purpose with thoughtful Material Design 3 application and attention to detail.