agentleFS
Sign inStart free
wrg32786wrg32786/aigent-design-system/skills/visual-design-critic/SKILL.md

visual-design-critic

Skill4 starsChanged 3 months agoMITView on GitHub

Inspect AIgent Resolve screenshots with native vision, produce a structured evidence-backed aesthetic critique, connect visual findings to numbered rendered elements, and block completion until every required viewport is genuinely reviewed.

The file

We split this skill into the rules it gives an agent

8 rules. About 0 are common, 6 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈6

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill after mechanical Resolve has produced desktop, tablet, mobile, and reduced-motion screenshots.

    line 8
  2. Distinctive:

    every original and annotated capture

    line 27
  3. Very specific:

    Use not-applicable only when the dimension genuinely does not exist on the surface.

    line 47
  4. Distinctive:

    Do not write vague reactions such as “make it pop,” “clean it up,” or “feels crowded.” Name the visible relationship that is wrong.

    line 65
  5. Very specific:

    Read .aigent/resolve/latest.combined.md.

    line 81
  6. Distinctive:

    Do not claim completion until:

    line 87
  7. Distinctive:

    every required capture is reviewed.

    line 90
  8. Distinctive:

    no open P0 or P1 visual finding remains.

    line 91

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Visual Design Critic

Use this skill after mechanical Resolve has produced desktop, tablet, mobile, and reduced-motion screenshots.

Non-negotiable rule

You must open every required original and annotated image. Do not infer the visual review from HTML, CSS, DOM metrics, filenames, or the mechanical score. When this environment cannot inspect images, stop and request a human review or an explicit vision-model adapter. Never mark an unseen capture as reviewed.

Prepare

npx github:wrg32786/aigent-design-system vision prepare --target .

Read:

  1. PRODUCT.md
  2. DESIGN.md
  3. .aigent/inspiration-plan.json, when present
  4. .aigent/resolve/latest.json
  5. .aigent/resolve/latest.visual-review-task.json
  6. every original and annotated capture
  7. the generated element-map.json

Review dimensions

Judge every viewport across:

  • product clarity
  • hierarchy
  • composition
  • typography
  • color and material
  • motion and media
  • interaction
  • product specificity
  • originality
  • responsive quality
  • trust and usability
  • finish

Use not-applicable only when the dimension genuinely does not exist on the surface. Explain why.

Findings

Each actionable finding must include:

  • viewport
  • P0-P3 severity
  • critique dimension
  • a precise visual observation
  • visible evidence
  • a concrete repair recommendation
  • relevant E### element IDs from the annotated capture
  • suspected shared owner when reasonably inferable
  • what the repair must preserve
  • confidence
  • open, resolved, or accepted status

Do not write vague reactions such as “make it pop,” “clean it up,” or “feels crowded.” Name the visible relationship that is wrong.

Root-cause repair

After writing .aigent/resolve/latest.visual-review.json:

npx github:wrg32786/aigent-design-system vision check \
  --target . \
  --review .aigent/resolve/latest.visual-review.json

npx github:wrg32786/aigent-design-system vision finalize \
  --target . \
  --review .aigent/resolve/latest.visual-review.json

Read .aigent/resolve/latest.combined.md. Fix the highest shared cause rather than patching every visible symptom. Preserve product truth, visual authority, reference transformations, accessibility, mobile intent, and media strategy.

Rerun Resolve and Vision after each coherent repair group. Compare resolved, introduced, and persistent visual findings.

Stop condition

Do not claim completion until:

  • mechanical Resolve passes;
  • every required capture is reviewed;
  • no open P0 or P1 visual finding remains;
  • the overall verdict is pass or pass-with-notes;
  • product clarity, specificity, composition, typography, motion/media, originality, and finish receive an explicit final judgment.

A green mechanical score without this review is not design completion.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free