Menu
Build, run, drive, and screenshot the widgetbook sample app. Use when asked to start/launch/run widgetbook, take a screenshot of it, preview Adaptive Card samples or chart/overlay demos, or run its tests.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Semantics contract for Adaptive Card elements — how labels, headings, live regions, and decorative-vs-meaningful images are exposed to screen readers, and how to test them with `tester.ensureSemantics()`. Use when adding or changing any element, input, or action widget, and at code review.
Optional flutter_adaptive_cards_host_fs package — backend invoke serialization, PlainJson/Teams adapters, AdaptiveCardBackendHandlers, and response effects. Use when wiring Submit/Execute/Refresh/onChange to a flow-service or reviewing associatedInputs + invoke round-trips.
Use when finalizing a change in the Flutter-AdaptiveCards monorepo — before you propose, commit, or merge — as the manual or AI-assisted review gate. Checks monorepo hygiene, Adaptive Cards spec compliance, theming, widget keys, accessibility, and testing.
FVM rules for the Flutter-AdaptiveCards monorepo. Prefix every `flutter` and `dart` shell command with `fvm`. Use when vendored dart/flutter skills show bare commands, when installing or switching the pinned SDK, or before analyze, test, pub, or build_runner workflows.
Classify, audit, and enforce the Diátaxis documentation framework across the Flutter-AdaptiveCards canonical `docs/` and package READMEs. Keeps each doc in exactly one quadrant (tutorial / how-to / reference / explanation) and flags mixed-mode drift. Use when writing or reviewing a doc under `docs/`, adding a `doc_type:` front-matter tag, auditing the doc set for gaps or violations, or when the user mentions Diátaxis or documentation structure. Advisory only — it proposes splits, it does not silently move or rewrite files.
Use before adding a new Adaptive Card element type — implementing its widget, registering it, or testing it. Covers the StatefulWidget + mixin pattern, CardTypeRegistry registration, the extension API, and optional packages (charts).
| name | run-widgetbook |
| description | Build, run, drive, and screenshot the widgetbook sample app. Use when asked to start/launch/run widgetbook, take a screenshot of it, preview Adaptive Card samples or chart/overlay demos, or run its tests. |
widgetbook is the Flutter Adaptive Cards sample/demo app (a Widgetbook
catalog of card JSON samples, chart overlays, and host-callback demos). The
agent path builds and launches the real macOS app and captures a PNG from
inside the process, driven by
.claude/skills/run-widgetbook/drive.sh →
driver_main.dart.
All paths below are relative to widgetbook/. Every flutter/dart command is
prefixed with fvm (the repo pins Flutter 3.44.0 via FVM; bare flutter may be
the wrong version).
xcodebuild.fvm install (reads ../.fvmrc).fvm flutter devices (look for
macOS (desktop)).widgetbook does also target web/mobile, but the driver here was verified on
macOS desktop (no chromium-cli is installed on this machine).
From the repo root (this is a pub workspace — one resolve covers every package):
cd ..
fvm flutter pub get
cd widgetbook
Code generation. widgetbook is code-generated: main.dart imports
lib/main.directories.g.dart, which indexes every @widgetbook.UseCase.
drive.sh runs this automatically when the file is missing; to do it by hand:
fvm dart run build_runner build --delete-conflicting-outputs
Regenerate + restart after adding/renaming a use case or sample folder.
.claude/skills/run-widgetbook/drive.sh
What it does, with no human input:
main.directories.g.dart if absent.fvm flutter run -d macos -t .claude/skills/run-widgetbook/driver_main.dart
— launches the real WidgetbookApp.RepaintBoundary → PNG) into
its sandbox temp dir and prints SCREENSHOT_WRITTEN: <path>../widgetbook_screenshot.png and quits the app.Pass a custom output path as the first argument:
.claude/skills/run-widgetbook/drive.sh /tmp/wb.png
First macOS build takes a few minutes; incremental runs are ~30–60s. The
trailing Terminated: 15 / Lost connection to device lines are the script
quitting the app — expected, exit code is still 0.
Verified result — the PNG shows the Widgetbook home ("Adaptive Cards for Flutter" with the New / Legacy / This repository link cards) and the Navigation / Addons / Knobs bar, in the dark default theme.
Opens a real window and blocks until you press q. To browse the catalog and
have it pick up JSON/use-case changes:
fvm dart run build_runner build --delete-conflicting-outputs
fvm flutter run -d macos
Useless headless — it just waits for a window nobody can see.
fvm flutter test
Verified: 1 placeholder test passes (test/widget_test.dart). widgetbook's real
coverage lives in the library packages under ../packages/.
macos/Runner/DebugProfile.entitlements).
The app cannot write a PNG to the repo dir or /tmp — it fails with
Operation not permitted. driver_main.dart writes to Directory.systemTemp
(inside its container, still readable by the unsandboxed shell) and prints the
path; drive.sh copies it out.screencapture does not work from a sandboxed/headless shell (needs
Screen Recording permission; returns could not create image from display).
Capture happens inside the app instead.flutter screenshot is useless here — PNGs only for physical
Android/iOS devices, not desktop.main.directories.g.dart → build fails with an import
error on that file, or new use cases don't appear. Rerun build_runner.Target file ".claude/…/driver_main.dart" not found → you are not in
widgetbook/. cd there first (the target path is relative).flutter run exited early in the drive log → run
fvm flutter run -d macos -t .claude/skills/run-widgetbook/driver_main.dart
directly to see the real compile error.