accessibility
Use when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions,…
Use when adding Firebase to a Flutter project, running flutterfire configure, initializing Firebase in main.dart, or configuring multiple flavors.
Claude Code
$ npx -y skills add evanca/flutter-ai-rules --skill flutterfire-configure --agent claude-code
Codex
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a codex -y
Cursor
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a cursor -y
Gemini CLI
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a gemini-cli -y
GitHub Copilot
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a github-copilot -y
OpenCode
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a opencode -y
Windsurf
$ npx skills add evanca/flutter-ai-rules --skill flutterfire-configure -a windsurf -y
name: flutterfire-configure description: "Use when adding Firebase to a Flutter project, running flutterfire configure, initializing Firebase in main.dart, or configuring multiple flavors." license: MIT
This skill defines how to correctly set up and configure Firebase for Flutter applications.
Use this skill when:
---
Install the required tools:
npm install -g firebase-tools firebase login dart pub global activate flutterfire_cli
**Minimum platform requirements:**
---
# From your Flutter project directory: flutterfire configure # Add the core Firebase package: flutter pub add firebase_core
---
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}---
After configuration, verify the setup is working:
1. Run `flutter run` and confirm the app launches without Firebase initialization errors. 2. Check the debug console for `Firebase initialized successfully` or similar confirmation. 3. Verify `firebase_options.dart` was generated with the correct project ID.
---
Create separate Firebase projects per environment (development, staging, production):
flutterfire config \ --project=flutter-app-dev \ --out=lib/firebase_options_dev.dart \ --ios-bundle-id=com.example.flutterApp.dev \ --ios-out=ios/flavors/dev/GoogleService-Info.plist \ --android-package-name=com.example.flutter_app.dev \ --android-out=android/app/src/dev/google-services.json
**Centralize Firebase initialization by flavor:**
// firebase.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/firebase_options_prod.dart' as prod;
import 'package:flutter_app/firebase_options_stg.dart' as stg;
import 'package:flutter_app/firebase_options_dev.dart' as dev;
Future<void> initializeFirebaseApp() async {
final firebaseOptions = switch (appFlavor) {
'prod' => prod.DefaultFirebaseOptions.currentPlatform,
'stg' => stg.DefaultFirebaseOptions.currentPlatform,
'dev' => dev.DefaultFirebaseOptions.currentPlatform,
_ => throw UnsupportedError('Invalid flavor: $appFlavor'),
};
await Firebase.initializeApp(options: firebaseOptions);
}// main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await initializeFirebaseApp();
runApp(const MainApp());
}---
36 Flutter and Dart skills your coding agent loads by itself, sourced only from official documentation. A skill is a folder with a SKILL.md file.
Use when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions,…
Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection,…
Use when creating a Cubit or Bloc, modeling state with sealed classes or status enums, wiring…
Use when asked to review a PR, MR, branch, or diff, audit changed files, or check code quality.
Use when writing switch statements, refactoring if-else chains, creating data classes, choosing records vs classes, destructuring…
Use when building AI agents in Dart, implementing Genkit flows or tools, integrating LLMs into Dart or Flutter applications, or…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.