thruthesky/flutter-skill

Overview

This skill provides mandatory, production-grade guidelines for building Flutter apps focused on UI/UX design, state management, routing, networking, and API integration. It prescribes a strict workflow and required rules that must be followed for any requests related to design, layout, state, routing, localization, push notifications, authentication, or messaging. The goal is consistent, theme-driven, accessible, and maintainable Flutter applications across projects.

How this skill works

Follow the defined Workflow at the top of each document: route requests to the appropriate guideline (Comic Design, Layout, Provider, GoRouter, i18n, Firebase FCM, Firebase Auth). Enforce theme-based styling, flat design, i18n for all user-facing text, and the specified packages and patterns. The skill inspects UI/UX decisions, style usage, state patterns, routing choices, caching, and push/auth flows and returns prescriptive actions to comply with the rules.

When to use it

• When designing any UI component, screens, or animations to ensure consistent Comic-style and theme usage.
• When selecting or implementing a state management approach (Provider, Selector, ChangeNotifier).
• When defining routing and navigation behavior using GoRouter.
• When implementing localization or ARB workflows for multi-language support.
• When setting up push notifications, FCM token handling, or Firebase messaging flows.
• When integrating network APIs, caching, and authentication (Firebase Auth) in a secure, consistent manner.

Best practices

• Always derive colors and text styles from Theme.of(context) and avoid hard-coded colors, sizes, or strings.
• Use flat design: elevation must be 0; prefer Theme-based surfaces and outlines.
• Internationalize all user-visible text with i18n keys; never hard-code strings in widgets.
• Use Provider patterns (ChangeNotifier, Selector) for state; avoid ad-hoc global state or inconsistent architectures.
• Follow 8px spacing scale and Comic design tokens (border width, radius) when applicable.
• Use file_cache_flutter for caching network responses and assets with TTL and automatic cleanup.

Example use cases

• Designing a new app screen: apply Comic design tokens, Theme-based colors, and i18n text keys.
• Implementing list screens: follow Flutter Layout guidelines with CustomScrollView or ListView patterns.
• Adding push notifications: implement FCM token handling and message handling per Firebase FCM document.
• Building auth flows: implement Firebase Auth with explicit error handling and email enumeration protection.
• Caching API responses: use file_cache_flutter with appropriate TTL and cleanup logic.