preview-widget
Installation
SKILL.md
Preview a Flutter widget in isolation
Render a single widget in Flutter's Widget Previewer so you and the human can iterate on it — design tweaks, light/dark variants, tablet sizing — without booting the full app. The agent screenshots the live preview headlessly; the human optionally opens the same localhost URL in their own Chrome to follow along.
When to use this
All three must hold — if any is false, this skill is the wrong tool:
- The project is a Flutter project (
pubspec.yamlat the cwd,lib/exists). - Flutter ≥ 3.35 is on PATH (or via
fvm flutter). The previewer is experimental on stable but stable enough to design against; older Flutters don't have it. - The user wants to iterate on a single widget, not a full screen or end-to-end flow. Full-screen visual work is what
design-polish+android-emulatoris for.
Setup (caller's machine)
| Requirement | How to satisfy |
|---|---|
| Flutter ≥ 3.35 | Run bash scripts/check_preview_support.sh — fails loudly with an upgrade hint if too old. Override the Flutter binary with FLUTTER_BIN=… (default: flutter, falls back to fvm flutter). |
| Google Chrome / Chromium | Used headlessly by screenshot_preview.sh to capture previews. macOS picks up /Applications/Google Chrome.app automatically; on Linux any of google-chrome, chromium, chromium-browser on PATH works. Override with CHROME_BIN=/path/to/chrome. |
bash 3.2+ (macOS default), awk, grep, find |
Standard. No Python or Node needed. |