Menu
Visual QA for Flutter apps using golden_toolkit snapshot testing. Validates widgets render correctly across devices and themes.
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
Merges bookend agent reports into revised readiness, complexity, and decomposition plan. Produces the final evidence-backed assessment consumed by sprint-architect-agent.
Fast filesystem readiness scan — counts docs, source files, manifests, platform signals. Produces initial ReadinessReport for agent spawning decisions.
Scores proposal complexity against codebase surface. Uses proposal text analysis and readiness stats to determine decomposition tier and agent count.
Generation-time design taste for web UI work. Anti-cliche bans, layout and motion hard rules, and client-intent dials. Advisory only - shapes drafts; declared measured contracts remain the sole gate authority.
Rigorously reasons about definitions, proofs, and computations in algebra, analysis, discrete math, probability, linear algebra, and applied math. Verifies derivations, spots invalid steps, and states assumptions clearly. Use when solving or proving math problems, reviewing mathematical arguments, modeling with equations, interpreting statistics, or when the user mentions proofs, lemmas, theorems, integrals, series, matrices, optimization, or numerical methods.
Visual verification for interactive elements (popups, modals, tooltips). Clicks elements and captures screenshots for analysis. Bypasses MCP browser tool limitations with cross-origin CSS.
| name | qa-visual-flutter |
| description | Visual QA for Flutter apps using golden_toolkit snapshot testing. Validates widgets render correctly across devices and themes. |
Visual regression testing for Flutter applications using golden_toolkit snapshot comparisons.
{
"project_dir": "/path/to/flutter_project",
"ticket_id": "TICKET-XXX",
"test_path": "test/golden/",
"devices": ["phone", "tablet"],
"themes": ["light", "dark"],
"update_goldens": false
}
# pubspec.yaml
dev_dependencies:
golden_toolkit: ^0.15.0
flutter_test:
sdk: flutter
cd $project_dir
flutter test --update-goldens # First run to generate baselines
flutter test test/golden/ # Subsequent runs to compare
// test/golden/widget_test.dart
import 'package:golden_toolkit/golden_toolkit.dart';
void main() {
testGoldens('MyWidget renders correctly', (tester) async {
final builder = DeviceBuilder()
..overrideDevicesForAllScenarios(devices: [
Device.phone,
Device.iphone11,
Device.tabletLandscape,
])
..addScenario(
widget: MyWidget(),
name: 'default state',
)
..addScenario(
widget: MyWidget(loading: true),
name: 'loading state',
);
await tester.pumpDeviceBuilder(builder);
await screenMatchesGolden(tester, 'my_widget');
});
}
testGoldens('Widget supports themes', (tester) async {
await tester.pumpWidgetBuilder(
MyWidget(),
surfaceSize: Device.phone.size,
wrapper: (child) => MaterialApp(
theme: ThemeData.light(),
home: child,
),
);
await screenMatchesGolden(tester, 'widget_light');
await tester.pumpWidgetBuilder(
MyWidget(),
wrapper: (child) => MaterialApp(
theme: ThemeData.dark(),
home: child,
),
);
await screenMatchesGolden(tester, 'widget_dark');
});
{
"skill": "qa-visual-flutter",
"status": "pass|fail",
"tests": {
"total": 15,
"passed": 13,
"failed": 2
},
"failures": [
{
"test": "my_widget_phone",
"expected": "test/golden/goldens/my_widget_phone.png",
"actual": "test/failures/my_widget_phone.png",
"diff_percent": 2.3,
"category": "layout_shift"
}
],
"devices_tested": ["phone", "iphone11", "tablet"],
"themes_tested": ["light", "dark"],
"next_action": "proceed|fix|update_goldens"
}
| Category | Description | Common Cause |
|---|---|---|
layout_shift | Widget dimensions changed | Padding/margin changes |
color_diff | Colors don't match | Theme changes |
text_diff | Text rendering different | Font changes |
missing_element | Element not rendered | Conditional logic bug |
new_element | Unexpected element | Unintended addition |
Diff percent > 5%?
YES → status: "fail", next_action: "fix"
Diff percent 1-5%?
YES → status: "warning", review manually
Diff percent < 1%?
YES → status: "pass" (likely anti-aliasing)
Basic golden test:
{
"project_dir": "/projects/my_flutter_app",
"ticket_id": "TICKET-APP-001"
}
Update baselines after intentional changes:
{
"project_dir": "/projects/my_flutter_app",
"ticket_id": "TICKET-APP-001",
"update_goldens": true
}