Agent skill

Flutter Patterns

by softspark in softspark/ai-toolkit

Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels.

Apache-2.0Auto-check passedMobile

Install Flutter Patterns

skills CLI
$ npx skills add softspark/ai-toolkit --skill flutter-patterns -a claude-code

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

GitHub CLI
$ gh skill install softspark/ai-toolkit flutter-patterns --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/softspark/ai-toolkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/app/skills/flutter-patterns .claude/skills/flutter-patterns && 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-patterns
GitHub stars
179
Token cost
~1.2k tokens
SKILL.md length
63 words
Files
1
Skills in repo
112
Repo updated
First seen
Licence
Apache-2.0

At a glance

Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels.

  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Project Structure, State Management, Navigation (GoRouter) and Widget Patterns, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flutter Patterns is an agent skill from softspark/ai-toolkit. Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels. Triggers: Flutter, Dart, widget, Riverpod, Bloc, pubspec, hot reload.

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

It sits in Mobile, covering Cross-platform mobile apps. It works with Flutter and Dart. The repository describes itself as: Professional-grade AI coding toolkit: 94 skills, 44 agents, multi-platform (Claude, Cursor, Windsurf, Copilot, Gemini, Cline, Roo Code, Aider, Augment, Antigravity, Codex CLI… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps

Example prompts

  • “/flutter-patterns”

Requirements

  • Pre-approved tools (allowed-tools): Read

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are 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.

Context cost

Flutter Patterns loads about 1.2k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 63 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~1.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 softspark/ai-toolkit at commit d64db2b, republished under its Apache-2.0 licence (© softspark). 63 words, ~1,201 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-patterns/SKILL.md (or your agent's skills folder).
name
flutter-patterns
description
Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels. Triggers: Flutter, Dart, widget, Riverpod, Bloc, pubspec, hot reload.
allowed-tools
Read
effort
medium
user-invocable
false

Flutter Patterns Skill

Project Structure

lib/
├── main.dart
├── app.dart
├── core/
│   ├── constants/
│   ├── errors/
│   ├── network/
│   └── utils/
├── features/
│   └── feature_name/
│       ├── data/
│       │   ├── models/
│       │   ├── repositories/
│       │   └── sources/
│       ├── domain/
│       │   ├── entities/
│       │   └── usecases/
│       └── presentation/
│           ├── bloc/
│           ├── pages/
│           └── widgets/
└── shared/
    ├── widgets/
    └── theme/

State Management

BLoC Pattern
dart
// Event
abstract class AuthEvent {}
class LoginRequested extends AuthEvent {
  final String email;
  final String password;
  LoginRequested(this.email, this.password);
}

// State
abstract class AuthState {}
class AuthInitial extends AuthState {}
class AuthLoading extends AuthState {}
class AuthSuccess extends AuthState {
  final User user;
  AuthSuccess(this.user);
}
class AuthFailure extends AuthState {
  final String message;
  AuthFailure(this.message);
}

// BLoC
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    on<LoginRequested>(_onLoginRequested);
  }

  Future<void> _onLoginRequested(
    LoginRequested event,
    Emitter<AuthState> emit,
  ) async {
    emit(AuthLoading());
    try {
      final user = await authRepository.login(event.email, event.password);
      emit(AuthSuccess(user));
    } catch (e) {
      emit(AuthFailure(e.toString()));
    }
  }
}
Riverpod
dart
final userProvider = FutureProvider<User>((ref) async {
  final repository = ref.watch(userRepositoryProvider);
  return repository.getUser();
});

// Usage
Consumer(
  builder: (context, ref, child) {
    final userAsync = ref.watch(userProvider);
    return userAsync.when(
      data: (user) => Text(user.name),
      loading: () => CircularProgressIndicator(),
      error: (e, s) => Text('Error: $e'),
    );
  },
)

Navigation (GoRouter)

dart
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
      routes: [
        GoRoute(
          path: 'details/:id',
          builder: (context, state) => DetailsScreen(
            id: state.pathParameters['id']!,
          ),
        ),
      ],
    ),
  ],
);

// Navigation
context.go('/details/123');
context.push('/details/123');
context.pop();

Widget Patterns

Responsive Layout
dart
class ResponsiveLayout extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget desktop;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return mobile;
        } else if (constraints.maxWidth < 1200) {
          return tablet ?? desktop;
        }
        return desktop;
      },
    );
  }
}
Sliver Patterns
dart
CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      title: Text('Title'),
    ),
    SliverPadding(
      padding: EdgeInsets.all(16),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(title: Text('Item $index')),
          childCount: 100,
        ),
      ),
    ),
  ],
)

Performance

const Constructors
dart
// Good
const Text('Hello');
const SizedBox(height: 8);

// Widget with const constructor
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
}
RepaintBoundary
dart
RepaintBoundary(
  child: ComplexAnimatedWidget(),
)
Image Optimization
dart
Image.network(
  url,
  cacheWidth: 200,  // Resize in memory
  cacheHeight: 200,
)

Testing

Widget Testing
dart
testWidgets('Counter increments', (tester) async {
  await tester.pumpWidget(MyApp());

  expect(find.text('0'), findsOneWidget);

  await tester.tap(find.byIcon(Icons.add));
  await tester.pump();

  expect(find.text('1'), findsOneWidget);
});
BLoC Testing
dart
blocTest<AuthBloc, AuthState>(
  'emits [loading, success] when login succeeds',
  build: () => AuthBloc(),
  act: (bloc) => bloc.add(LoginRequested('email', 'pass')),
  expect: () => [AuthLoading(), isA<AuthSuccess>()],
);

Best Practices

  • ✅ Use const constructors
  • ✅ Extract widgets to separate files
  • ✅ Use named routes
  • ✅ Implement proper error handling
  • ✅ Use proper state management
  • ❌ Avoid setState for complex state
  • ❌ Don't nest too many widgets
  • ❌ Avoid magic numbers

© softspark, Apache-2.0. 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 app/skills/flutter-patterns of softspark/ai-toolkit.

Open the folder on GitHubat commit d64db2b

Compare with similar skills

Flutter Patterns 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 Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Patterns this skillsoftspark/ai-toolkit179—~1.2kAutomated safety check: PassApache-2.0
Engine Whats Newflutter/flutter179k—~978Automated safety check: PassBSD-3-Clause
Flutter Cherry Pickflutter/flutter179k—~1.8kAutomated safety check: PassBSD-3-Clause
Upgrade Browserflutter/flutter179k—~1.1kAutomated safety check: PassBSD-3-Clause
Bump Dartflutter/flutter179k—~1.2kAutomated safety check: PassBSD-3-Clause
Run Devicelab With Ledflutter/flutter179k—~786Automated safety check: PassBSD-3-Clause

Similar skills

  • 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
  • Bump Dart

    flutter/flutter

    Do not trigger automatically; only run when a user runs /bump-dart.

    179k GitHub stars~1.2k tokensUpdated today
    MobileAuto-check passed
  • Run Devicelab With Led

    flutter/flutter

    Run DeviceLab tests for Flutter PRs using LUCI's led CLI tool.

    179k GitHub stars~786 tokensUpdated today
    MobileAuto-check passed
  • Shepherd PRs

    flutter/flutter

    Automate shepherding, checking status, updating branches, and landing open PRs or approved third-party contributor PRs in the flutter/flutter repository using the gh CLI.

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

More from softspark/ai-toolkit

All 112 skills in this repo
  • Prepare Test Env

    softspark/ai-toolkit

    Prepare or verify a project QA environment with source identity, readiness, browser access, evidence paths and owned cleanup.

    179 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check: notes
  • A11y Validate

    softspark/ai-toolkit

    Accessibility validator: WCAG 2.1 AA, EN 301 549, EAA. An agent skill from softspark/ai-toolkit.

    179 GitHub stars~3.8k tokensUpdated yesterday
    Auto-check: notes
  • Analyze

    softspark/ai-toolkit

    Analyzes code quality, complexity, patterns across codebase.

    179 GitHub stars~1k tokensUpdated yesterday
    Auto-check passed
  • Autonomous Dev

    softspark/ai-toolkit

    Drives a brief, specification, issue or existing PR through implementation, review, tests and QA to a ready PR.

    179 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check: notes
  • Brand Voice

    softspark/ai-toolkit

    Direct technical voice for docs, README, user-facing text. An agent skill from softspark/ai-toolkit.

    179 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed
  • CI

    softspark/ai-toolkit

    Detect/generate/debug CI pipeline config (GitHub Actions, GitLab CI).

    179 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check: notes

Works with

Categories

Questions about Flutter Patterns

What does Flutter Patterns do?

Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels. Flutter Patterns is an agent skill from softspark/ai-toolkit. Flutter/Dart: widgets, state mgmt (Riverpod/Bloc), navigation, platform channels.

When should I use Flutter Patterns?

Flutter Patterns fits situations like: tasks that involve Cross-platform mobile apps.

How do I install Flutter Patterns in Claude Code?

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

How do I install Flutter Patterns in Codex?

Run `npx skills add softspark/ai-toolkit --skill flutter-patterns -a codex`. Or copy the skill folder (app/skills/flutter-patterns in softspark/ai-toolkit) into .agents/skills/flutter-patterns in your project. Codex loads it when a task matches its description.

Can I use Flutter Patterns 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 softspark/ai-toolkit --skill flutter-patterns -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-patterns, .gemini/skills/flutter-patterns, .github/skills/flutter-patterns and .opencode/skills/flutter-patterns in your project.

What does Flutter Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter Patterns is instructions for the agent only. Its frontmatter pre-approves these tools: Read.

Does Flutter Patterns 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 Patterns 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 Patterns use?

Flutter Patterns is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter Patterns use?

About 1.2k tokens (SKILL.md is roughly 4.8k 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 Patterns?

Skills that share tags, products or a category with Flutter Patterns: Engine Whats New (flutter/flutter, 179k stars), Flutter Cherry Pick (flutter/flutter, 179k stars), Upgrade Browser (flutter/flutter, 179k stars) and Bump Dart (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 Patterns?

softspark (a GitHub user) maintains it in softspark/ai-toolkit, which has 179 GitHub stars. The repository holds 112 skills in this directory. The repository was last updated on October 7, 2026.

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