Skip to content
Development
Skill

/flutter-idiomatic-flutter

Compose modern Flutter layouts and widgets idiomatically. Use for widget trees, layout constraints, mounted safety, and UI composition—not BLoC state management, routing, dependency injection, or tests.

From plugin
agent-skills-standard
538200 skills1 MCP
Install
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill flutter-idiomatic-flutter --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/flutter-idiomatic-flutter

Context preview

The summary Claude sees to decide when to auto-load this skill.

Compose modern Flutter layouts and widgets idiomatically. Use for widget trees, layout constraints, mounted safety, and UI composition—not BLoC state management, routing, dependency injection, or tests.

SKILL.md

flutter-idiomatic-flutter.SKILL.md
name: flutter-idiomatic-flutter
description: Compose modern Flutter layouts and widgets idiomatically. Use for widget trees, layout constraints, mounted safety, and UI composition—not BLoC state management, routing, dependency injection, or tests.
metadata:
  triggers:
    files:
    - 'lib/presentation/**/*.dart'
    - 'context.mounted'
    keywords:
    - SizedBox
    - Gap
    - composition
    - shrink

Idiomatic Flutter

**Priority: P1 (HIGH)**

  • **Async Gaps**: Check `if (context.mounted)` before using `BuildContext` after `await`.
  • **Composition**: Extract complex UI into small widgets. Avoid deep nesting or large helper methods.
  • **Layout**:
  • Spacing: Prefer `spacing` parameter on `Row`/`Column` (Flutter 3.27+) over inserting `SizedBox`/`Gap` between children. On earlier Flutter versions, use `Gap(n)` instead — `spacing` will not compile.
  • Fallback: Use `Gap(n)` or `SizedBox` only when `spacing` cannot express the layout (e.g., conditional gaps).
  • Empty UI: Use `const SizedBox.shrink()`.
  • Intrinsic: Avoid `IntrinsicWidth/Height`; use `Stack` + `FractionallySizedBox` for overlays.
  • Spacing: Use `Gap(n)` or `SizedBox` over `Padding` for simple gaps.
  • Optimization: Use `ColoredBox`/`Padding`/`DecoratedBox` instead of `Container` when possible.
  • Themes: Use extensions for `Theme.of(context)` access.

Anti-Patterns

  • **No BuildContext after await without mounted check**: Check `context.mounted` to prevent crashes across async gaps.
  • **No _buildXxx() helper methods**: Extract to `const StatelessWidget` for proper rebuild control.
  • **No direct controller access in widget**: Use BLoC or Riverpod to decouple UI from state.
  • **No Container for empty space**: Use `const SizedBox.shrink()`.
Read more
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin

Other skills on agent-skills-standard.