Agent skill

Flutter

by EliasOulkadi in EliasOulkadi/shokunin

Build production Flutter apps with Clean Architecture, Riverpod (preferred over Bloc/Provider), GoRouter navigation, Impeller rendering engine, Dart 3.7+ patterns, platform channels via Pigeon, and…

MITAuto-check passedMobile

Install Flutter

skills CLI
$ npx skills add EliasOulkadi/shokunin --skill flutter -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install EliasOulkadi/shokunin flutter --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.pack/skills/flutter .claude/skills/flutter && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flutter
GitHub stars
114
Token cost
~3.2k tokens
SKILL.md length
1,079 words
Files
1
Skills in repo
49
Repo updated
First seen
Licence
MIT

At a glance

Build production Flutter apps with Clean Architecture, Riverpod (preferred over Bloc/Provider), GoRouter navigation, Impeller rendering engine, Dart 3.7+ patterns, platform channels via Pigeon, and…

  • Works in 6 steps: Scaffold: dart run flutter_skeleton or… → Domain first: Define entities,… → Data layer: Implement repositories with… → …
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Decision Framework, Workflow, Sub-Commands and Architecture, plus 10 more sections
  • Calls flutter and dart

What it does

Flutter is an agent skill from EliasOulkadi/shokunin. Build production Flutter apps with Clean Architecture, Riverpod (preferred over Bloc/Provider), GoRouter navigation, Impeller rendering engine, Dart 3.7+ patterns, platform channels via Pigeon, and App Store/Play Store deployment.

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: opencode

It sits in Mobile, covering Cross-platform mobile apps and App store release. It works with Flutter and Dart. The repository describes itself as: 職人 Shokunin 62 AI agent skills for OpenCode, Claude Code, Cursor, Windsurf. ChromaDB memory, MCP servers, declarative self-updates. Multi-model, open source, zero cost. The licence is MIT.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve App store release

Example prompts

  • “/flutter”

Requirements

  • Compatibility (from SKILL.md): opencode

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Scaffold: dart run flutter_skeleton or create lib/core, lib/features/*/domain|data|presentation by hand. Add Riverpod + GoRouter + Freezed…
  2. Domain first: Define entities, repository contracts, and use cases. Zero Flutter imports. Pure Dart with freezed for sealed unions.
  3. Data layer: Implement repositories with Dio/retrofit, DTOs with json_serializable, and data sources. Wire up in Riverpod with Provider.
  4. Presentation: Build screens and widgets with ConsumerWidget/ConsumerStatefulWidget. Wire NotifierProvider for each feature. Keep ref.watch…
  5. Routing: Configure GoRouter with auth redirect (redirect guard), nested routes per feature, and deep link patterns.
  6. Ship: Run tests → flutter build appbundle / flutter build ipa → deploy via Codemagic or GitHub Actions. Enable Impeller on Android in…

What it can do on your machine

Read from SKILL.md and the folder at commit 4c68e5b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • flutter
    • dart

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    opencode

    From compatibility in the SKILL.md frontmatter.

Context cost

Flutter loads about 3.2k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 1,079 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from EliasOulkadi/shokunin at commit 4c68e5b, republished under its MIT licence (© EliasOulkadi). 1,079 words, ~3,176 tokens.

Download SKILL.mdSave it as .claude/skills/flutter/SKILL.md (or your agent's skills folder).
name
flutter
description
Build production Flutter apps with Clean Architecture, Riverpod (preferred over Bloc/Provider), GoRouter navigation, Impeller rendering engine, Dart 3.7+ patterns, platform channels via Pigeon, and App Store/Play Store deployment.
compatibility
opencode
triggers
create a Flutter app, set up state management, design widgets, implement navigation, deploy to stores, flutter clean architecture, riverpod, go_router, build…
negatives
React Native, web-only React, general mobile design, SwiftUI, Jetpack Compose, Xamarin, Ionic, Cordova
license
MIT
metadata.workflow
mobile
metadata.audience
developers
metadata.version
4.0.0
metadata.author
shokunin

Flutter Architect

Widgets are functions of state. Keep them pure. Compose, don't inherit.

Production Flutter apps with Clean Architecture, Riverpod, GoRouter, Impeller, and platform channels. Based on Flutter docs, Riverpod patterns, and production experience.

Decision Framework

Before writing Flutter code, answer:

  • Is native performance critical? (animations, camera, maps) → Flutter is a strong fit
  • Is the team already experienced with Dart? → Proceed. If React/TypeScript, consider react-native skill
  • Is the app content-heavy with standard platform UI? → Consider native or react-native
  • Does the app need platform-specific features not available in packages? → Verify pub.dev coverage first

Workflow

  1. Scaffold: dart run flutter_skeleton or create lib/core, lib/features/*/domain|data|presentation by hand. Add Riverpod + GoRouter + Freezed deps in pubspec.yaml.
  2. Domain first: Define entities, repository contracts, and use cases. Zero Flutter imports. Pure Dart with freezed for sealed unions.
  3. Data layer: Implement repositories with Dio/retrofit, DTOs with json_serializable, and data sources. Wire up in Riverpod with Provider<AuthRepository>.
  4. Presentation: Build screens and widgets with ConsumerWidget/ConsumerStatefulWidget. Wire NotifierProvider for each feature. Keep ref.watch at leaf level.
  5. Routing: Configure GoRouter with auth redirect (redirect guard), nested routes per feature, and deep link patterns.
  6. Ship: Run tests → flutter build appbundle / flutter build ipa → deploy via Codemagic or GitHub Actions. Enable Impeller on Android in build.gradle.

Sub-Commands

CommandDescription
scaffoldCreate project with folder structure and dependencies
featureDesign a feature with domain/data/presentation layers
stateSet up Riverpod providers for a feature
routeConfigure GoRouter with auth guard and deep links
testWrite unit + widget + integration tests
shipBuild and deploy to App Store + Play Store

Architecture

lib/
├ core/
│   ├ theme/      # Material 3 theming
│   ├ constants/  # App-wide constants
│   └ network/    # Dio + interceptors
├ features/
│  ├ auth/
│  │   ├ domain/        # Pure Dart — entities, use cases, contracts
│  │   ├ data/          # Repo impl, API, DTOs, data sources
│  │   └ presentation/  # Riverpod providers + screens + widgets
│  ├ home/
│  └ profile/
└ main.dart
Domain Layer (zero Flutter imports)
dart
class User {
  final String id;
  final String email;
  const User({required this.id, required this.email});
}

abstract class AuthRepository {
  Future<User> login(String email, String password);
  Stream<User?> authStateChanges();
}

class Login {
  final AuthRepository repository;
  const Login(this.repository);
  Future<User> call(String email, String password) => repository.login(email, password);
}
Riverpod State Management
ScenarioProvider
Most appsRiverpod (async-first, testable, DI built-in)
Large team, strict unidirectionalBloc (explicit events/states)
Legacy or tinyProvider (simple, context-coupled)
dart
final authStateProvider = StreamProvider<User?>((ref) {
  return ref.watch(authRepositoryProvider).authStateChanges();
});

final loginProvider = NotifierProvider<LoginNotifier, AsyncValue<void>>((ref) {
  return LoginNotifier(ref.watch(loginUseCaseProvider));
});

class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final status = ref.watch(loginProvider);
    return status.when(
      loading: () => const CircularProgressIndicator(),
      error: (e, _) => ErrorWidget(message: e.toString()),
      data: (_) => const LoginForm(),
    );
  }
}
GoRouter with Auth Guard
dart
final router = GoRouter(
  redirect: (context, state) {
    final isAuth = ref.read(authStateProvider).value != null;
    final isLogin = state.matchedLocation.startsWith('/login');
    if (!isAuth && !isLogin) return '/login';
    if (isAuth && isLogin) return '/';
    return null;
  },
  routes: [
    GoRoute(path: '/', builder: (_, __) => const HomeScreen()),
    GoRoute(path: '/login', builder: (_, __) => const LoginScreen()),
  ],
);
Impeller

Since Flutter 3.24+, Impeller is default on iOS. On Android, opt in:

gradle
// android/app/build.gradle
renderingEngine = "impeller"

Eliminates first-frame jank. Faster frame rendering. Better memory on low-end devices.

Platform Channels via Pigeon
dart
// battery.dart (Pigeon input)
@HostApi()
abstract class BatteryApi {
  int getBatteryLevel();
}

Run: dart run pigeon --input battery.dart --dart_out lib/battery.dart

Performance Rules

  • const constructors everywhere
  • Consumer at leaf level (not entire screen)
  • ListView.builder / GridView.builder (lazy)
  • cached_network_image
  • Profile: flutter run --profile, DevTools
  • Avoid RepaintBoundary overuse

Perceived Performance

Flutter renders at 60fps on most devices and 120fps on ProMotion displays. Performance perception differs:

TechniquePerception impactImplementation
Skeleton loadersFeels faster than spinners. Shows structure immediately.shimmer package with matching layout shape
const constructorsWidgets that never change skip rebuild entirely. Cumulative gain on deep trees.const Text('...'), const SizedBox(...), const Icon(...)
extent estimation on scrollablesEliminates jank from recalculating item sizes during scroll.ListView.builder(itemExtent: 56.0, ...)
AnimatedSwitcher vs VisibilityFade transitions feel smoother than instant appear/disappear.Wrap changing content in AnimatedSwitcher(duration: 200ms)
RepaintBoundaryIsolates repaint of frequently-changing widgets (timers, animations) from rest of tree.Wrap animated clock/progress bar in RepaintBoundary

Error Handling

ScenarioCauseFix
Bad state: No elementEmpty stream/iterable accessed without checkGuard with .isEmpty or use .firstOrNull
LateInitializationErrorlate variable accessed before initUse nullable T? or StateNotifier with initial value
Platform channel: MissingPluginExceptionMethod not implemented on native sideVerify Pigeon codegen ran, check method name matches both sides
ConcurrentModificationErrorModifying list while iteratingUse .toList() to copy before mutation, or use List.unmodifiable
type 'Null' is not a subtype of type 'String'JSON null from API not handled in DTOAdd @JsonKey(defaultValue: '') or make fields nullable, run codegen
GoRouter: GoError: no routes for locationDeep link path not registeredAdd fallback redirect to / or register catch-all /* route
Riverpod: provider not disposedCircular dependency between providersUse ref.watch in build methods only, never in constructors. Break cycles with Provider.autoDispose
Build failed: Could not resolve all files (Android)Gradle dependency conflict or outdated pluginRun ./gradlew --refresh-dependencies, check build.gradle versions match AGP requirements

Production Checklist

  • Riverpod providers: domain → data → presentation layers
  • Domain layer: zero Flutter imports
  • GoRouter: auth redirect + deep linking
  • Impeller enabled on Android
  • const constructors everywhere
  • Platform channels via Pigeon (not manual MethodChannel)
  • Unit tests for domain layer
  • Widget tests for critical screens
  • CI/CD: Codemagic / GitHub Actions
  • ErrorWidget.builder + PlatformDispatcher.onError
  • Retry logic on network failures
  • Freezed / sealed classes for state unions
Show full SKILL.md (409 more words)Show less

Anti-Patterns

Anti-patternFix
Business logic in widgetsExtract to Riverpod notifiers / use cases
ref.watch inside callbacksref.read for one-time reads
Giant widgets > 200 linesExtract into smaller widgets
Manual MethodChannelPigeon for type-safe channels
No error handling in AsyncValueHandle loading/error/data explicitly
One giant GoRouter fileSplit routes into feature modules

Review Format (Required)

When reviewing Flutter code, use Before | After | Why format:

BeforeAfterWhy
setState(() { count++; }) in large widgetref.watch(counterProvider.notifier).increment()setState triggers full widget rebuild; Riverpod isolates state changes
ListView(children: items.map((e) => Widget(e)).toList())ListView.builder(itemCount: items.length, itemBuilder: (_, i) => Widget(items[i]))Builder lazily constructs only visible items; map builds all upfront
Navigator.push(context, MaterialPageRoute(builder: (_) => Screen()))context.go('/route/${id}')GoRouter enables deep linking, typed params, and auth guards

Perceived Performance (Extended)

Flutter renders at 60fps on most devices, 120fps on ProMotion displays.

TechniquePerceptionImplementation
const constructorsWidgets that never change skip rebuild entirelyconst Text(...), const SizedBox(...)
RepaintBoundaryIsolates frequently-changing widgets (timers, animations)Wrap clock/progress bar in RepaintBoundary
Skeleton loadersShows structure immediately (feels faster than spinners)shimmer package with matching layout
itemExtent on listsEliminates jank from recalculating sizes during scrollListView.builder(itemExtent: 56.0)
AnimatedSwitcherFade transitions feel smoother than instant appear/disappearWrap changing content, set duration: 200ms
Hero animationsCreate continuity between screensHero(tag: 'avatar', child: ...) on source and destination
Pre-cache imagesEliminates flash-of-placeholder on revisitprecacheImage(NetworkImage(url), context) in initState

Rule: The user feels the slowest frame. Optimize for worst case, not average.

Sources

  • Flutter Documentation (flutter.dev)
  • Dart 3.7 Language Tour (dart.dev)
  • Riverpod Documentation (riverpod.dev)
  • GoRouter Documentation
  • Impeller Rendering Engine
  • Pigeon Plugin

Pre-Flight Checklist

Before submitting Flutter code:

  • All widgets use const constructors where possible (check with dart analyze)
  • Long lists use ListView.builder or SliverList.builder, never ListView(children: [...])
  • ref.watch only in build methods; ref.read only in callbacks
  • Routes use GoRouter typed parameters, not manual string parsing
  • AsyncValue has .when(data:, loading:, error:) — all three branches covered
  • Platform channels use Pigeon-generated code, never manual MethodChannel
  • android/app/build.gradle has renderingEngine = "impeller" (Android 14+)
  • No console.log or print() statements in production code
  • flutter analyze passes with zero errors or warnings
  • Tested on real Android device (not just iOS simulator or vice versa)
  • App works correctly when process is killed and restarted (state restoration)
  • Safe areas respected: MediaQuery.of(context).padding or SafeArea widget

Checklist

  • Skill loads without errors in the AI agent
  • YAML frontmatter is valid (description, compatibility, audience)
  • Workflow section provides clear step-by-step instructions
  • Error handling section covers common failure modes
  • All referenced files (references/, scripts/, assets/) exist
  • Skill triggers correctly for intended use cases
  • No broken links or missing resources

© EliasOulkadi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .pack/skills/flutter of EliasOulkadi/shokunin.

Open the folder on GitHubat commit 4c68e5b

Compare with similar skills

Flutter next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter this skillEliasOulkadi/shokunin114—~3.2kAutomated safety check: PassMIT
Flutter Appccplugins/awesome-claude-code-plugins970—~1.1kAutomated safety check: NotesApache-2.0
Mobile Developeraiskillstore/marketplace4337 repos~2.3kAutomated safety check: PassNone
Flutter SecurityHoangNguyen0403/agent-skills-standard572—~576Automated safety check: NotesMIT
Engine Whats Newflutter/flutter179k—~978Automated safety check: PassBSD-3-Clause
Flutter Cherry Pickflutter/flutter179k—~1.8kAutomated safety check: PassBSD-3-Clause

Similar skills

  • Flutter App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.

    970 GitHub stars~1.1k tokensUpdated 1 mo ago
    MobileAuto-check: notes
  • Mobile Developer

    aiskillstore/marketplace

    Develop React Native, Flutter, or native mobile apps with modern architecture patterns.

    433 GitHub starsUsed in 7 repos~2.3k tokens
    MobileAuto-check passed
  • Flutter Security

    HoangNguyen0403/agent-skills-standard

    Secure Flutter token/PII storage, build-time secrets, network trust, and release hardening using OWASP Mobile practices.

    572 GitHub stars~576 tokensUpdated today
    MobileAuto-check: notes
  • Engine Whats New

    flutter/flutter

    Generates the "what's new" release summary and diff file for changes in the Flutter engine (//engine/src/flutter) between two releases (e.g., 3.47 vs 3.44).

    179k GitHub stars~978 tokensUpdated today
    MobileAuto-check passed
  • Flutter Cherry Pick

    flutter/flutter

    How to land a formal cherry-pick of a merged PR for the flutter/flutter repo stable or beta channel.

    179k GitHub stars~1.8k tokensUpdated today
    MobileAuto-check passed
  • Upgrade Browser

    flutter/flutter

    Upgrade browser versions (Chrome or Firefox) in the Flutter Web Engine and/or Framework tests.

    179k GitHub stars~1.1k tokensUpdated today
    MobileAuto-check passed

More from EliasOulkadi/shokunin

All 49 skills in this repo
  • CI CD

    EliasOulkadi/shokunin

    Design CI/CD pipelines for GitHub Actions, GitLab CI, and CircleCI with matrix builds, test sharding, caching, Docker layer caching, OIDC auth, deployment strategies (rolling, blue-green, canary)…

    114 GitHub stars~3.4k tokensUpdated 5 days ago
    Auto-check: notes
  • Component Forge

    EliasOulkadi/shokunin

    Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…

    114 GitHub stars~3.6k tokensUpdated 5 days ago
    Auto-check: notes
  • DB Admin

    EliasOulkadi/shokunin

    PostgreSQL database administration — backup/restore (pgdump, PITR, WAL archiving), health monitoring (connections, bloat, cache hit ratio, dead tuples), connection pooling (PgBouncer), replication…

    114 GitHub stars~2k tokensUpdated 5 days ago
    Auto-check: notes
  • DB Sculptor

    EliasOulkadi/shokunin

    Design database schemas with Prisma/Drizzle, PostgreSQL index strategy (B-tree, GIN, GiST, BRIN, Hash), query optimization (EXPLAIN ANALYZE), migration safety (expand/contract, zero-downtime), and…

    114 GitHub stars~3.1k tokensUpdated 5 days ago
    Auto-check: notes
  • Docker

    EliasOulkadi/shokunin

    Optimize Docker images with multi-stage builds, distroless bases, BuildKit cache mounts, multi-arch builds, compose watch, security hardening (non-root, seccomp, capabilities drop), and…

    114 GitHub stars~3.8k tokensUpdated 5 days ago
    Auto-check: notes
  • Error Handler

    EliasOulkadi/shokunin

    Design error handling, structured logging, and observability with OpenTelemetry (traces, metrics, logs), error classification, recovery patterns (retry with jitter, circuit breaker, bulkhead…

    114 GitHub stars~3.6k tokensUpdated 5 days ago
    Auto-check: notes

Works with

Categories

Questions about Flutter

What does Flutter do?

Build production Flutter apps with Clean Architecture, Riverpod (preferred over Bloc/Provider), GoRouter navigation, Impeller rendering engine, Dart 3.7+ patterns, platform channels via Pigeon, and…. Flutter is an agent skill from EliasOulkadi/shokunin.7+ patterns, platform channels via Pigeon, and App Store/Play Store deployment.

When should I use Flutter?

Flutter fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve App store release.

How do I install Flutter in Claude Code?

Run `npx skills add EliasOulkadi/shokunin --skill flutter -a claude-code`. Or copy the skill folder (.pack/skills/flutter in EliasOulkadi/shokunin) into .claude/skills/flutter in your project. Claude Code loads it when a task matches its description.

How do I install Flutter in Codex?

Run `npx skills add EliasOulkadi/shokunin --skill flutter -a codex`. Or copy the skill folder (.pack/skills/flutter in EliasOulkadi/shokunin) into .agents/skills/flutter in your project. Codex loads it when a task matches its description.

Can I use Flutter in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add EliasOulkadi/shokunin --skill flutter -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter, .gemini/skills/flutter, .github/skills/flutter and .opencode/skills/flutter in your project.

What does Flutter need to run?

Going by SKILL.md and its folder, Flutter needs the command-line tools its instructions call (flutter and dart). Compatibility (from SKILL.md): opencode.

Does Flutter access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Flutter safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter use?

Flutter is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter?

Skills that share tags, products or a category with Flutter: Flutter App (ccplugins/awesome-claude-code-plugins, 970 stars), Mobile Developer (aiskillstore/marketplace, 433 stars), Flutter Security (HoangNguyen0403/agent-skills-standard, 572 stars) and Engine Whats New (flutter/flutter, 179k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter?

EliasOulkadi (a GitHub user) maintains it in EliasOulkadi/shokunin, which has 114 GitHub stars. The repository holds 49 skills in this directory. The repository was last updated on October 5, 2026.

Source: EliasOulkadi/shokunin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.