flutter-expert

Q: How do I install flutter-expert?

Run npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill flutter-expert in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-expert/ (personal) or .claude/skills/flutter-expert/ (project).

by 404kidwizMobile

Expert in building cross-platform apps with Flutter 3+. Specializes in Dart, Riverpod, Flame (Game Engine), and FFI (Native Integration).

Installs: 172
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill flutter-expert

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads flutter-expert automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Flutter Expert

Purpose

Provides cross-platform mobile development expertise specializing in Flutter 3+, Dart programming, and Riverpod state management. Builds high-fidelity applications for Mobile, Web, and Desktop with advanced rendering optimization (Impeller), custom render objects, and native integrations via FFI and Method Channels.

When to Use

Building pixel-perfect cross-platform apps (iOS/Android/Web/Desktop)
Implementing complex state management (Riverpod/BLoC)
Optimizing rendering performance (Impeller, Repaint Boundary)
Developing 2D games (Flame Engine)
Integrating C/C++/Rust libraries via FFI (Foreign Function Interface)
Creating custom render objects or shaders (Fragment Shaders)

2. Decision Framework

State Management Selection

Pattern	Best For	Complexity	Pros
Riverpod	Default Choice	Medium	Compile-time safety, no context dependency, testable.
BLoC/Cubit	Enterprise	High	Strict event/state separation, great for logging/analytics.
Provider	Legacy/Simple	Low	Built-in, simple, but relies on BuildContext.
GetX	Rapid MVP	Low	"Magic" reactive, less boilerplate, but non-standard patterns.

Platform Integration Strategy

How to talk to Native?
│
├─ **Method Channels (Standard)**
│  ├─ Async calls? → **MethodChannel**
│  └─ Streams? → **EventChannel**
│
├─ **FFI (High Performance)**
│  ├─ C/C++ Library? → **dart:ffi**
│  └─ Rust Library? → **Flutter Rust Bridge**
│
└─ **Platform Views (UI)**
   ├─ Native UI inside Flutter? → **AndroidView / UiKitView**
   └─ Performance Critical? → **Hybrid Composition**

Rendering Engine (Impeller vs Skia)

Impeller (Default iOS): Predetermined shaders. Zero jank.
Skia (Legacy/Android): Runtime shader compilation. Can have jank on first run.
Optimization: Use RepaintBoundary to isolate heavy paints (e.g., video players, rotating spinners).

Red Flags → Escalate to mobile-developer (Native):

Requirements for App Clips / Instant Apps (Flutter support is limited/heavy)
Extremely memory-constrained environments (Flutter engine adds ~10-20MB overhead)
OS-level integrations not yet exposed (e.g., brand new iOS beta features)

Workflow 2: Custom Shader (Fragment Program)

Goal: Create a visual effect (e.g., pixelation).

Steps:

Shader Code (shaders/pixelate.frag)

#include <flutter/runtime_effect.glsl>

uniform vec2 uSize;
uniform float uPixels;
uniform sampler2D uTexture;

out vec4 fragColor;

void main() {
    vec2 uv = FlutterFragCoord().xy / uSize;
    vec2 pixelatedUV = floor(uv * uPixels) / uPixels;
    fragColor = texture(uTexture, pixelatedUV);
}

Load & Apply

// Load asset
final program = await FragmentProgram.fromAsset('shaders/pixelate.frag');

// CustomPainter
void paint(Canvas canvas, Size size) {
  final shader = program.fragmentShader();
  shader.setFloat(0, size.width); // uSize.x
  shader.setFloat(1, size.height); // uSize.y
  shader.setFloat(2, 50.0); // uPixels (50x50 grid)
  
  final paint = Paint()..shader = shader;
  canvas.drawRect(Offset.zero & size, paint);
}

4. Patterns & Templates

Pattern 1: Clean Architecture (Layers)

Use case: Scalable enterprise apps.

lib/
  domain/       # Entities, Repository Interfaces (Pure Dart)
    entities/
    repositories/
  data/         # Implementations (API, DB)
    datasources/
    repositories/
    models/     # DTOs
  presentation/ # UI, Controllers (Flutter)
    pages/
    widgets/
    controllers/

Pattern 2: Repository Pattern (Riverpod)

Use case: Decoupling API from UI.

@riverpod
AuthRepository authRepository(AuthRepositoryRef ref) {
  return FirebaseAuthImpl(FirebaseAuth.instance);
}

@riverpod
Future<User> currentUser(CurrentUserRef ref) {
  return ref.watch(authRepositoryProvider).getCurrentUser();
}

Pattern 3: Responsive Layout (Adaptive)

Use case: Supporting Phone, Tablet, and Desktop.

class AdaptiveScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    
    if (width > 900) {
      return Row(children: [NavRail(), Expanded(child: Body())]);
    } else {
      return Scaffold(
        drawer: Drawer(),
        body: Body(),
        bottomNavigationBar: BottomNavBar(),
      );
    }
  }
}

6. Integration Patterns

backend-developer:

Handoff: Backend provides Swagger/OpenAPI → Flutter Expert uses openapi_generator to build Dart clients.
Collaboration: Handling JWT refresh tokens (interceptors).
Tools: Dio Interceptors.

mobile-developer:

Handoff: Native dev writes Swift/Kotlin plugin → Flutter Expert wraps it in Method Channel.
Collaboration: Debugging platform-specific crashes (Xcode/Android Studio).
Tools: Pigeon (Type-safe interop).

ui-designer:

Handoff: Designer provides Rive animation (.riv) → Flutter Expert integrates via rive package.
Collaboration: Implementing custom Painter for non-standard shapes.
Tools: Rive, Flutter Shape Maker.

FAQ

What does the flutter-expert skill do?

Expert in building cross-platform apps with Flutter 3+. Specializes in Dart, Riverpod, Flame (Game Engine), and FFI (Native Integration).

How do I install flutter-expert?

Run npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill flutter-expert in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-expert/ (personal) or .claude/skills/flutter-expert/ (project).

Which AI agents can use flutter-expert?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is flutter-expert safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains flutter-expert?

It is published by 404kidwiz in 404kidwiz/claude-supercode-skills. It has 172 recorded installs.