skills/xtone__ai_development_tools
1
0
Fork 0
mirror of https://github.com/xtone/ai_development_tools.git synced 2026-09-14 20:07:12 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
xtone__ai_development_tools/flutter_development
T
History

README.md

Flutter Development Tools

Flutter開発向けの包括的なツール群です。Widget実装の設計判断から画面定義書の作成、Golden Testまで、Flutter開発をサポートします。

含まれるスキル

1. flutter-widget-assistant

Flutter Widget実装のためのインタラクティブなアシスタントです。構造化された質問を通じて、最適なWidgetアーキテクチャを決定します。

主な機能:

  • 状態管理の必要性を判断（StatefulWidget vs StatelessWidget）
  • Widget種別の決定（Screen vs Component）
  • 状態共有の判断（Riverpod使用 vs 不使用）
  • 構造化された実装仕様書の生成
  • Flutter/AutoRoute/Riverpod のベストプラクティスに基づいた設計支援

詳細: skills/flutter-widget-assistant/README.md

2. screen-spec-generator

Flutterプロジェクトの画面定義書を作成・管理するスキルです。プロジェクト構造を自動解析し、会話形式でテンプレートをカスタマイズします。

主な機能:

  • プロジェクト構造の自動解析（CLAUDE.md対応）
  • セクション選択による柔軟なテンプレート作成
  • カスタムコマンド（/screen-spec）の自動生成
  • 個別画面の定義書自動生成
  • 既存定義書の差分検出と更新

詳細: skills/screen-spec-generator/README.md

3. flutter-golden-test

Golden Test（Visual Regression Test）環境のセットアップとテスト生成を対話形式で行うスキルです。Flutter初心者でもGolden Test環境を構築できます。

主な機能:

  • Golden Test環境の初期セットアップ（flutter_test_config.dart、ヘルパー生成）
  • コンポーネント/画面のGolden Testコード生成
  • 日本語フォント対応
  • Riverpod対応（ProviderScopeラップ）
  • レスポンシブテスト（複数画面サイズ）
  • トラブルシューティング支援

詳細: skills/flutter-golden-test/README.md

技術スタック

生成される実装は、以下の技術スタックを前提としています：

項目 技術
フレームワーク Flutter
ナビゲーション AutoRoute
状態管理 Riverpod（オプション）
フック flutter_hooks（オプション）
アーキテクチャ MVVM（画面レベル）

使い方

基本的なワークフロー

graph LR
    A[Widget要件] -->|flutter-widget-assistant| B[インタビュー]
    B --> C[実装仕様書]
    C --> D[Widget実装]
    D -->|screen-spec-generator| E[画面定義書]
    D -->|flutter-golden-test| F[Golden Test]

使用例

flutter-widget-assistant

# Claude Codeで以下を実行
/skill flutter-widget-assistant

# または直接説明と共に
"ログイン画面を実装したいです。設計を手伝ってください。"

screen-spec-generator

# 初期セットアップ
"画面定義書を作成したい"

# 画面定義書の生成（セットアップ後）
/screen-spec lib/ui/mypage/widgets/mypage_page.dart

flutter-golden-test

# 初期セットアップ
"Golden Testを導入したい"

# テスト生成
"PrimaryButtonのGolden Testを書いて"

# テスト実行
flutter test --update-goldens test/ui/components/primary_button_golden_test.dart

ディレクトリ構造

flutter_development/
├── .claude-plugin/
│   ├── marketplace.json          # スキル登録情報
│   └── plugin.json
├── skills/
│   ├── flutter-widget-assistant/ # Widget設計支援スキル
│   │   ├── SKILL.md
│   │   └── README.md
│   ├── screen-spec-generator/    # 画面定義書生成スキル
│   │   ├── SKILL.md
│   │   ├── README.md
│   │   └── templates/
│   └── flutter-golden-test/      # Golden Testスキル
│       ├── SKILL.md
│       ├── README.md
│       ├── knowledge/            # 基礎知識・トラブルシューティング
│       └── templates/            # テストテンプレート
└── README.md                     # このファイル

インストール方法

Claude Code Marketplaceから（推奨）

  1. マーケットプレイスにこのリポジトリを追加:
/plugin marketplace add xtone/ai_development_tools
  1. プラグインをインストール:
/plugin install flutter-development@xtone-ai-development-tools

手動インストール

  1. このリポジトリをクローン:
git clone https://github.com/xtone/ai_development_tools.git
  1. プラグインディレクトリをClaude Codeの設定ディレクトリにコピー:
cp -r ai_development_tools/flutter_development ~/.claude/plugins/

必要な環境

  • Claude Code 0.1.0 以上
  • Flutter SDK 3.0.0 以上（プロジェクトで使用する場合）

トラブルシューティング

Skillが認識されない

プラグインが正しくインストールされているか確認してください:

/plugin list

作成者

HINO, Yasushi

バージョン履歴

v0.3.0 (2026-02-06)

  • flutter-golden-test スキルを追加
  • Golden Test環境のセットアップとテスト生成機能を追加

v0.2.0 (2026-02-06)

  • screen-spec-generator スキルを統合
  • 画面定義書の作成・管理機能を追加

v0.1.0 (2025-11-11)

  • 初期リリース
  • flutter-widget-assistant スキルの実装

ライセンス

MIT License

参考リンク

Reference in New Issue View Git Blame Copy Permalink