name: preview-slides description: スライドのプレビュー・確認。「プレビュー」「スライド確認」「スクリーンショット」「全スライド確認」などで発動。 allowed-tools: Read, Glob, Bash(lsof:*), mcp__marionette__connect, mcp__marionette__take_screenshots, mcp__marionette__get_interactive_elements, mcp__marionette__tap, mcp__marionette__hot_reload, mcp__marionette__disconnect
Preview Slides Skill
Marionette MCPを使用して、実行中のFlutterアプリのスライドをプレビュー・確認するスキル。
作業フロー
1. 接続
起動中のFlutterアプリに接続する。
# ポート番号を確認
lsof -i -P -n | grep flutter_d | grep LISTEN
ポートが見つかったら mcp__marionette__connect で接続。
見つからない場合はユーザーにアプリの起動を依頼する。
2. 現在のスライドをプレビュー
mcp__marionette__take_screenshots でスクリーンショットを取得。
3. スライドナビゲーション
- 次のスライド:
mcp__marionette__tapwithkey: "nav_next" - 前のスライド:
mcp__marionette__tapwithkey: "nav_previous"
4. 全スライド一括プレビュー
ユーザーが「全スライド」や「一括」と言った場合:
lib/main.dartからスライド数を確認- 最初のスライドに移動(必要に応じてアプリ再起動)
- 各スライドのスクリーンショットを取得しながら順番に進める
- ステップがあるスライドは全ステップ分進める
for each slide:
take_screenshots
tap key: "nav_next"
5. 特定スライドへのジャンプ
特定のスライドを確認したい場合:
lib/slides/slides.dartとlib/main.dartからスライド一覧を取得- 目的のスライドまで nav_next/nav_previous で移動
- または
initial: trueを設定してホットリスタートで直接ジャンプ
コマンド一覧
| 操作 | コマンド |
|---|---|
| スクリーンショット | mcp__marionette__take_screenshots |
| 次のスライド | mcp__marionette__tap key: nav_next |
| 前のスライド | mcp__marionette__tap key: nav_previous |
| ホットリロード | mcp__marionette__hot_reload |
注意事項
- ナビゲーションボタンは
kDebugModeの時のみ表示される - VS Codeから起動していれば
--disable-service-auth-codesが自動付与される - ホットリロード後はスクリーンショットを再取得して変更を確認する