mcpField
F
flutter-visual-qa

flutter-visual-qa

github.com/musabekisakov-imjTesting & quality452 installsUpdated 14w ago
Repository

About flutter-visual-qa

flutter-visual-qa is a visual quality review skill for Flutter products that treats rendered output, rather than source inspection alone, as evidence. It organizes checks with representative matrices, prioritized criteria, and golden tests.

Key features

  1. 01Build a matrix across layouts, themes, and states
  2. 02Record viewport, pixel ratio, and test fixtures
  3. 03Prioritize rendered defects by impact
  4. 04Use deterministic fixtures for golden tests
  5. 05Recapture and report after fixes

Use cases

  1. 01Verify interfaces under different constraints and themes
  2. 02Review loading, empty, and error states
  3. 03Check RTL layouts and enlarged text in localized products
  4. 04Detect visual regressions in stable components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/musabekisakov-imj/flutter-design-engineer --skill flutter-visual-qa

After installing, type/flutter-visual-qain Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
connected-product-workflows.md
visual-qa.md

Details

From the project README

Flutter Visual QA

Rendered output is the evidence. Source inspection alone cannot establish visual quality.

Build a Matrix

Select the smallest representative matrix covering:

  • compact and expanded constraints;
  • light and dark themes when supported;
  • primary, loading, empty, error, and destructive states as applicable;
  • default and enlarged text;
  • LTR and RTL for localized products.

Record the exact viewport, device-pixel ratio, theme, locale, and fixture state. Read references/visual-qa.md. For connected or multi-domain products, also read references/connected-product-workflows.md and include partial-source failure in the matrix.

Inspect

Review hierarchy and scan path first, then layout, type, spacing rhythm, color roles, controls, content realism, edge behavior, and pixel-level defects. Compare related states side by side. Distinguish implementation defects from subjective preference.

Prioritize:

  1. task-blocking clipping, overlap, invisibility, or unreachable controls;
  2. broken hierarchy, contrast, state communication, or adaptive composition;
  3. inconsistency and polish defects;
  4. optional aesthetic refinements.

Golden Tests

Use golden tests for stable components and deterministic fixtures. Control fonts, animations, time, network content, and pixel ratio. Do not approve broad golden updates without inspecting diffs.

Close the Loop

Require at least one refinement pass for material findings and recapture affected states. Report the matrix inspected, fixes made, unverified combinations, and artifact paths.

Comments

Markdown supported