Skip to content

Guide · Agent skill

How to use the Dart and Flutter Patterns agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The dart-flutter-patterns skill is a set of Dart and Flutter coding conventions that an AI agent follows when it writes or reviews Flutter code. It covers null safety, immutable state, async handling, widget structure, state managers (BLoC, Riverpod, Provider), GoRouter navigation with login redirects, Dio networking with token refresh, error handling and testing. This guide explains what the skill does, how to install it, how to trigger it and what to check before using its code.

Dart and Flutter Patternsaffaan-m/ECC · MIT

Quick start

  1. 1Download the ZIP. Download the dart-flutter-patterns ZIP from this page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder for one project.
  3. 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
  4. 4Add the packages you need. Install the Flutter packages your chosen patterns use, such as flutter_bloc, riverpod, go_router, dio and freezed, in your own project.
  5. 5Ask with a natural request. Describe the Flutter task and name the area, such as state management, navigation or networking.
  6. 6Review the output. Check null safety, auth logic and package versions in the generated code before you run it against real data.

What the skill makes the agent do

When the skill is installed, the agent is told to follow established Dart and Flutter patterns when writing or reviewing Flutter apps. The patterns are organised by concern and are provided as copy-paste code snippets.

The skill is written in Japanese. Its topics are: null safety (avoiding `!`, preferring `?.`, `??` and pattern matching), immutable state (sealed classes, freezed, copyWith), async composition (Future.wait, safe BuildContext after await), widget structure (extracting classes rather than methods, const propagation, scoped rebuilds), BLoC/Cubit and Riverpod state, GoRouter with a reactive auth guard, Dio with interceptors, error handling with global capture and ErrorWidget.builder, and testing with bloc_test, ProviderScope overrides and fakes.

Install the skill

Option 1: download the ZIP from this page and unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder so that only that project uses it.

Option 2: in the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP there.

  • The skill package contains one file: SKILL.md.
  • Check that the folder name and the skill name in SKILL.md are dart-flutter-patterns.

Trigger the skill with natural requests

You do not need a special command. Describe the Flutter task in plain language and mention the area you care about. The skill's own description says it applies when you start a new Flutter feature that needs state, navigation or data-access patterns, when you review Dart code, when you set up a project and must choose between BLoC, Riverpod or Provider, and when you wire GoRouter with auth guards.

  • "Set up BLoC for the login screen of my Flutter app and show the states as a sealed class."
  • "Review this Dart code for null-safety problems and risky use of !."
  • "Add GoRouter to my app and redirect to /login when the user is not signed in."
  • "Write a Dio client with an interceptor that refreshes the token once and then retries."
  • "Write bloc_test unit tests for my CartCubit."

Example: what the skill's code looks like

The skill includes snippets such as a sealed async state and a GoRouter setup that redirects to /login when the AuthCubit state is not AuthAuthenticated. The snippet uses refreshListenable so the router re-checks the redirect when the auth stream changes. Read the snippet as a pattern: your app must supply its own AuthCubit, routes and state classes.

sealed class AsyncState<T> {} final class Loading<T> extends AsyncState<T> {} final class Success<T> extends AsyncState<T> { final T data; const Success(this.data); } final class Failure<T> extends AsyncState<T> { final Object error; const Failure(this.error); }

What you need before using it

The skill does not install anything. It needs a Dart or Flutter development environment and the packages its patterns reference, such as flutter_bloc, riverpod, go_router, dio and freezed. You add those to your project yourself. The skill runs no scripts and makes no network calls.

The guidance assumes you already know Dart and Flutter. If you are new to Flutter, read the official documentation first, then use the skill to check your code against established conventions.

Safety notes: scripts and network

According to the skill's listing, it runs no scripts and uses no network. It is a single SKILL.md instruction file. Because it only shapes what the agent writes, the code it produces is still your responsibility: review it before it touches real user data, authentication or payments, and never paste secrets such as tokens or API keys into prompts or code.

  • Review generated auth and token-refresh code carefully before deploying it.
  • Confirm package versions in your own pubspec file rather than trusting version numbers in generated snippets.

Tips for better results

Name your state manager in the request. If you have not chosen one, ask the agent to compare BLoC, Riverpod and Provider for your situation. If your project already uses a different architecture, say so, because these patterns can conflict with existing conventions and produce inconsistent code.

  • Give the agent your existing folder structure and pubspec.yaml so it matches your packages.
  • Ask for tests alongside new features to exercise the BLoC, widget and provider patterns.
  • Because the source is in Japanese, you may get better results asking in English for explanations and keeping comments as you prefer.

What people use it for

  • Starting a new Flutter feature with a consistent BLoC or Riverpod structure.
  • Choosing between BLoC, Riverpod and Provider for a new Flutter project.
  • Adding GoRouter navigation with a login redirect.
  • Setting up a Dio client with interceptors and token refresh.
  • Writing unit tests for Cubits and widget tests with provider overrides.
  • Reviewing existing Dart code for null-safety and async pitfalls.

Frequently asked questions

How do I install the dart-flutter-patterns skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. Alternatively, in the Claude apps, go to Settings, then Capabilities, then Skills, and upload the ZIP.

What do I need to use this skill?

You need a Dart or Flutter development environment and the packages the patterns reference, such as flutter_bloc, riverpod, go_router, dio and freezed. The skill does not install these packages for you.

Is the dart-flutter-patterns skill free?

The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms before you reuse or redistribute it.

Does the skill run code or access the internet?

According to its listing, the skill runs no scripts and uses no network. It is a single SKILL.md file that guides how the agent writes Flutter code.

Is this skill better than BLoC, Riverpod or Provider on their own?

The skill does not replace those libraries. It gives the agent conventions for using them, including which pattern to follow. The state manager itself is still your choice, and the skill lists BLoC, Riverpod and Provider as options.

Why is the skill in Japanese and does it work for English projects?

The SKILL.md text is written in Japanese, but the Dart and Flutter code patterns are standard. You can ask the agent for English explanations in your requests and get English-language answers.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you already know Flutter and want the agent to follow consistent conventions for state management, navigation, networking and tests. Pick something else if you are not building a Flutter app, if you are new to Dart and need a guided course, or if your project already follows a different architecture that these patterns would conflict with.

Download the skill