design-system
Design Tokens
Design tokens are the atomic values of the design system. UI elements MUST use tokens — never raw values.
Colors
- ✅ Use
AppColors.primary,AppColors.secondary,AppColors.error,AppColors.success,AppColors.warning,AppColors.surface,AppColors.textPrimary,AppColors.textSecondary - ❌ NEVER use
Color(0xFF...),Colors.blue, or inline hex values - Map semantic tokens to Material 3
ColorSchemefor platform consistency - Each color token MUST document its use case and ensure WCAG AA contrast ratio
- Support light and dark mode via
ThemeData— never branch onBrightnessmanually in widgets
Spacing
- ✅ Use
AppSpacing.xxs(2),AppSpacing.xs(4),AppSpacing.sm(8),AppSpacing.md(16),AppSpacing.lg(24),AppSpacing.xl(32),AppSpacing.xxl(48) - ✅ Use
AppSpacing.screenHorizontal(24),AppSpacing.screenVertical(16) for consistent screen padding - ❌ NEVER use
EdgeInsets.all(16.0),SizedBox(height: 8), or hardcoded padding values - Use
SizedBox(height: AppSpacing.sm)for gaps — notContainerorPaddingwith empty child
More from dhruvanbhalara/skills
flutter-ui
Build performant, accessible UIs with strict design tokens and reusable widget patterns. Use when implementing layouts, responsive breakpoints, theming, widget extraction, or fixing common rendering issues like overflow errors.
174flutter-firebase
Integrate Firebase services including Authentication, Firestore, Cloud Messaging, Crashlytics, and Analytics. Use when adding backend capabilities, push notifications, crash reporting, or remote configuration to a Flutter app.
139flutter-dio
Implement HTTP networking with Dio including interceptors, retry logic, and response caching. Use when building API clients, configuring authentication headers, or handling network errors gracefully.
138flutter-security
Enforce architect-level security standards including AES-256-GCM encryption, secure storage, biometric gates, and memory safety. Use when handling sensitive data, credentials, clipboard content, or API communication security.
136flutter-architecture
Enforce Clean Architecture with BLoC pattern for Flutter applications. Use when scaffolding features, structuring data/domain/presentation layers, defining data models, or integrating native platform channels.
134flutter-debugging
Debug and profile Flutter applications using DevTools, structured logging, and memory analysis. Use when diagnosing layout issues, tracking performance bottlenecks, or setting up centralized error reporting with Crashlytics.
130