Screenshot Verification

Verify that your Flutter UI matches expectations by capturing screenshots from a running app. The /flutter-screenshot skill creates a visual feedback loop: make changes, hot reload, capture, analyze, and iterate.

Scenario

You have just built a new profile screen and want to confirm the layout, spacing, and colors are correct without manually inspecting the app on every change. The AI captures a screenshot, analyzes it against your requirements, and suggests adjustments.

Prerequisites

• ACT Pro installed and verified (/act:help)
• A Flutter app running on a simulator, emulator, or device
• The app must be in a state where the target screen is visible (or navigable)

The visual verification loop

Traditional AI-assisted development is blind to visual output. The AI writes layout code but cannot see the result. The screenshot skill closes this loop:

1. Make a change — adjust padding, colors, layout
2. Hot reload — apply the change instantly
3. Capture — take a screenshot of the current screen
4. Analyze — the AI examines the screenshot against requirements
5. Iterate — the AI suggests or applies fixes, then captures again

Steps

1. Start the screenshot skill

With your app running, invoke the skill:

/flutter-screenshot

2. Capture the current screen

Tell the AI to take a screenshot:

"Capture the profile screen as it currently appears"

The AI captures a screenshot from the running app and displays it for review.

3. Describe what you expect

Provide your visual requirements:

"The profile avatar should be centered, 120px diameter, with 16px padding below it. The name should be in 24px bold text."

4. Let the AI analyze the screenshot

The AI compares the captured screenshot against your description and reports discrepancies:

• “The avatar appears left-aligned instead of centered”
• “The padding below the avatar looks closer to 8px than 16px”
• “The name text weight appears correct”

5. Apply fixes and recapture

The AI makes the code changes to fix the issues:

Center(
  child: Column(
    children: [
      CircleAvatar(radius: 60, backgroundImage: ...),
      const SizedBox(height: 16),
      Text(user.name, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
    ],
  ),
)

After hot reload, it captures again and confirms the fixes.

6. Repeat until satisfied

Continue the loop for each section of the screen. The AI tracks what has been verified and what remains.

Expected output

• Screenshots captured at each iteration of the visual loop
• A list of discrepancies found and resolved
• Code changes applied directly to your layout files
• A final screenshot confirming the UI matches all stated requirements

Common pitfalls

• App not running — The screenshot skill requires a live app. Make sure the simulator or device is running and the target screen is visible before capturing.
• Hot reload not applied — If the AI makes a code change, it needs to hot reload before capturing. If the screenshot shows old UI, trigger a hot reload manually or ask the AI to do so.
• Vague visual requirements — “Make it look good” is not actionable. Be specific about sizes, colors, alignment, and spacing so the AI can verify objectively.
• Pixel-perfect expectations — Screenshots may vary slightly across devices and screen densities. Focus on layout correctness and proportions rather than exact pixel values.

Next steps

• Combine with the Add a Feature playbook to visually verify new UI during development
• Use Robot Testing to add automated widget tests after visual verification
• See /act:workflow:work for how screenshot verification integrates into the automated work phase