skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-ux-evaluator

Evaluates rendered HTML UIs against Position, Visual Weight, and Spacing conventions with evidence-cited reports.

Updated Jul 8, 2026
Search Tags:#html#accessibility#ux evaluation#design review#scorecard#ui audit#usability heuristics
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-ux-evaluator-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-ux-evaluator
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-ux-evaluator
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-ux-evaluator-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Reviewing a finished UI for usability issues often devolves into subjective opinions like "it looks off." This Skill replaces guesswork with a systematic 3-dimension evaluation framework (Position, Visual Weight, Spacing) that scores every component Pass/Warn/Fail against Balsamiq, Nielsen, and Material conventions, with concrete selector and computed-style evidence for every finding. ## Core Features & Use Cases - 3-Dimension Scoring: Every component is scored on Position, Visual Weight, and Spacing with Pass/Warn/Fail verdicts backed by measurable evidence, never prose-only judgments. - Prioritized Recommendations: Findings are triaged as P1 (UX-breaking), P2 (suboptimal), or P3 (polish) so teams know what blocks shipping. - Machine-Readable Scorecard: In agent-orchestrated mode it emits a YAML scorecard sidecar with severity tiers and an overall verdict (PASS / NEEDS_CHANGES / BLOCKED) that downstream agents can gate on. - Use Case: After generating a pricing page, run an evaluation on the CTA stack. The Skill reports that the primary button sits left of the secondary (P1, violates Balsamiq primary-right convention) and that the 6px intra-group gap falls below the 8px minimum (P3), citing exact selectors and computed styles. ## Quick Start Ask the AI to evaluate the UX of your rendered HTML file or live URL, for example by running /amw-eval on your pricing page to get a scored report with prioritized fixes.

Frequently Asked Questions about amw-ux-evaluator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I evaluate the UX of a rendered HTML page?▼

Run the /amw-eval command with a local HTML file path or a live URL. The evaluator scores Position, Visual Weight, and Spacing as Pass, Warn, or Fail, citing selectors and computed-style values for every finding, then emits a prioritized Markdown report.

What UX heuristics does a UI evaluation check against?▼

Evaluations cross-check against Balsamiq button principles, Nielsen heuristics, Material Design conventions, and observable industry patterns from GitHub, Stripe, Notion, and VS Code Docs. Every Fail or Warn must cite one of these authoritative sources, never personal preference.

Can I evaluate a live URL instead of a local HTML file?▼

Yes. Live URLs are inspected through the amw-dev-browser skill, which captures the DOM and computed styles. Auth-walled pages require a session cookie or local copy, and JS-heavy SPAs may need a wait flag so the component fully renders before scoring.

Does the UX evaluator modify my HTML to fix issues?▼

No. The evaluator is strictly read-only. It proposes fixes with priority levels, but applying them is routed back through the design-principles orchestrator, which decides whether to patch in place or regenerate the component.

What is the difference between severity and priority in the scorecard?▼

Severity measures objective user impact (blocker, high, medium, low) regardless of deadlines, while priority (P1/P2/P3) reflects fix urgency accounting for effort and blast radius. A low-severity cosmetic gap can still be P3, and severity cannot be negotiated down.

When should I not use this UX evaluation skill?▼

Do not use it for generic design requests like creating a landing page or styling a page; those belong to the design-principles orchestrator. It also does not replace Lighthouse or axe-core for performance and automated accessibility audits.

Related Skills

Explore More Design & Creative Skills→
ramybarsoumramybarsoum

napkin-sketch

Generate annotated ASCII wireframes and capture browser screenshots for design matching.

Community
Intermediate
juicesharpjuicesharp
730

amend

Applies failing grade-panel verdict findings to surgically revise one artifact in place.

Community
Advanced
botPhUbotPhU

accessibility-expert

Identify and remediate accessibility issues in web interfaces.

Community
Advanced
oakossoakoss
14

usability-tester

Plan and conduct usability tests with heuristic evaluations and accessibility audits.

Official
Advanced