Flutter Expert
Use when building cross-platform applications with Flutter 3+ and Dart.
Before & after
Same prompt, same agent — the only difference is the skill.
Flutter is great for chat apps. There are a lot of decisions to make though: Do you want real-time messaging with WebSockets or just polling? What's your backend? Firebase is popular, but you could also build your own. State management—are you using Riverpod, Bloc, or Provider? And do you need push notifications? If you tell me more about your backend choice and user scale, I can point you toward the right patterns.
FLUTTER CHAT APP ARCHITECTURE
PROJECT STRUCTURE
lib/
models/
message.dart (id, userId, text, createdAt)
conversation.dart (participantIds, lastMessage)
screens/
conversation_list.dart
chat_screen.dart
providers/ (Riverpod)
conversation_provider.dart (state management)
message_provider.dart (real-time stream)
widgets/
message_bubble.dart
chat_input.dart
services/
firestore_service.dart (Firestore client)
auth_service.dart
STATE MANAGEMENT
Riverpod StreamProvider for real-time messages
StateNotifier for UI state (isLoading, error)
AsyncValue for handling loading + error states
REAL-TIME MESSAGING
Firebase Firestore with collection listeners
Conversations → Messages subcollection
OnSnapshot() streams new messages to UI (sub-100ms)
Offline persistence enabled by default
UI/UX DETAILS
Material 3 theme (supports light/dark)
ListView.builder for 2000+ messages without jank
GestureDetector for long-press reactions
Animated slide-in for new message bubble
PUSH NOTIFICATIONS
Firebase Cloud Messaging (FCM)
LocalNotifications for badge count
Notification dismissed on app foreground
PERFORMANCE TARGETS
• Message latency: <300ms (Firestore avg)
• Frame rate: 60fps (Profile in DevTools)
• Memory: <150MB cold startAbout this skill
name: flutter-expert description: Use when Use when building cross-platform applications with Flutter 3+ and Dart.
Flutter Expert
Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
What you get
- Public GitHub repo
- the skills/flutter-expert folder with SKILL.md and references.
Customize your output
- Fork the repo and extend the skill's reference files for your own stack conventions.
Example output
Activates on a matching request (e.g. building or reviewing Flutter Expert code) and can chain with other skills in the pack.
Best for
Full-stack developers and engineering teams using Claude Code.
SKILL.md preview
---
name: flutter-expert
description: Use this skill when building cross-platform applications with Flutter 3+ and Dart.
version: 1.0.0
category: Development / Frontend
author: AgentVolt
license: proprietary
tags:
- development
- frontend
---
# Flutter Expert
Builds and reviews Flutter 3+ applications, from widget composition to platform channel work, favoring patterns that hold up as the app grows past a prototype.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →Angular Architect
Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance.
Vue Expert (JS)
Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript.
React Expert
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups.
Shopify Expert
Builds and debugs Shopify themes, develops custom apps with OAuth and webhooks, and implements Storefront API integrations for headless or Hydrogen storefronts.