mcpField
F
flutter-patterns

flutter-patterns

github.com/cleydson開発53126 回インストール34 週間前に更新
リポジトリ

flutter-patterns について

Flutterアプリ開発者向けのリファレンススキルで、UI、テスト、パフォーマンス、セキュリティ、アニメーションのパターンを扱います。開発タスク別に例とチェックリストをまとめています。

主な機能

  1. 01ウィジェットとレイアウトのパターン
  2. 02単体・ウィジェット・統合テスト
  3. 03パフォーマンス最適化チェックリスト
  4. 04セキュリティとデータ保護のパターン
  5. 05アニメーションと画面遷移の例

活用シーン

  1. 01フォームやナビゲーションの実装
  2. 02Flutterのテスト範囲の計画
  3. 03リストや描画の遅さの調査
  4. 04安全な保存と入力検証の適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cleydson/flutter-claude-code --skill flutter-patterns

インストール後、Claude Code で/flutter-patternsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

patterns/
flutter-animation-patterns.md
flutter-performance-checklist.md
flutter-security-patterns.md
flutter-testing-patterns.md
flutter-widget-patterns.md

詳細

Flutter パターン

本番品質のアプリケーションを構築するための、実戦で検証された Flutter パターンとベストプラクティスを包括的にまとめています。

概要

このスキルでは、すぐに参照できるパターンを提供します。

  • ウィジェットパターン：一般的な UI コンポーネント（カード、リスト、フォーム、ダイアログ、ナビゲーション）
  • テストパターン：ユニットテスト、ウィジェットテスト、統合テストのアプローチ
  • パフォーマンスパターン：最適化手法とパフォーマンスチェックリスト
  • セキュリティパターン：セキュリティのベストプラクティスと脆弱性の防止
  • アニメーションパターン：一般的なアニメーションの実装とトランジション

このスキルを使う場面

次のような場合に、このスキルを使用してください。

  • 標準的な Flutter UI パターンをすぐに確認したい
  • テスト戦略のガイダンスや例が必要
  • パフォーマンス最適化のチェックリストが必要
  • セキュリティ脆弱性を防ぎたい
  • アニメーションの実装例が必要
  • 一般的な Flutter 開発シナリオのベストプラクティスを知りたい

パターンのカテゴリ

ウィジェットパターン

patterns/flutter-widget-patterns.md では、次の内容を確認できます。

  • カードパターン（基本、画像、カスタム）
  • リストパターン（遅延読み込み、セクション分け）
  • バリデーション付きフォームパターン
  • ダイアログとボトムシートのパターン
  • 読み込み状態と空状態
  • ナビゲーションパターン
  • Material 3 ウィジェット（SearchAnchor、SegmentedButton、NavigationBar、DropdownMenu）
  • DecoratedSliver パターン
  • レスポンシブレイアウト（Material 3 の WindowSizeClass ブレークポイントを使用）
テストパターン

patterns/flutter-testing-patterns.md では、次の内容を確認できます。

  • ユニットテストの構成とベストプラクティス
  • ウィジェットテストのアプローチ
  • 統合テストのパターン
  • モックとスタブの戦略（Mockito と Mocktail）
  • bloc_test を使用した BLoC のテスト
  • Riverpod のテストパターン
  • ネイティブ操作に対する Patrol テスト
  • ゴールデンテストのパターン
  • テストの整理と命名規則
  • カバレッジのベストプラクティス
パフォーマンスパターン

patterns/flutter-performance-checklist.md では、次の内容を確認できます。

  • Impeller レンダリングエンジンに関する考慮事項
  • build メソッドの最適化
  • ウィジェットの再ビルドの最小化
  • リストとグリッドのパフォーマンス
  • 画像読み込みの最適化（WebP/AVIF、キャッシュ）
  • メモリリークの防止
  • バックグラウンド計算に対する Isolate.run()
  • レンダリングパフォーマンスのヒント
  • シェーダーのコンパイル（Impeller によって解決）
セキュリティパターン

patterns/flutter-security-patterns.md では、次の内容を確認できます。

  • 入力の検証とサニタイズ
  • セキュアストレージの実践（flutter_secure_storage）
  • API セキュリティと証明書ピンニング（Dio 5.x）
  • 認証と認可のパターン
  • 生体認証（Face ID、指紋認証）
  • iOS プライバシーマニフェスト（iOS 17 以降必須）
  • データ暗号化の手法
  • 一般的な脆弱性の防止（XSS、インジェクションなど）
アニメーションパターン

patterns/flutter-animation-patterns.md では、次の内容を確認できます。

  • 基本的なアニメーションコントローラー
  • Tween アニメーション
  • Hero アニメーション
  • ページトランジション
  • 暗黙的アニメーション
  • Material 3 のモーションパターン（共有軸、コンテナ変換）
  • Impeller のアニメーションパフォーマンスに関する注意事項
  • カスタムアニメーションパターン

使用例

例 1：カード UI のパターンが必要な場合

User: "I need to create a product card with an image and details"
→ Reference Widget Patterns for image card implementation

例 2：テストを書く場合

User: "How should I structure my widget tests?"
→ Reference Testing Patterns for widget test examples

例 3：パフォーマンスの問題

User: "My list is laggy when scrolling"
→ Reference Performance Patterns for list optimization techniques

例 4：セキュリティ上の懸念

User: "How do I securely store user credentials?"
→ Reference Security Patterns for secure storage approaches

例 5：アニメーションを追加する場合

User: "I want to animate a page transition"
→ Reference Animation Patterns for page transition examples

パターンの品質

このスキルのすべてのパターンは、次の条件を満たしています。

  • ✓ 本番環境でテスト済みで、実績があります
  • ✓ Flutter のベストプラクティスに準拠しています
  • ✓ パフォーマンスが最適化されています
  • ✓ セキュリティに配慮しています
  • ✓ コード例を含む、充実したドキュメントがあります

クイックアクセス

パターンをすばやく参照できるよう、各カテゴリのファイルは次の内容を含む自己完結型になっています。

  • 完全で実行可能なコード例
  • 各パターンを使用するタイミングの説明
  • よくある落とし穴とその回避方法
  • パフォーマンスとセキュリティに関する考慮事項

プロのヒント：さまざまなカテゴリのパターンを組み合わせると、包括的なソリューションを実現できます。たとえば、本番環境向けの機能を構築する際に、ウィジェットパターン、パフォーマンスパターン、セキュリティパターンを組み合わせて使用します。

コメント

Markdown 対応