---

name: flutter_vibe description: Generate premium, production-ready Flutter apps with Vibe-Coded standards (Riverpod, GoRouter, Material 3) backed by deep Flutter internals knowledge.

Flutter Vibe Skill

This skill provides a "Vibe-Coded" foundation for building premium Flutter applications. It enforces modern best practices, including Riverpod for state management, GoRouter for navigation, and a deep-space aesthetic by default.

[!NOTE] This skill is backed by deep knowledge from the Flutter Engine source and official internal docs, enabling precise guidance on performance, platform integration, and rendering.

---

1. Vibe Engine (The Aesthetic)

The "Vibe Engine" is a philosophy: high-contrast, deep-space palettes with neon accents and fluid animations.

Color Palette (Deep Space)

Typography

• Headings: Outfit or Space Grotesk (Bold, letter-spacing: -0.5)
• Body: Inter or Roboto (Clean, readable)

Animations

Copyconst vibeCurve = Curves.fastOutSlowIn;
const vibeQuickDuration = Duration(milliseconds: 200);
const vibeStandardDuration = Duration(milliseconds: 300);

---

2. Architecture (Feature-First)

Copylib/
├── core/
│   ├── constants/       # VibeColors, VibeDimens
│   ├── theme/           # VibeTheme (Material 3)
│   ├── router/          # GoRouter configuration
│   └── utils/           # Helpers
├── features/
│   └── [feature]/
│       ├── data/        # Repositories & DTOs
│       ├── domain/      # Entities (freezed)
│       └── presentation/
│           ├── providers/   # Riverpod Notifiers
│           └── screens/     # Screens & Widgets
├── shared/              # VibeButton, VibeCard, etc.
└── main.dart            # ProviderScope + VibeApp

---

3. Actions

scaffold_app

Generate complete app structure with theme, router, and home screen.

generate_widget

Generate premium widgets with animations and theme integration.

generate_feature

Generate full feature slice: domain → data → presentation.

generate_screen

Generate a screen with state management (HooksConsumerWidget).

explain_code

Mentor-style analysis with Vibe standards verification.

review_code

Compliance score (0-100) with specific fixes.

---

4. Core Templates

Main Entry Point

Copyimport 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'core/router/app_router.dart';
import 'core/theme/vibe_theme.dart';

void main() {
  runApp(const ProviderScope(child: VibeApp()));
}

class VibeApp extends ConsumerWidget {
  const VibeApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
      title: 'Vibe App',
      theme: VibeTheme.dark(),
      routerConfig: ref.watch(routerProvider),
      debugShowCheckedModeBanner: false,
    );
  }
}

Riverpod Notifier Pattern

Copyimport 'package:flutter_riverpod/flutter_riverpod.dart';

@freezed
class FeatureState with _$FeatureState {
  const factory FeatureState({
    @Default(false) bool isLoading,
    String? error,
  }) = _FeatureState;
}

final featureProvider = NotifierProvider<FeatureNotifier, FeatureState>(
  FeatureNotifier.new,
);

class FeatureNotifier extends Notifier<FeatureState> {
  @override
  FeatureState build() => const FeatureState();

  Future<void> load() async {
    state = state.copyWith(isLoading: true);
    // ... fetch data ...
    state = state.copyWith(isLoading: false);
  }
}

---

5. Flutter Engine Internals

[!TIP] Understanding engine internals helps write performant code.

Life of a Frame

1. RequestFrame → Frame scheduled via PlatformDispatcher.scheduleFrame
2. VSync → Wait for OS vsync signal
3. BeginFrame → Framework builds widget tree → Scene
4. Rasterization → LayerTree converted to pixels on Raster thread
5. Present → Surface submitted to GPU via Metal/Vulkan/OpenGL

Key Insight: The warm-up frame (scheduleWarmUpFrame) pre-builds layouts before the first vsync, reducing first-frame jank.

Compilation Modes

Graphics Backends (Platform-specific)

• iOS: Metal (default), Impeller
• Android: Vulkan (default), OpenGL, Impeller
• Desktop: OpenGL, Software, Vulkan (via MoltenVK on macOS)

---

6. Platform Views (Android)

Three approaches for embedding native Android Views:

Copy// Prefer TLHC (falls back to VD on older SDK)
PlatformViewsService.initAndroidView(
  id: viewId,
  viewType: 'my-view-type',
  layoutDirection: TextDirection.ltr,
);

// For SurfaceView content (maps, video), use HC
PlatformViewsService.initExpensiveAndroidView(...);

---

7. Flutter GPU (Impeller)

[!WARNING] Flutter GPU is experimental and requires Impeller + master channel.

Low-level graphics API for custom renderers in pure Dart + GLSL.

Copydependencies:
  flutter_gpu:
    sdk: flutter

Use Cases: Custom 3D renderers, game engines, specialized visualizations.

---

8. Platform Channels

MethodChannel (Dart ↔ Native)

Copy// Dart
const channel = MethodChannel('com.vibe/native');
final result = await channel.invokeMethod<int>('getBattery');

// Android (Kotlin)
MethodChannel(flutterEngine.dartExecutor, "com.vibe/native")
  .setMethodCallHandler { call, result ->
    when (call.method) {
      "getBattery" -> result.success(getBatteryLevel())
    }
  }

Android Engine Warm Start

Pre-warm the Flutter engine to avoid cold boot delays:

Copy// Application class
val engine = FlutterEngine(this).apply {
  dartExecutor.executeDartEntrypoint(DartEntrypoint.createDefault())
}
FlutterEngineCache.getInstance().put("main", engine)

// Activity launch
startActivity(FlutterActivity.withCachedEngine("main").build(this))

---

9. Rules of the Vibe

1. No setState → Use Riverpod Notifiers or hooks
2. Const Everything → Maximize widget reuse
3. Animate Entrances → FadeTransition/SlideTransition on screens
4. Dark by Default → Light mode is optional
5. Blur & Glass → BackdropFilter for premium surfaces
6. Clean Layers → No API calls in widgets; use repositories

---

10. Dependencies

Copydependencies:
  flutter_riverpod: ^2.6.0
  hooks_riverpod: ^2.6.0
  flutter_hooks: ^0.20.0
  go_router: ^15.0.0
  google_fonts: ^6.0.0
  freezed_annotation: ^2.4.0
  flutter_animate: ^4.5.0

dev_dependencies:
  freezed: ^2.5.0
  build_runner: ^2.4.0

---

11. Resources

Deep knowledge extracted from Flutter Engine docs and community best practices:

• Adaptive Design
• Animations
• Assets & Media
• Core Dart Libraries
• Data Persistence
• Documentation
• Flutter GPU & Impeller
• Forms & Inputs
• Internationalization
• Integrations (Android)
• Integrations (iOS)
• Integrations (macOS)
• Integrations (Web)
• Integrations (Windows)
• Navigation
• Networking
• Package Management
• State Management
• Testing Essentials
• Theming

12. State Management

State management is the discipline of managing the data that allows your app to function and react to user input.

Overview

• Ephemeral State: Local state (e.g., setState, pageController). Use for single widgets.
• App State: Shared state across many parts of the app (e.g., user authentication, shopping cart).

Built-in Approaches

• setState: Good for ephemeral state. Rebuilds the widget subtree.
• InheritedWidget / InheritedModel: Low-level method for passing data down the tree. Efficient but verbose.
• ValueNotifier / InheritedNotifier: Simple reactive programming using listeners.

Vibe Standard: Riverpod

We strictly use Riverpod for application state in flutter_vibe projects.

• Compile-safe: Catch errors at compile time, not runtime.
• No BuildContext dependency: Read providers anywhere.
• Testing: easy to mock and override.

Key Packages:

• flutter_riverpod
• hooks_riverpod
• riverpod_annotation

---

13. Documentation Links

• Widget Catalog
• Riverpod
• GoRouter
• Impeller
• Flutter GPU Article
• Flutter Rendering Pipeline
• Flutter API Reference
• Material Library
• Foundation Library
• Gestures Library
• Rendering Library
• Painting Library
• Physics Library
• Scheduler Library
• Semantics Library
• Services Library
• Widget Previews Library
• Widgets Library
• dart:async Library
• dart:ui Library
• dart:ui_web Library