skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-flutter

Implement Flutter screens with Provider, GoRouter, Firebase, and Material 3.

Updated May 19, 2026
Search Tags:#architecture#state management#localization#flutter#firebase#provider#material 3
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-flutter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-flutter
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-flutter
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-flutter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

kb-flutter helps you avoid inconsistent Flutter architecture and brittle UI state handling by providing portable, opinionated guidance for layered structure, Provider-based state management, design token discipline, and the required 4-state screen checklist (loading, error, empty, data).

Core Features & Use Cases

  • Layered architecture: Screens and widgets compose UI, Providers manage state, Services handle Firebase/API logic, and Models encapsulate data.
  • Provider consumption rules: Choose the right mechanism (Consumer, Selector, context.read, context.watch) to control rebuild behavior and performance.
  • Mobile-ready screen workflow: Enforces an order-of-creation process and guarantees every screen handles all four runtime states.
  • Design tokens & flavor discipline: Centralizes theme tokens (colors/typography/spacing) and supports overrides per flavor/brand.
  • Platform conventions: Provides iOS vs Android UX guidance to unify business logic while diverging in navigation, gestures, and modals.
  • Firebase integration patterns: Keeps screens UI-only while providers consume services that wrap Firebase SDKs, including Auth/Firestore/Messaging/Storage.
  • Localization: Uses ARB and flutter gen-l10n to prevent hardcoded user-visible strings.

Real-world example: You are adding a new “Orders” screen to a Flutter app backed by Firestore; use the skill’s checklist to create the model/service/provider/screen, implement the 4-state UI, wire it into GoRouter, and ensure all ARB strings and tokens are used consistently across flavors.

Quick Start

Use kb-flutter to design and implement a new Firebase-backed Flutter screen with Provider state, ARB localization, Material 3 tokens, and mandatory loading/error/empty/data rendering for a consistent mobile UX.

Frequently Asked Questions about kb-flutter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Flutter app with Provider and Firebase?▼

Structure Flutter apps with Provider and Firebase by separating UI screens from state managers and Firebase services. This layered architecture keeps screens UI-only while providers consume services that wrap Firestore and Auth SDKs.

What is the 4-state screen checklist for Flutter mobile development?▼

The 4-state screen checklist for Flutter mobile development requires every screen to handle loading, error, empty, and data states. This pattern guarantees consistent UX by forcing developers to account for all runtime conditions during screen creation.

How do I choose between Consumer, Selector, and context.watch in Flutter?▼

Choose between Consumer, Selector, context.read, and context.watch in Flutter based on rebuild behavior and performance needs. Selecting the right Provider consumption mechanism controls widget rebuilds and optimizes app performance.

Does kb-flutter support Material 3 design tokens and ARB localization?▼

kb-flutter supports Material 3 design tokens and ARB localization by centralizing theme tokens like colors and spacing, and using flutter gen-l10n to prevent hardcoded user-visible strings across different flavors.

How do I create a new Firestore-backed screen with GoRouter?▼

Create a Firestore-backed screen with GoRouter by following an order-of-creation process to build the model, service, provider, and screen. Wire the UI into GoRouter while enforcing the 4-state rendering checklist.

Can I use kb-flutter for platform-specific iOS and Android UX patterns?▼

kb-flutter provides platform-specific iOS and Android UX patterns to unify business logic while diverging in navigation, gestures, and modals. This allows consistent state management across platforms with native-feeling interfaces.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

firebase-remote-config-basics

Configure Firebase Remote Config for Android and iOS apps via CLI and SDK.

Community
Advanced
MinhHoangDonoMinhHoangDono

mobile-development

Guide mobile app development across React Native, Flutter, and native iOS/Android.

Community
Intermediate
333-333-333333-333-333

flutter-navigation

Implement GoRouter patterns for Flutter navigation with auth guards and deep links.

Community
Advanced
jerelvelardejerelvelarde
6

flutter-state-management

Guide Flutter developers in selecting and implementing state management patterns.

Community
Advanced