Flutter Skill

🚀 flutter-skill

flutter-skill は、実行中のアプリ内でAIエージェントに目と手を与えることができるツールです。10のプラットフォームに対応し、テストコードを一切書かずに、1つのMCPサーバーで動作します。

🚀 クイックスタート

1. インストール (30秒)

npm install -g flutter-skill

2. AIに追加 (MCP設定にコピー&ペースト)

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

これは、Claude Desktop、Cursor、Windsurf、Copilot、Cline、OpenClaw など、MCP互換のエージェントで動作します。

3. アプリに追加 (Flutterの場合は2行)

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

4. テスト — AIに話しかけるだけ

"アプリを起動し、すべての画面を探索し、バグを報告してください"

以上です。ゼロ設定、ゼロテストコードで、60秒以内に動作します。

✨ 主な機能

• 🔌 任意のAIエージェント（Claude、Cursor、Windsurf、Copilot、OpenClawなど）をMCPを介して実行中のアプリに直接接続します。
• 👀 エージェントは画面を見ることができ、ボタンをタップしたり、テキストを入力したり、スクロールしたり、ナビゲートしたりすることができます。
• ✅ テストコードが不要で、Page ObjectsやXPath、脆弱なセレクターを使用する必要がありません。単純な英語で指示を与えるだけです。
• ⚡ ゼロ設定で、2行のコードで10のプラットフォームすべてで動作します。

📦 インストール

上記のクイックスタートで説明した通り、インストール方法は以下の通りです。

npmを使用したインストール

npm install -g flutter-skill

その他のインストール方法

💻 使用例

基本的な使用法

# アプリを探索する
flutter-skill explore https://my-app.com --depth=3

# モンキーテスト/ファズテスト
flutter-skill monkey https://my-app.com --actions=100 --seed=42

# 並列マルチプラットフォームテスト
flutter-skill test --url https://my-app.com --platforms web,electron,android

# ゼロ設定のWebMCPサーバー
flutter-skill serve https://my-app.com

📚 ドキュメント

AIプラットフォームとの連携

MCPサーバーモード (IDE統合)

任意のMCP互換のAIツールで動作します。設定は1行です。

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

HTTPサーバーモード (CLIと自動化)

スタンドアロンのブラウザ自動化、CI/CDパイプライン、またはリモートアクセスに適しています。

# サーバーを起動する
flutter-skill serve https://your-app.com

# CLIクライアントコマンドを使用する
flutter-skill nav https://google.com
flutter-skill snap                    # アクセシビリティツリー (トークンを99%削減)
flutter-skill screenshot /tmp/ss.jpg
flutter-skill tap "Login"
flutter-skill type "hello@example.com"
flutter-skill eval "document.title"
flutter-skill tools                   # 利用可能なすべてのツールをリストする

--port=N、--host=H フラグと FS_PORT/FS_HOST 環境変数をサポートしています。

2つのモードの比較

完全なCLIクライアントリファレンス: docs/CLI_CLIENT.md

10のプラットフォーム、1つのツール

ほとんどのテストツールは1～2つのプラットフォームで動作しますが、flutter-skillは10のプラットフォームで動作します。

合計: 656/664のテストがパス (98.8%) — 各プラットフォームは、50以上の要素を持つ複雑なソーシャルメディアアプリでテストされています。

パフォーマンス

複雑なソーシャルメディアアプリに対する自動テスト実行の実際のベンチマーク:

トークン効率: snapshot() は画像ではなく構造化された要素ツリーを返すため、AIエージェントにスクリーンショットを送信する場合と比較して、87–99%少ないトークン です。

これはどれくらい速いですか？ tap 操作はエンドツーエンドで1～2 msかかります。PlaywrightやSeleniumなどのブラウザ自動化ツールは、同じ操作に通常50～100 msかかります。つまり、flutter-skillはWebDriverやCDPの間接的な処理を介さずにアプリのランタイムに直接アクセスするため、50～100倍速いです。

重いDOMサイト (実際の世界)

15のMCPツールを本番ウェブサイトでテストしました — 75/75がパスし、タイムアウトはゼロでした:

合計時間にはページの読み込み時間が含まれています。重いDOMサイトでもツールの実行時間は一貫して100 ms未満です。

Playwright / Appium / Detoxとの比較

flutter-skillは、モバイル、ウェブ、デスクトップを横断して動作する唯一のAIネイティブのE2Eテストツールで、最も近い競合他社よりも7倍以上のツールを備えています。

AIネイティブ: 95%少ないトークン

ほとんどのAIテストツールはLLMにスクリーンショットを送信しますが、1枚あたり約4,000トークンかかります。

flutter-skillはChromeのアクセシビリティツリーを使用して、AIにページのコンパクトなセマンティックな要約を提供します。

// page_summary → ~200トークン (スクリーンショットの場合は~4,000トークン)
{
  "title": "ショッピングカート",
  "nav": ["ホーム", "商品", "カート", "アカウント"],
  "forms": [{"input:クーポンコード": "text"}],
  "buttons": ["適用する", "レジに進む", "買い物を続ける"],
  "features": {"検索": true, "ページネーション": true},
  "links": 47, "inputs": 3
}

そして、1回の呼び出しで複数のアクションをバッチ処理します。

// explore_actions → 1回の呼び出しで5つのアクション (5回の別々のツール呼び出しと比較)
{"actions": [
  {"type": "fill", "target": "input:クーポンコード", "value": "SAVE20"},
  {"type": "tap", "target": "button:適用する"},
  {"type": "tap", "target": "button:レジに進む"},
  {"type": "fill", "target": "input:メールアドレス", "value": "test@example.com"},
  {"type": "tap", "target": "button:続ける"}
]}

結果: AIエージェントは、スクリーンショットベースのツールよりも高速にテストを実行し、コストを削減し、ページをよりよく理解することができます。

できること

プラットフォームのセットアップ

dependencies:
  flutter_skill: ^0.9.7

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

npm install flutter-skill-react-native

import FlutterSkill from 'flutter-skill-react-native';
FlutterSkill.start();

npm install flutter-skill-electron

const { FlutterSkillBridge } = require('flutter-skill-electron');
FlutterSkillBridge.start(mainWindow);

// Swift Package Manager: FlutterSkillSDK
import FlutterSkill
FlutterSkillBridge.shared.start()

Text("Hello").flutterSkillId("greeting")

implementation("com.flutterskill:flutter-skill:0.8.0")

FlutterSkillBridge.start(this)

[dependencies]
flutter-skill-tauri = "0.8.0"

サンプルプロンプト

AIにテスト内容を指示するだけです。

📄 ライセンス

MIT License © 2025

🔗 リンク

⭐ flutter-skillがあなたの時間を節約してくれたら、スターをつけて他の人にも見つけやすくしましょう！