What is the design review workflow skill?
The design review workflow skill is a SKILL.md in zakariaf/Flutter-Skills. It makes an AI coding agent run one structured design and QA pass at the end of a build: a screenshot sweep, an on device pass, graded findings, exactly one scoped fix round and a dated sign off that gates release.
The design review workflow skill is a SKILL.md in zakariaf/Flutter-Skills. It has an AI coding agent run one structured design and QA pass on the release build when the last build task is done. The pass ends in graded findings, one fix round and a dated sign off.
The trigger is the last build task done with all CI gates and tests green. Green gates are a precondition, so the pass judges only what the eye and ear catch.
The screenshot sweep
Every screen is shot once per matrix cell across light and dark themes and LTR and RTL directions, all under the largest text scale. Motion moments are recorded as video with reduce motion off and on.
Grading and sign off
Findings are graded BLOCKER, FIX or NOTE, and every accessibility floor violation is a BLOCKER however beautiful the screen. Exactly one fix round follows, and a surviving BLOCKER means no sign off and an escalation.
The sign off is a tracked file with the date, reviewer, commit sha, build flavor, matrix inventory, findings table and a verdict line, and release tasks depend on it.
The on device pass
The on device pass uses real, cheap target hardware in real state. It covers screen reader and switch access traversal, the largest system font with bold and display zoom, and a data safety rehearsal and crash log check done last.
Who the design review workflow skill is for
Best for
- Running a pre ship visual and QA sweep on a release build.
- Verifying a build on a physical device before tagging a release.
- Working out what design and QA cannot be tested automatically.
Not for
- It runs once at the end of a build on the release build, never per task, so for structured feedback on a Figma link, screenshot or description of a single screen the design-critique skill fits.
- It grades findings as BLOCKER, FIX or NOTE rather than numeric scores, so for scoring a screen across six weighted dimensions with Nielsen's ten heuristics the design-review skill fits.
- It allows exactly one fix round rather than a repeat loop, so for comparing a Figma node with a page screenshot, fixing the code and repeating the figma-design-sync skill fits.
- It judges screens that already exist and fixes only findings from its one round, so for building Flutter layouts that adapt to window size the flutter-build-responsive-layout skill fits.
How to install Design Review Workflow Skill: One End of Build QA Pass
npx skills add zakariaf/Flutter-Skills/plugin marketplace add zakariaf/Flutter-Skills and then /plugin install flutter@flutter-skills.Browse first
Run
npx skills add zakariaf/Flutter-Skills --listto see the available skills before installing.Run the install command
Run the command above. It installs all the skills in the repository, and the open skills CLI places them where your agent expects them.
Finish the build first
Wait until the last build task is done and CI gates and tests are green, which is the skill's trigger.
Ask for the review
Ask your agent to run the design review on the release build, or run the skill explicitly with
/design-review-workflow.
Check that it loaded
Ask your agent to run the design review for a finished feature. It should confirm CI is green, plan the screenshot matrix across theme and direction, and grade each finding as BLOCKER, FIX or NOTE.
Key features
- Once at the endOne pass per app or feature on the release build, never a per task visual critique that blocks a build task.
- Screenshot matrixEach screen and meaningful state is shot per theme and direction, with the largest text scale applied to every still.
- Sortable file namesOne file per matrix cell, named
NN--<screen>[-<state>]--<theme>--<dir>.png. - Four lensesEach screen is critiqued for floor compliance, identity fidelity, parity or better, and motion moments.
- Three gradesFindings are graded BLOCKER, FIX or NOTE and consolidated into one deduped table before fixing.
- Accessibility floorContrast, tap target size, text scale reflow, color never alone, RTL correctness and reduce motion safety always grade BLOCKER when missed.
- One fix roundBLOCKERs and FIXes are fixed as one scoped unit, and only affected cells are re shot, overwriting the old files.
- On device passA pass on real, cheap target hardware covers screen reader and switch access traversal, with destructive steps done last.
- Greppable design gateThe skill shows a grep based CI gate with a raw
Color(0xFFpattern that fails when a raw color appears outside the theme layer. - Dated sign offA tracked sign off file holds the date, reviewer, commit sha, build flavor, inventory, findings and a verdict line that gates release.
Frequently asked questions
What is the design review workflow skill?
It is a SKILL.md in the zakariaf/Flutter-Skills repository that has your AI coding agent run one structured design and QA pass at the end of a build. The pass combines a screenshot sweep and an on device pass, then ends in graded findings, one fix round and a dated sign off.
How do I install the design review workflow skill?
Run npx skills add zakariaf/Flutter-Skills, which installs all the skills in the repository through the open skills CLI. Add --list to browse first, or add --skill with a skill name to pick one. Claude Code users can instead run /plugin marketplace add zakariaf/Flutter-Skills and then /plugin install flutter@flutter-skills.
When does the review run?
Once per app or feature, at the end, on the release build. The trigger is the last build task done with all CI gates and tests green. During the build, development speed wins and no task is blocked on aesthetics, so anything that looks broken becomes a note for the pass.
What is in the screenshot sweep matrix?
Every screen the app can reach, plus each meaningful state such as empty, mid and full, shot in light and dark themes and in LTR and RTL. The largest text scale applies to every still, and motion moments are recorded as video with reduce motion off and on.
How are findings graded?
BLOCKER is a floor violation or shipping stopper that must be fixed now. FIX is clearly below the bar and fixable this round. NOTE is minor or subjective and goes to the backlog. Every accessibility floor violation is a BLOCKER, and the findings are consolidated into one deduped table.
Why exactly one fix round?
BLOCKERs and FIXes are fixed together as one scoped unit, gates and tests are re run, and only affected cells are re shot. New observations during verification become NOTEs, and a surviving BLOCKER means no sign off and an escalation, not a second round.
What does the sign off contain?
It is a tracked file, not a loose note, and release tasks depend on it. It holds the date, reviewer, commit sha, build flavor, the matrix inventory, the findings table with resolutions, and a verdict line. The verdict reads SIGNED OFF, or NOT signed off plus the escalated blocker.