@wa008/ui-audit-mcp 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChecklistItem } from "../types.js";
|
|
2
|
-
/** System-wide UI quality audit dimensions */
|
|
2
|
+
/** System-wide UI quality audit dimensions — strict scoring */
|
|
3
3
|
export declare const DIMENSIONS: ChecklistItem[];
|
|
4
4
|
export declare const REQUIRED_DIMS: string[];
|
|
5
5
|
export declare const PASSING_SCORE = 8;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checklist.d.ts","sourceRoot":"","sources":["../../../src/evaluation/checklist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C
|
|
1
|
+
{"version":3,"file":"checklist.d.ts","sourceRoot":"","sources":["../../../src/evaluation/checklist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,+DAA+D;AAC/D,eAAO,MAAM,UAAU,EAAE,aAAa,EA+GrC,CAAC;AAEF,eAAO,MAAM,aAAa,UAA4B,CAAC;AACvD,eAAO,MAAM,aAAa,IAAI,CAAC"}
|
|
@@ -1,86 +1,104 @@
|
|
|
1
|
-
/** System-wide UI quality audit dimensions */
|
|
1
|
+
/** System-wide UI quality audit dimensions — strict scoring */
|
|
2
2
|
export const DIMENSIONS = [
|
|
3
3
|
{
|
|
4
4
|
id: "overlap",
|
|
5
5
|
name: "Element Overlap & Safe Areas",
|
|
6
|
-
description: "
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
6
|
+
description: "You are a strict QA inspector. Your job is to find overlap problems, not to praise the UI.\n" +
|
|
7
|
+
"Assume there ARE problems until you have carefully verified every region.\n\n" +
|
|
8
|
+
"CHECK EACH REGION METHODICALLY — report what you see in each:\n" +
|
|
9
|
+
"1. TOP-RIGHT CORNER: Is there ANY element (button, icon, badge) that sits within or touches the status bar zone or Dynamic Island area? " +
|
|
10
|
+
"Look very carefully at the vertical position of the topmost UI element on the right side. " +
|
|
11
|
+
"If its top edge is within ~54pt of the screen top on a notch/Dynamic Island device, it is overlapping. This is a CRITICAL failure.\n" +
|
|
12
|
+
"2. TOP-LEFT CORNER: Same check — any element intruding into the status bar time/signal area?\n" +
|
|
13
|
+
"3. STATUS BAR ZONE: Does ANY app content (text, header background, button) extend behind the system time, battery, or signal indicators? Even partial intrusion = failure.\n" +
|
|
14
|
+
"4. BOTTOM SAFE AREA: Does any content overlap with the home indicator bar?\n" +
|
|
15
|
+
"5. INTER-ELEMENT: Do any two app elements (buttons, text, images, cards) visually overlap each other?\n" +
|
|
16
|
+
"6. MODAL/POPUP: If present, does it unintentionally cover critical content?\n\n" +
|
|
17
|
+
"SCORING ATTITUDE: If you are unsure whether something overlaps, score LOW. " +
|
|
18
|
+
"The purpose of this audit is to catch problems, not to give the benefit of the doubt.\n" +
|
|
19
|
+
"NOTE: Do NOT evaluate spacing aesthetics (layout), colors (style), or text meaning (info_clarity).",
|
|
20
|
+
scoringGuide: "0-2: Any element overlaps status bar, Dynamic Island, notch, or home indicator. Or two elements clearly cover each other.\n" +
|
|
21
|
+
"3-4: An element is dangerously close to a safe area boundary (<8pt margin) — likely overlapping on some devices.\n" +
|
|
22
|
+
"5-6: All elements are within safe areas but margins are tight (<12pt). Risk of overlap on larger text sizes or different devices.\n" +
|
|
23
|
+
"7-8: All elements are clearly within safe areas with comfortable margins (>=16pt). No inter-element overlap detected.\n" +
|
|
24
|
+
"9-10: Perfect — generous safe area margins on all sides, zero overlap risk. ONLY give 9-10 if you are absolutely certain after checking every corner.",
|
|
18
25
|
},
|
|
19
26
|
{
|
|
20
27
|
id: "layout",
|
|
21
28
|
name: "Layout & Spatial Balance",
|
|
22
|
-
description: "
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
"
|
|
29
|
+
description: "You are a strict QA inspector for layout quality. Your job is to find spatial problems.\n" +
|
|
30
|
+
"Assume the layout has issues until you verify otherwise.\n\n" +
|
|
31
|
+
"CHECK EACH ASPECT:\n" +
|
|
32
|
+
"1. LETTERBOXING: Does the app appear to run inside a smaller box with black/empty bars? This is score 0, no exceptions.\n" +
|
|
33
|
+
"2. SCREEN UTILIZATION: Is there a large empty area that serves no purpose? Is content crammed into only half the screen while the rest is wasted?\n" +
|
|
34
|
+
"3. ALIGNMENT: Pick any two similar elements (e.g., two cards, two labels). Are their left edges aligned? Are the gaps between them equal? Misalignment = deduction.\n" +
|
|
35
|
+
"4. SPACING: Are gaps between elements consistent? Measure visually: if card A-to-B gap looks different from card B-to-C gap, that is a problem.\n" +
|
|
36
|
+
"5. RESPONSIVE FIT: Does the layout feel designed for this screen size, or does it look like it was designed for a different device?\n\n" +
|
|
37
|
+
"SCORING ATTITUDE: Do not be generous. A 'basically fine' layout is a 6, not an 8.\n" +
|
|
38
|
+
"NOTE: Do NOT evaluate overlap (that is overlap), colors (that is style), or text meaning (that is info_clarity).",
|
|
39
|
+
scoringGuide: "0-2: Letterboxing detected, or layout is severely broken (elements piled up, massive empty areas, content off-screen).\n" +
|
|
40
|
+
"3-4: Major layout issues — clearly uneven spacing, significant misalignment, or large wasted areas.\n" +
|
|
41
|
+
"5-6: Layout is functional but has noticeable imperfections — some uneven spacing or minor alignment issues. This is the 'OK but not great' range.\n" +
|
|
42
|
+
"7-8: Well-structured layout with only very minor imperfections that require careful inspection to notice.\n" +
|
|
43
|
+
"9-10: Flawless — pixel-perfect alignment, perfectly consistent spacing, optimal screen utilization. Extremely rare.",
|
|
34
44
|
},
|
|
35
45
|
{
|
|
36
46
|
id: "info_clarity",
|
|
37
47
|
name: "Information Clarity & Readability",
|
|
38
|
-
description: "
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
48
|
+
description: "You are a strict QA inspector for information clarity. Your job is to find confusing elements.\n" +
|
|
49
|
+
"Imagine you are a FIRST-TIME user of this app who has never seen it before.\n\n" +
|
|
50
|
+
"CHECK EACH ASPECT:\n" +
|
|
51
|
+
"1. FIRST IMPRESSION: Within 2 seconds of looking at this screen, can you tell what it does and what the main action is? If not, that is a problem.\n" +
|
|
52
|
+
"2. BUTTON LABELS: Read every button/link text. Would a first-time user understand what each does? 'Submit' is clearer than a bare icon.\n" +
|
|
53
|
+
"3. HIERARCHY: Is the most important element (title, CTA) visually the most prominent? Or is secondary info competing for attention?\n" +
|
|
54
|
+
"4. TEXT TRUNCATION: Is any text cut off with '...' or overflowing? Even one truncated label = deduction.\n" +
|
|
55
|
+
"5. CONTRAST: Is all text easily readable against its background? Check small/light text especially.\n" +
|
|
56
|
+
"6. ICON MEANING: Are there any icons without labels that could be ambiguous?\n\n" +
|
|
57
|
+
"SCORING ATTITUDE: If any single element is confusing, cap the score at 7. " +
|
|
58
|
+
"Multiple unclear elements = score 5 or below.\n" +
|
|
59
|
+
"NOTE: Do NOT evaluate spacing (layout), overlap (overlap), or color harmony (style).",
|
|
60
|
+
scoringGuide: "0-2: Screen purpose is unclear, CTA is missing/hidden, or labels are severely misleading.\n" +
|
|
61
|
+
"3-4: Core purpose is guessable but requires effort. Multiple ambiguous labels or icons.\n" +
|
|
62
|
+
"5-6: Generally understandable but has 1-2 confusing elements (ambiguous icon, truncated text, weak hierarchy).\n" +
|
|
63
|
+
"7-8: Clear and well-organized with only one very minor issue. First-time user would understand immediately.\n" +
|
|
64
|
+
"9-10: Crystal clear — perfect hierarchy, unambiguous labels, no truncation, excellent contrast. Every element self-explanatory.",
|
|
50
65
|
},
|
|
51
66
|
{
|
|
52
67
|
id: "style",
|
|
53
68
|
name: "Visual Style & Consistency",
|
|
54
|
-
description: "
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
"
|
|
69
|
+
description: "You are a strict QA inspector for visual design consistency. Your job is to find inconsistencies.\n" +
|
|
70
|
+
"Compare every element against every other element of the same type.\n\n" +
|
|
71
|
+
"CHECK EACH ASPECT:\n" +
|
|
72
|
+
"1. COLOR PALETTE: Count the number of distinct colors used. Do they feel intentional and harmonious, or random?\n" +
|
|
73
|
+
"2. TYPOGRAPHY: Are there more than 2 font sizes that don't follow a clear scale? Mixed font weights without reason?\n" +
|
|
74
|
+
"3. COMPONENT STYLING: Compare all buttons — same corner radius? Same padding? Compare all cards — same shadow, border, background?\n" +
|
|
75
|
+
"4. ICONOGRAPHY: Are all icons the same style (outline vs filled, same stroke width)? Mixed styles = deduction.\n" +
|
|
76
|
+
"5. POLISH: Does it look professionally designed or like a prototype? Placeholder content (e.g., 'Lorem ipsum', stock icons) = major deduction.\n\n" +
|
|
77
|
+
"SCORING ATTITUDE: Consistency is binary per element — if two buttons look different, they are inconsistent, period.\n" +
|
|
78
|
+
"NOTE: Do NOT evaluate text meaning (info_clarity), spatial layout (layout), or overlap (overlap).",
|
|
79
|
+
scoringGuide: "0-2: No design system — clashing colors, random fonts, inconsistent components everywhere.\n" +
|
|
80
|
+
"3-4: Some design intent visible but multiple clear inconsistencies (different button styles, mixed icon sets).\n" +
|
|
81
|
+
"5-6: Basic consistency exists but with noticeable deviations. 'Mostly OK' = 6 at best.\n" +
|
|
82
|
+
"7-8: Strong consistency with only 1 minor deviation requiring careful inspection.\n" +
|
|
83
|
+
"9-10: Pixel-perfect design system adherence. Every element cohesive. Extremely rare.",
|
|
66
84
|
},
|
|
67
85
|
{
|
|
68
86
|
id: "action_result",
|
|
69
87
|
name: "Action Result Verification",
|
|
70
|
-
description: "
|
|
71
|
-
"The step's expectedOutcome
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
"7-8: Action succeeded
|
|
83
|
-
"9-10: Action fully succeeded —
|
|
88
|
+
description: "You are a strict QA inspector verifying whether the action actually worked.\n" +
|
|
89
|
+
"The step's expectedOutcome describes what SHOULD have happened. Compare the screenshot against it.\n\n" +
|
|
90
|
+
"CHECK EACH ASPECT:\n" +
|
|
91
|
+
"1. SCREEN TRANSITION: If the action was a navigation tap, did the correct destination screen appear? Wrong screen = score 0.\n" +
|
|
92
|
+
"2. STATE CHANGE: If the action should toggle/add/remove something, is that change visually confirmed in the screenshot?\n" +
|
|
93
|
+
"3. ERROR PRESENCE: Are there any error dialogs, crash screens, or infinite loading spinners? These indicate failure.\n" +
|
|
94
|
+
"4. NO RESPONSE: Does the screen look identical to before the action? If so, the action likely missed or failed.\n\n" +
|
|
95
|
+
"SCORING ATTITUDE: If the expectedOutcome is not clearly achieved, score LOW. Partial success is still a problem.\n" +
|
|
96
|
+
"If this step is a pure observation (no expectedOutcome), score 10.",
|
|
97
|
+
scoringGuide: "0-2: Action clearly failed — wrong screen, error dialog, crash, or no UI response at all.\n" +
|
|
98
|
+
"3-4: Action had some effect but the result does not match expectedOutcome (e.g., navigated to wrong tab).\n" +
|
|
99
|
+
"5-6: Action partially achieved the goal but with unexpected side effects or missing expected elements.\n" +
|
|
100
|
+
"7-8: Action succeeded — the expected screen/state is present but with minor discrepancies.\n" +
|
|
101
|
+
"9-10: Action fully succeeded — screenshot exactly matches expectedOutcome. Or no expectedOutcome (pure observation).",
|
|
84
102
|
},
|
|
85
103
|
];
|
|
86
104
|
export const REQUIRED_DIMS = DIMENSIONS.map(d => d.id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checklist.js","sourceRoot":"","sources":["../../../src/evaluation/checklist.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"checklist.js","sourceRoot":"","sources":["../../../src/evaluation/checklist.ts"],"names":[],"mappings":"AAEA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAoB;IACvC;QACI,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,8BAA8B;QACpC,WAAW,EACP,8FAA8F;YAC9F,+EAA+E;YAC/E,iEAAiE;YACjE,0IAA0I;YAC1I,4FAA4F;YAC5F,sIAAsI;YACtI,gGAAgG;YAChG,8KAA8K;YAC9K,8EAA8E;YAC9E,yGAAyG;YACzG,iFAAiF;YACjF,6EAA6E;YAC7E,yFAAyF;YACzF,oGAAoG;QACxG,YAAY,EACR,6HAA6H;YAC7H,oHAAoH;YACpH,qIAAqI;YACrI,yHAAyH;YACzH,uJAAuJ;KAC9J;IACD;QACI,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,0BAA0B;QAChC,WAAW,EACP,2FAA2F;YAC3F,8DAA8D;YAC9D,sBAAsB;YACtB,2HAA2H;YAC3H,qJAAqJ;YACrJ,uKAAuK;YACvK,mJAAmJ;YACnJ,yIAAyI;YACzI,qFAAqF;YACrF,kHAAkH;QACtH,YAAY,EACR,0HAA0H;YAC1H,uGAAuG;YACvG,qJAAqJ;YACrJ,6GAA6G;YAC7G,qHAAqH;KAC5H;IACD;QACI,EAAE,EAAE,cAAc;QAClB,IAAI,EAAE,mCAAmC;QACzC,WAAW,EACP,kGAAkG;YAClG,iFAAiF;YACjF,sBAAsB;YACtB,sJAAsJ;YACtJ,2IAA2I;YAC3I,uIAAuI;YACvI,4GAA4G;YAC5G,uGAAuG;YACvG,kFAAkF;YAClF,4EAA4E;YAC5E,iDAAiD;YACjD,sFAAsF;QAC1F,YAAY,EACR,6FAA6F;YAC7F,2FAA2F;YAC3F,kHAAkH;YAClH,+GAA+G;YAC/G,iIAAiI;KACxI;IACD;QACI,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,4BAA4B;QAClC,WAAW,EACP,qGAAqG;YACrG,yEAAyE;YACzE,sBAAsB;YACtB,mHAAmH;YACnH,uHAAuH;YACvH,sIAAsI;YACtI,kHAAkH;YAClH,oJAAoJ;YACpJ,uHAAuH;YACvH,mGAAmG;QACvG,YAAY,EACR,8FAA8F;YAC9F,kHAAkH;YAClH,0FAA0F;YAC1F,qFAAqF;YACrF,sFAAsF;KAC7F;IACD;QACI,EAAE,EAAE,eAAe;QACnB,IAAI,EAAE,4BAA4B;QAClC,WAAW,EACP,+EAA+E;YAC/E,wGAAwG;YACxG,sBAAsB;YACtB,gIAAgI;YAChI,2HAA2H;YAC3H,wHAAwH;YACxH,qHAAqH;YACrH,oHAAoH;YACpH,oEAAoE;QACxE,YAAY,EACR,6FAA6F;YAC7F,6GAA6G;YAC7G,0GAA0G;YAC1G,8FAA8F;YAC9F,sHAAsH;KAC7H;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,CAAC"}
|