metis: Skill for Claude Code

Flutter Development Patterns

Production-ready patterns for Flutter application development including design systems, responsive layouts, and enterprise-grade component libraries.

Overview

Flutter patterns for:

• Design system creation and management
• Responsive layout strategies
• Component library architecture
• State management patterns
• Cross-platform considerations

Reference Documentation

Design System Creation

• creating-design-system - Complete guide to creating Flutter design systems
  • Phase-based implementation approach
  • Token systems (colors, typography, spacing)
  • Component architecture
  • Responsive patterns
  • Dark mode support
  • Documentation standards

Design System Usage

• flutter-design-system - Institutionalized design system usage directive
  • Design system location and structure
  • Single import pattern
  • Component usage examples
  • Mandatory usage rules

Testing Patterns

• flutter-testing-patterns - Flutter testing strategies
  • Widget testing patterns
  • Integration testing
  • Golden tests
  • Test organization

Quick Patterns

Design Token System

abstract class AppColors {
  // Primary palette
  static const primary = Color(0xFF2563EB);
  static const primaryLight = Color(0xFF3B82F6);
  static const primaryDark = Color(0xFF1D4ED8);

  // Semantic colors
  static const success = Color(0xFF10B981);
  static const warning = Color(0xFFF59E0B);
  static const error = Color(0xFFEF4444);
}

abstract class AppSpacing {
  static const xs = 4.0;
  static const sm = 8.0;
  static const md = 16.0;
  static const lg = 24.0;
  static const xl = 32.0;
}

Responsive Breakpoints

class Breakpoints {
  static const mobile = 600.0;
  static const tablet = 900.0;
  static const desktop = 1200.0;

  static bool isMobile(BuildContext context) =>
    MediaQuery.of(context).size.width < mobile;
}