Install this skill
npx skills add aj-geddes/useful-ai-promptsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
What this skill does
- β’Generates boilerplate for Flutter project structure and navigation
- β’Implements state management using the Provider pattern
- β’Enforces clean separation between UI widgets and business logic
- β’Provides templates for screen composition and API integration
- β’Offers standard best practices for widget lifecycle management
When to use it
- βStarting a new cross-platform mobile project from scratch
- βRefactoring existing Flutter code to improve state management
- βSetting up complex navigation flows using GoRouter
- βStandardizing widget architecture across a large team
When not to use it
- βDeveloping for web-only platforms where other frameworks might be lighter
- βProjects requiring heavy low-level platform-specific binary integrations
How to invoke it
Example prompts that trigger this skill:
- βCreate a new Flutter screen with a Provider model integrationβ
- βSetup GoRouter navigation in my main.dart fileβ
- βRefactor this widget to separate state logic from the UIβ
- βGenerate a project structure for a standard Flutter appβ
- βShow me the best practices for managing state with Providerβ
Example workflow
- Initialize the Flutter project structure and dependencies
- Configure GoRouter for defined app routes
- Create a provider class for global application state
- Build the UI screen widgets using responsive patterns
- Verify state updates and clean up resources in the lifecycle
Prerequisites
- βFlutter SDK installed
- βDart language familiarity
- βA working mobile development environment (Android Studio or Xcode)
Pitfalls & limitations
- !Over-nesting widgets leads to poor performance and difficult debugging
- !Running network calls inside build methods causes performance bottlenecks
- !Neglecting to dispose of resources leads to memory leaks
FAQ
How it compares
Generic prompts often hallucinate deprecated widget structures, whereas this skill provides verified, production-ready templates based on current Flutter best practices.
Source & trust
From the source: β# Flutter Development ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-guides) - [Best Practices](#best-practices) ## Overview Create high-performance, visually stunning mobile applications using Flutter with Darβ¦β
View the full SKILL.md source
# Flutter Development
## Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
## Overview
Create high-performance, visually stunning mobile applications using Flutter with Dart language. Master widget composition, state management patterns, navigation, and API integration.
## When to Use
- Building iOS and Android apps with native performance
- Designing custom UIs with Flutter's widget system
- Implementing complex animations and visual effects
- Rapid app development with hot reload
- Creating consistent UX across platforms
## Quick Start
Minimal working example:
```dart
// pubspec.yaml
name: my_flutter_app
version: 1.0.0
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
http: ^1.1.0
go_router: ^12.0.0
// main.dart with GoRouter navigation
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
// ... (see reference guides for full implementation)
```
## Reference Guides
Detailed implementations in the `references/` directory:
| Guide | Contents |
|---|---|
| [Project Structure & Navigation](references/project-structure-navigation.md) | Project Structure & Navigation |
| [State Management with Provider](references/state-management-with-provider.md) | State Management with Provider |
| [Screens with Provider Integration](references/screens-with-provider-integration.md) | Screens with Provider Integration |
## Best Practices
### β
DO
- Use widgets for every UI element
- Implement proper state management
- Use const constructors where possible
- Dispose resources in state lifecycle
- Test on multiple device sizes
- Use meaningful widget names
- Implement error handling
- Use responsive design patterns
- Test on both iOS and Android
- Document custom widgets
### β DON'T
- Build entire screens in build() method
- Use setState for complex state logic
- Make network calls in build()
- Ignore platform differences
- Create overly nested widget trees
- Hardcode strings
- Ignore performance warnings
- Skip testing
- Forget to handle edge cases
- Deploy without thorough testing
Quoted from aj-geddes/useful-ai-prompts for reference β see the original for the authoritative, latest version.
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/flutter-development/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/aj-geddes/useful-ai-prompts/flutter-development/SKILL.md - Cursor:
~/.cursor/skills/aj-geddes/useful-ai-prompts/flutter-development/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/aj-geddes/useful-ai-prompts/flutter-development/SKILL.md
π Install with CLI:npx skills add aj-geddes/useful-ai-prompts