preview-widget
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. |
More from chunkytofustudios/flutter-skills
android-emulator
Run, debug, screenshot, and interact with a Flutter app on a running Android emulator via adb and the qemu console — boot/shut down an AVD, launch `flutter run` in the background, capture compact 360px-wide JPEG screenshots, dump the Android accessibility tree to find addressable widgets, tap by label or coordinates, long-press, swipe, and pinch-zoom (multi-touch). Use this skill whenever the user wants to launch, test, QA, take screenshots of, reproduce a bug in, verify a layout on, or otherwise interact with a Flutter app on Android — even when they don't say "emulator", "adb", or "screenshot" explicitly (e.g. "see what the home screen looks like", "try the new button", "check the layout on Pixel"). Auto-detects the project's applicationId, AVD, and `fvm flutter` vs `flutter`; falls back to ANDROID_EMU_* env vars.
13design-polish
Polish a Flutter app's screens — visual hierarchy, typography, color and contrast, spacing, section clarity. Reads a reference screen first to lock in the app's existing design tone, then drives the running app on an Android emulator via the `android-emulator` skill (screenshots, taps, swipes), makes targeted widget and `ThemeData` edits, and spawns an independent evaluator sub-agent to score design quality, originality, craft, and functionality. Use this skill whenever the user wants to improve, polish, refine, critique, audit, or tighten the visual design of a Flutter screen — even when they don't say "polish" (e.g. "make this look better", "fix the layout on settings", "tighten up the home screen", "this screen feels off", "review the UI", "design pass", "make it less generic", "feels too Material default"). Skip for non-Flutter UIs, feature work, or routing/functionality changes.
12symbolize-android-stacktrace
De-obfuscate (symbolize) an Android crash or ANR stacktrace exported from the Google Play Console for a Flutter app whose release build came from Codemagic CI/CD — fetches the matching `android_native_debug_symbols.zip` and `<AppName>_<N>_artifacts.zip` from Codemagic, then resolves every `pc 0x…` native frame and obfuscated Flutter frame to file:line via `llvm-addr2line`. Use whenever the user has a stacktrace (.txt/.log/pasted text) and wants to know which line of code crashed, even if they don't say "symbolize" — e.g. "what's causing this ANR?", "debug this Play Console crash", "translate this stack", "resolve these pc 0x… frames", "Codemagic build N crashed, here's the trace". Skips — iOS/dSYM symbolication, non-Codemagic builds (no symbol upload step), Crashlytics-only Dart exceptions with no native or Flutter frames.
10