qfai 1.7.13 → 1.7.15

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.
Files changed (74) hide show
  1. package/README.md +35 -8
  2. package/assets/init/.qfai/assistant/agents/frontend-engineer.md +2 -2
  3. package/assets/init/.qfai/assistant/agents/product-experience-architect.md +2 -2
  4. package/assets/init/.qfai/assistant/agents/product-surface-reviewer.md +1 -1
  5. package/assets/init/.qfai/assistant/instructions/agent-selection.md +2 -0
  6. package/assets/init/.qfai/assistant/instructions/shared-skill-delegation-baseline.md +88 -0
  7. package/assets/init/.qfai/assistant/instructions/shared-skill-operating-baseline.md +49 -0
  8. package/assets/init/.qfai/assistant/skills/qfai-atdd/SKILL.md +28 -88
  9. package/assets/init/.qfai/assistant/skills/qfai-configure/SKILL.md +50 -114
  10. package/assets/init/.qfai/assistant/skills/qfai-discussion/SKILL.md +137 -208
  11. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/design-md-brand-catalog.md +90 -0
  12. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/discussion-completion-matrix.md +26 -0
  13. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/discussion-coverage-checklist.md +20 -0
  14. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/example-mapping-guide.md +18 -0
  15. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/oq-and-deferred-rules.md +41 -0
  16. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/review-cycle-playbook.md +22 -0
  17. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui-bearing-playbook.md +50 -0
  18. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/platform_baselines.md +107 -0
  19. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/review_audit_playbook.md +104 -0
  20. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/trend_scan_playbook.md +76 -0
  21. package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux_best_practices.md +143 -1005
  22. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/01_Context.md +9 -0
  23. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/03_Story-Workshop.md +1 -1
  24. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/04_Sources.md +83 -32
  25. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/14_Review-Request.md +7 -7
  26. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/prototyping.yaml +12 -4
  27. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/review/Rxx_reviewer.md +2 -2
  28. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/review/review_request.md +2 -2
  29. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/10_implementation_strategy.md +31 -13
  30. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/12_design_system.md +115 -0
  31. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/21_design_eval_trend_derived.md +86 -24
  32. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/23_design_eval_aggregate.md +12 -0
  33. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/40_screen_contracts.md +1 -1
  34. package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/50_review_input_bundle.md +2 -0
  35. package/assets/init/.qfai/assistant/skills/qfai-implement/SKILL.md +27 -27
  36. package/assets/init/.qfai/assistant/skills/qfai-prototyping/SKILL.md +145 -155
  37. package/assets/init/.qfai/assistant/skills/qfai-sdd/SKILL.md +118 -355
  38. package/assets/init/.qfai/assistant/skills/qfai-sdd/references/review-cycle-playbook.md +30 -0
  39. package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-execution-playbook.md +29 -0
  40. package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-phase-checklists.md +37 -0
  41. package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-quality-gate.md +32 -0
  42. package/assets/init/.qfai/assistant/skills/qfai-sdd/references/spec-traceability-rules.md +33 -0
  43. package/assets/init/.qfai/assistant/skills/qfai-verify/SKILL.md +50 -115
  44. package/assets/init/.qfai/assistant/steering/agent-catalog.yml +1 -1
  45. package/assets/init/.qfai/assistant/steering/agent-routing.yml +20 -8
  46. package/assets/init/.qfai/assistant/steering/manifest.md +4 -7
  47. package/assets/init/.qfai/assistant/steering/product.md +6 -6
  48. package/assets/init/.qfai/assistant/steering/review-profiles.yml +3 -0
  49. package/assets/init/.qfai/assistant/steering/ui-definition-protocol.md +7 -7
  50. package/assets/init/.qfai/contracts/README.md +15 -8
  51. package/assets/init/.qfai/contracts/ui/README.md +24 -26
  52. package/assets/init/.qfai/discussion/README.md +35 -32
  53. package/assets/init/.qfai/evidence/README.md +65 -181
  54. package/assets/init/.qfai/evidence/calibration.yaml +26 -0
  55. package/assets/init/.qfai/review/README.md +56 -11
  56. package/assets/init/.qfai/specs/README.md +2 -2
  57. package/assets/init/root/qfai.config.yaml +5 -6
  58. package/assets/scripts/capture-screenshots.js +128 -0
  59. package/assets/uix-rev/comparison-review.md +3 -15
  60. package/assets/uix-rev/contracts-review.md +5 -2
  61. package/assets/uix-rev/scoring-review.md +10 -2
  62. package/assets/uix-rev/strategy-review.md +11 -7
  63. package/dist/cli/index.cjs +8532 -4204
  64. package/dist/cli/index.cjs.map +1 -1
  65. package/dist/cli/index.mjs +8599 -4271
  66. package/dist/cli/index.mjs.map +1 -1
  67. package/dist/index.cjs +9808 -5532
  68. package/dist/index.cjs.map +1 -1
  69. package/dist/index.d.cts +467 -277
  70. package/dist/index.d.ts +467 -277
  71. package/dist/index.mjs +8909 -4647
  72. package/dist/index.mjs.map +1 -1
  73. package/package.json +1 -1
  74. package/assets/uix-rev/migration-review.md +0 -17
@@ -4,12 +4,21 @@
4
4
 
5
5
  ## UI-bearing Classification
6
6
 
7
+ Classification determines whether UI/UX sidecar artifacts are required.
8
+
7
9
  - ui_bearing: [true|false]
8
10
  - primary_surface: [web|mobile|desktop|cli|mixed|non-ui]
9
11
  - secondary_surfaces:
10
12
  - [optional]
11
13
  - classification_rationale: [Why this classification was chosen]
12
14
 
15
+ Notes:
16
+
17
+ - `primary_surface` is a classification field. Valid values: `web|mobile|desktop|cli|mixed|non-ui`.
18
+ - `non-ui` is only valid when `ui_bearing: false`. It is a classification value, not a prototyping surface.
19
+ - `cli` is a UI-bearing surface. When classified as `cli`, set `ui_bearing: true`.
20
+ - Prototyping surfaces (used in `prototyping.yaml`) are a subset: `web|mobile|desktop|cli|mixed`.
21
+
13
22
  ## Metadata
14
23
 
15
24
  | Key | Value |
@@ -73,7 +73,7 @@ Screen-level contract details are finalized in `uiux/40_screen_contracts.md`. Pr
73
73
  ## Appendix: Screen Mock — Optional Fallback (HTML+CSS)
74
74
 
75
75
  <!-- Optional fallback only — do not use as the primary UI definition artifact.
76
- Include only when it materially clarifies the selected direction.
76
+ Include only when it materially clarifies the selected anchor.
77
77
  Behavior Obligations and sidecar artifacts (uiux/) are the primary UI definitions.
78
78
  The required state SSOT is uiux/40_screen_contracts.md (`default/loading/empty/error`). -->
79
79
 
@@ -14,71 +14,122 @@
14
14
 
15
15
  ## Trend Scan
16
16
 
17
- ### Visual Tone Trends
17
+ ### user expectation / market norm
18
18
 
19
19
  #### Entry 1
20
20
 
21
21
  - reference: [Source name or URL]
22
- - observation: [What visual tone signal was observed]
23
- - freshness_date: YYYY-MM-DD
24
- - confidence: [high|medium|low]
25
- - source_translation: [How the signal translates into this project]
22
+ - observation: [What user expectation or market norm signal was observed]
23
+ - decision_connection: [How the signal translates into this project]
24
+ - evaluation_connection: [How the signal should be evaluated in design review]
26
25
  - local_implication: [What should change locally]
27
26
 
28
- ### Layout / Composition Trends
27
+ ### product neighbor / comparable flow
29
28
 
30
29
  #### Entry 1
31
30
 
32
31
  - reference: [Source name or URL]
33
- - observation: [What layout or composition signal was observed]
34
- - freshness_date: YYYY-MM-DD
35
- - confidence: [high|medium|low]
36
- - source_translation: [How the signal translates into this project]
32
+ - observation: [What comparable product or flow signal was observed]
33
+ - decision_connection: [How the signal translates into this project]
34
+ - evaluation_connection: [How the signal should be evaluated in design review]
37
35
  - local_implication: [What should change locally]
38
36
 
39
- ### Density / Hierarchy Trends
37
+ ### platform convention
40
38
 
41
39
  #### Entry 1
42
40
 
43
41
  - reference: [Source name or URL]
44
- - observation: [What density or hierarchy signal was observed]
45
- - freshness_date: YYYY-MM-DD
46
- - confidence: [high|medium|low]
47
- - source_translation: [How the signal translates into this project]
42
+ - observation: [What platform convention signal was observed]
43
+ - decision_connection: [How the signal translates into this project]
44
+ - evaluation_connection: [How the signal should be evaluated in design review]
48
45
  - local_implication: [What should change locally]
49
46
 
50
- ### Interaction / Motion Trends
47
+ ### accessibility / compliance relevant signal
51
48
 
52
49
  #### Entry 1
53
50
 
54
51
  - reference: [Source name or URL]
55
- - observation: [What interaction or motion signal was observed]
56
- - freshness_date: YYYY-MM-DD
57
- - confidence: [high|medium|low]
58
- - source_translation: [How the signal translates into this project]
52
+ - observation: [What accessibility or compliance signal was observed]
53
+ - decision_connection: [How the signal translates into this project]
54
+ - evaluation_connection: [How the signal should be evaluated in design review]
59
55
  - local_implication: [What should change locally]
60
56
 
61
- ### Component Styling Trends
57
+ ### color
62
58
 
63
59
  #### Entry 1
64
60
 
61
+ - source_id: [SRC-ID from Source Registry]
65
62
  - reference: [Source name or URL]
66
- - observation: [What component styling signal was observed]
67
- - freshness_date: YYYY-MM-DD
68
- - confidence: [high|medium|low]
69
- - source_translation: [How the signal translates into this project]
70
- - local_implication: [What should change locally]
63
+ - observation: [What color trend or signal was observed]
64
+ - decision_connection: [How the color signal translates into this project]
65
+ - evaluation_connection: [Which TRD-XX axis evaluates this color signal; leave blank to trigger UIX-VAL-T01]
66
+ - local_implication: [What color choices should change locally]
71
67
 
72
- ### Stale / Overused AI Slop Patterns
68
+ ### typography
73
69
 
74
70
  #### Entry 1
75
71
 
72
+ - source_id: [SRC-ID from Source Registry]
76
73
  - reference: [Source name or URL]
77
- - observation: [What stale pattern should be avoided]
78
- - freshness_date: YYYY-MM-DD
79
- - confidence: [high|medium|low]
80
- - source_translation: [Why this stale pattern is relevant to avoid here]
81
- - local_implication: [What should be explicitly avoided locally]
74
+ - observation: [What typographic trend or signal was observed]
75
+ - decision_connection: [How the typography signal translates into this project]
76
+ - evaluation_connection: [Which TRD-XX axis evaluates this typography signal; leave blank to trigger UIX-VAL-T01]
77
+ - local_implication: [What typeface or scale choices should change locally]
78
+
79
+ ### Visual
80
+
81
+ #### Entry 1
82
+
83
+ - source_id: [SRC-ID from Source Registry]
84
+ - reference: [Source name or URL]
85
+ - observation: [What visual motif trend or signal was observed]
86
+ - decision_connection: [How the visual motif translates into this project]
87
+ - evaluation_connection: [Which TRD-XX axis evaluates this visual motif; leave blank to trigger UIX-VAL-T01]
88
+ - local_implication: [What visual motif choices should change locally]
89
+
90
+ ### spacing
91
+
92
+ #### Entry 1
93
+
94
+ - source_id: [SRC-ID from Source Registry]
95
+ - reference: [Source name or URL]
96
+ - observation: [What spacing convention or density trend was observed]
97
+ - decision_connection: [How the spacing signal translates into this project]
98
+ - evaluation_connection: [Which TRD-XX axis evaluates this spacing signal; leave blank to trigger UIX-VAL-T01]
99
+ - local_implication: [What spacing or density choices should change locally]
100
+
101
+ ### shape
102
+
103
+ #### Entry 1
104
+
105
+ - source_id: [SRC-ID from Source Registry]
106
+ - reference: [Source name or URL]
107
+ - observation: [What shape language trend was observed (border-radius, geometric vs organic, etc.)]
108
+ - decision_connection: [How the shape language translates into this project]
109
+ - evaluation_connection: [Which TRD-XX axis evaluates this shape signal; leave blank to trigger UIX-VAL-T01]
110
+ - local_implication: [What shape-language choices should change locally]
111
+
112
+ ### imagery
113
+
114
+ #### Entry 1
115
+
116
+ - source_id: [SRC-ID from Source Registry]
117
+ - reference: [Source name or URL]
118
+ - observation: [What imagery or illustration style trend was observed]
119
+ - decision_connection: [How the imagery signal translates into this project]
120
+ - evaluation_connection: [Which TRD-XX axis evaluates this imagery signal; leave blank to trigger UIX-VAL-T01]
121
+ - local_implication: [What imagery or illustration choices should change locally]
122
+
123
+ ### design_guideline_research
124
+
125
+ #### Entry 1
126
+
127
+ - source_id: [SRC-ID from Source Registry]
128
+ - guideline_name: [Applicable platform or library guideline family]
129
+ - rule_refs:
130
+ - [Specific rule or section reference]
131
+ - local_translation: [How the guideline changes this project's local design decisions]
132
+ - evidence: [Concrete note, screenshot, or doc excerpt reference supporting the translation]
82
133
 
83
134
  ## Competitive Reference Registry
84
135
 
@@ -37,22 +37,22 @@
37
37
  - Mermaid diagrams use ` ```mermaid ` fences only
38
38
  - Strategy alignment and chosen_option consistency (when UI-bearing)
39
39
  - Taste reflection completeness and clarity (when UI-bearing)
40
- - Trend scan freshness and source translation quality (when UI-bearing)
40
+ - Trend scan freshness and evidence traceability (when UI-bearing)
41
41
  - 3-layer axes evaluation quality and traceability (when UI-bearing)
42
42
  - Option comparison integrity (when UI-bearing)
43
- - Selected anchor screen clarity and direction justification (when UI-bearing)
43
+ - Selected anchor screen clarity and anchor justification (when UI-bearing)
44
44
  - Screen contract sufficiency and strong schema completeness (when UI-bearing)
45
45
  - Generic fallback risk — ensure no unreviewed generic/placeholder UI remains (when UI-bearing)
46
46
  - OQ register exit condition (open count = 0)
47
47
  - Deferred items have full metadata
48
48
 
49
- ## Selected Direction Consistency
49
+ ## Selected Anchor Consistency
50
50
 
51
51
  <!-- Required for UI-bearing packs. Verifies sidecar-family alignment. -->
52
52
 
53
- - Selected direction: verify `uiux/31_selected_anchor_screen.md` Selected Direction is populated and references a compared option from `uiux/30_option_comparison.md`
54
- - Strategy alignment: verify `uiux/10_implementation_strategy.md` aligns with the selected direction in `uiux/31_selected_anchor_screen.md`
55
- - Evaluation traceability: verify selected direction rationale aligns with 3-layer evaluation family (20/21/22/23 + optional 24)
53
+ - Selected anchor: verify `uiux/31_selected_anchor_screen.md` selected anchor is populated and references a compared option from `uiux/30_option_comparison.md`
54
+ - Strategy alignment: verify `uiux/10_implementation_strategy.md` aligns with the selected anchor in `uiux/31_selected_anchor_screen.md`
55
+ - Evaluation traceability: verify selected anchor rationale aligns with 3-layer evaluation family (20/21/22/23 + optional 24)
56
56
 
57
57
  ## Sidecar Artifact Review Scope
58
58
 
@@ -62,7 +62,7 @@
62
62
  - Verify uiux/10_implementation_strategy.md strict canonical schema is complete
63
63
  - Verify scoring axes have evaluation criteria and measurement approaches
64
64
  - Verify option comparison covers 2+ options against all scoring axes in `uiux/30_option_comparison.md`
65
- - Verify `uiux/31_selected_anchor_screen.md` Selected Direction references a compared option
65
+ - Verify `uiux/31_selected_anchor_screen.md` selected anchor references a compared option
66
66
  - Verify `uiux/24_design_eval_dynamic_overrides.md` has documented override rules
67
67
  - Verify screen contracts use nested strong schema with all 4 required states (default/loading/empty/error) and treat `uiux/40_screen_contracts.md` as the state SSOT
68
68
 
@@ -1,9 +1,17 @@
1
1
  prototyping:
2
- recommended_mode: standard
2
+ recommended_mode: full-harness
3
3
  rationale: >
4
- Fill this with a concrete reason tied to evidence obligations.
4
+ Fill this with a concrete reason tied to the full-harness evidence obligations.
5
5
  allowed_modes:
6
- - low-cost
7
- - standard
8
6
  - full-harness
7
+ # Replace `web` with one of the prototyping-supported surfaces if needed:
8
+ # web | mobile | desktop | mixed
9
+ # (discussion classification also allows `cli` and `non-ui`, but those are
10
+ # not valid prototyping execution surfaces; see
11
+ # `packages/qfai/src/core/prototyping/surfacePolicy.ts` — PROTOTYPING_SUPPORTED_SURFACES.)
9
12
  surface: web
13
+ mode_expectations:
14
+ full-harness:
15
+ expected_iterations: "2+"
16
+ process: "measure -> score -> fix code -> re-run"
17
+ calibration_ref: "qfai.config.yaml#prototyping.calibration"
@@ -14,9 +14,9 @@
14
14
  - [ ] Mermaid diagrams are sufficient for decisions (scope/AC/risk consistency)
15
15
  - [ ] Mermaid diagrams use ` ```mermaid ` fences only
16
16
  - [ ] Taste interview completeness (when UI-bearing)
17
- - [ ] Trend freshness and translation quality (when UI-bearing)
17
+ - [ ] Trend freshness and evidence traceability (when UI-bearing)
18
18
  - [ ] 3-layer evaluation quality and traceability (when UI-bearing)
19
- - [ ] Option comparison integrity and selected direction clarity (when UI-bearing)
19
+ - [ ] Option comparison integrity and selected anchor clarity (when UI-bearing)
20
20
  - [ ] Strong screen contract completeness (when UI-bearing)
21
21
  - [ ] OQ register exit condition (open count = 0)
22
22
  - [ ] Deferred items have full metadata
@@ -23,9 +23,9 @@
23
23
  - Security/operations risks are reflected in diagrams where relevant
24
24
  - Mermaid diagrams use ` ```mermaid ` fences only (no ` ```text ` or language-less fences)
25
25
  - Taste interview completeness and clarity (when UI-bearing)
26
- - Trend freshness and source translation quality (when UI-bearing)
26
+ - Trend freshness and evidence traceability (when UI-bearing)
27
27
  - 3-layer evaluation quality and traceability (when UI-bearing)
28
- - Option comparison integrity and selected direction clarity (when UI-bearing)
28
+ - Option comparison integrity and selected anchor clarity (when UI-bearing)
29
29
  - Strong screen contract completeness (when UI-bearing)
30
30
  - OQ register exit condition (open count = 0)
31
31
  - Deferred items have full metadata in `13_Deferred.md`
@@ -1,20 +1,38 @@
1
1
  # Implementation Strategy
2
2
 
3
- ## Strategy Definition
3
+ ## Surface
4
4
 
5
- <!-- Use exactly one canonical strategy block. -->
5
+ - surface: web
6
6
 
7
- ### Strategy
7
+ ## Selection Requirement
8
8
 
9
- - surface: [web|mobile|desktop|cli|mixed|non-ui]
10
- - decision: [template|component-library|design-system|native-pattern|bespoke|none]
11
- - why_this_strategy: [Why this strategy is the right fit for the current product and surface]
12
- - expected_strengths: [Concrete strengths expected from this strategy]
13
- - known_risks: [Concrete risks, failure modes, or tradeoffs]
14
- - fit_for_this_product: [Why this strategy matches the actual product context]
9
+ - selection_required: true
15
10
 
16
- ## Constraints
11
+ ## Decision
17
12
 
18
- - Use only the canonical enum values shown above.
19
- - Do not add legacy keys or freeform alternative enums.
20
- - Keep the strategy aligned with `01_Context.md` classification and `31_selected_anchor_screen.md`.
13
+ - decision: component-library
14
+
15
+ ## Candidate Options
16
+
17
+ - candidate_options:
18
+ - component-library
19
+ - bespoke
20
+
21
+ ## Chosen Option
22
+
23
+ - chosen_option: component-library
24
+
25
+ ## Rationale
26
+
27
+ - rationale:
28
+ - Existing design-system alignment is more valuable than bespoke variance.
29
+
30
+ ## Verification Expectations
31
+
32
+ - verification_expectations:
33
+ - Primary tasks remain obvious without generic dashboard drift.
34
+
35
+ ## Notes for Reviewer
36
+
37
+ - notes_for_reviewer:
38
+ - Check that the selected anchor stays aligned with the anchor screen and screen contracts.
@@ -0,0 +1,115 @@
1
+ # Design System
2
+
3
+ <!-- REQUIRED FIELDS — fill each section; do not leave bodies empty -->
4
+
5
+ ## Visual Theme
6
+
7
+ <!-- Describe the overall design aesthetic and brand personality.
8
+ Required: archetype label (from design-md-brand-catalog), rationale, 1–2 guiding adjectives. -->
9
+
10
+ - archetype: [e.g., Minimal / Bold / Corporate / Playful / Organic / Tech / Elegant / Casual]
11
+ - rationale: [Why this archetype fits the product and target users]
12
+ - guiding_adjectives:
13
+ - [first adjective]
14
+ - [second adjective]
15
+
16
+ ## Color Palette
17
+
18
+ <!-- Define the primary, secondary, and semantic color tokens.
19
+ Required: at least 3 named colors with hex values and usage notes. -->
20
+
21
+ - primary:
22
+ - name: [token name, e.g., brand-blue]
23
+ - hex: [#XXXXXX]
24
+ - usage: [where this color appears]
25
+ - secondary:
26
+ - name: [token name]
27
+ - hex: [#XXXXXX]
28
+ - usage: [where this color appears]
29
+ - semantic:
30
+ - success: [#XXXXXX]
31
+ - warning: [#XXXXXX]
32
+ - error: [#XXXXXX]
33
+ - info: [#XXXXXX]
34
+
35
+ ## Typography
36
+
37
+ <!-- Define typeface choices, scale, and usage rules.
38
+ Required: heading typeface, body typeface, base size, scale rationale. -->
39
+
40
+ - heading_typeface: [e.g., Inter, Playfair Display]
41
+ - body_typeface: [e.g., Inter, Noto Sans]
42
+ - base_size: [e.g., 16px / 1rem]
43
+ - scale_ratio: [e.g., 1.25 — Major Third]
44
+ - usage_rules:
45
+ - [rule 1, e.g., "H1 only for page titles; max one per page"]
46
+ - [rule 2]
47
+
48
+ ## Spacing & Layout
49
+
50
+ <!-- Define the spacing unit system, grid, and common layout patterns.
51
+ Required: base unit, grid columns, gutter, common spacing tokens. -->
52
+
53
+ - base_unit: [e.g., 4px or 8px]
54
+ - grid_columns: [e.g., 12]
55
+ - gutter: [e.g., 24px]
56
+ - tokens:
57
+ - xs: [e.g., 4px]
58
+ - sm: [e.g., 8px]
59
+ - md: [e.g., 16px]
60
+ - lg: [e.g., 24px]
61
+ - xl: [e.g., 48px]
62
+
63
+ ## Component Style
64
+
65
+ <!-- Describe the visual treatment of core UI components (buttons, inputs, cards, etc.).
66
+ Required: border-radius philosophy, shadow level, interactive state rules. -->
67
+
68
+ - border_radius: [e.g., 4px for inputs, 8px for cards, 24px for pills]
69
+ - shadow_level: [e.g., flat / subtle / elevated — explain the use case for each]
70
+ - interactive_states:
71
+ - hover: [description]
72
+ - focus: [description, e.g., 2px offset ring in brand-blue]
73
+ - disabled: [description, e.g., 40% opacity]
74
+ - density: [e.g., comfortable / compact — which default and why]
75
+
76
+ ## Animation & Motion
77
+
78
+ <!-- Define motion principles, duration, and easing used across the product.
79
+ Required: motion intent, base duration, easing curve, guidance on when to avoid animation. -->
80
+
81
+ - intent: [e.g., "Motion should feel purposeful and guide attention; never decorative."]
82
+ - base_duration_ms: [e.g., 200]
83
+ - easing: [e.g., ease-out cubic-bezier(0.0, 0.0, 0.2, 1)]
84
+ - reduced_motion_policy: [e.g., "Respect prefers-reduced-motion; all transitions become instant."]
85
+ - avoid_when:
86
+ - [scenario where animation would harm UX]
87
+
88
+ ## Do's and Don'ts
89
+
90
+ <!-- Provide explicit guidance on what to do and what to avoid.
91
+ Required: at least 3 Do items and 3 Don't items. -->
92
+
93
+ ### Do
94
+
95
+ - [Do: use the primary color only for primary call-to-action elements]
96
+ - [Do: maintain a minimum 4.5:1 contrast ratio on all body text]
97
+ - [Do: use spacing tokens from the defined scale — no ad-hoc pixel values]
98
+
99
+ ### Don't
100
+
101
+ - [Don't: use more than 3 typeface weights on a single screen]
102
+ - [Don't: apply shadow to elements that are already on a elevated surface]
103
+ - [Don't: animate decoratively; every motion must have a functional purpose]
104
+
105
+ ## Agent Implementation Guide
106
+
107
+ <!-- Instructions for the AI agent implementing this design system.
108
+ Required: derivation rules, how to handle ambiguity, where to read and write design tokens. -->
109
+
110
+ - derivation_rules:
111
+ - [rule 1: how to select an archetype from the brand catalog]
112
+ - [rule 2: how to resolve conflicts between archetype defaults and product-specific overrides]
113
+ - token_source: [where the authoritative token file lives, e.g., tokens/design-tokens.json]
114
+ - ambiguity_policy: [e.g., "When a value is unspecified, prefer the archetype default; log a TODO for review."]
115
+ - validation_reference: UIX-VAL-DS02 (required sections) and UIX-VAL-DS01 (presence check)
@@ -5,42 +5,104 @@
5
5
  - Layer: trend-derived
6
6
  - Source: Industry trend analysis and research synthesis
7
7
 
8
+ ## Source Refs Authoring Guidance
9
+
10
+ <!-- Each axis MUST include a `source_refs` list pointing to entries in `04_Sources.md`.
11
+ Use the `source_id` values from `04_Sources.md` Source Registry (e.g., SRC-0001).
12
+ For visual-category Trend Scan entries (color, typography, visual motif, spacing, shape, imagery),
13
+ at least one visual TRD-XX axis MUST reference those entries via `source_refs`;
14
+ omitting this will trigger UIX-VAL-T04 at validation time. -->
15
+
16
+ ## Score Anchor Guidance
17
+
18
+ - Every `score_anchors.low`, `score_anchors.mid`, and `score_anchors.high` entry MUST include a quantitative proxy, not adjectives alone.
19
+ - Acceptable quantitative proxies include concrete values such as `44px` target size, contrast `ratio`, `WCAG` level, modular scale steps, explicit `class name`, or a measurable `default value`.
20
+ - Adjective-only anchors such as "modern", "polished", or "clean" without a measurable proxy are non-compliant and will trigger downstream warning `UIX-VAL-T06`.
21
+
8
22
  ## Axes
9
23
 
10
- ### Axis: [TRD-01]
24
+ <!-- VISUAL AXIS EXAMPLE 1: Visual Warmth & Color Harmony
25
+ Derive axes like this from color / imagery Trend Scan entries in 04_Sources.md. -->
26
+
27
+ ### Axis: TRD-V01 — Visual Warmth & Color Harmony
11
28
 
12
- - axis_id: TRD-01
13
- - axis_name: [e.g., Progressive Disclosure]
29
+ - axis_id: TRD-V01
30
+ - axis_name: Visual Warmth & Color Harmony
14
31
  - layer: trend-derived
15
- - origin: [research source / industry trend]
16
- - intent: [what this axis measures]
17
- - why_it_matters: [business/user impact]
32
+ - visual_category: true
33
+ - origin: Color and imagery trend scan entries identifying warmth-dominant palettes in the competitor set
34
+ - intent: Measures whether the product's color palette conveys appropriate warmth and emotional resonance relative to current visual trends
35
+ - why_it_matters: Color harmony directly impacts brand trust and perceived quality; misaligned warmth signals confuse users about product positioning
18
36
  - score_scale: 1-5
19
37
  - score_anchors:
20
- - low: [1 — description of poor performance]
21
- - mid: [3 — description of acceptable performance]
22
- - high: [5 — description of excellent performance]
38
+ - low: 1 — Accent/background pair falls below 3:1 contrast or uses more than 3 conflicting hue families on one screen
39
+ - mid: 3 — Primary palette keeps a consistent 2-hue system and semantic colors stay within one temperature family
40
+ - high: 5 — Palette maintains semantic consistency across screens with 4.5:1 contrast and no off-brand hue drift
23
41
  - positive_signals:
24
- - [signal that indicates good performance]
42
+ - Accent hue and background hue share a harmonious temperature relationship
43
+ - Semantic colors (success, warning, error) do not break the palette's tonal identity
25
44
  - negative_signals:
26
- - [signal that indicates poor performance]
45
+ - Warm accent on a cool-dominant background without intentional contrast rationale
46
+ - Multiple conflicting temperature signals on the same screen
27
47
  - anti_patterns:
28
- - [anti-pattern to avoid]
29
- - evidence_required: [what evidence must be gathered]
30
- - weight: [e.g., 0.15]
31
- - minimum_floor: [minimum acceptable score]
48
+ - Copying a competitor's palette verbatim without evaluating fit
49
+ - evidence_required: Screenshot comparison of primary screen against 3 archetype references from brand catalog
50
+ - weight: 0.20
51
+ - minimum_floor: 2
32
52
  - source_refs:
33
- - [research source with freshness_date and confidence]
53
+ - [SRC-ID of color Trend Scan entry — replace with actual source_id from 04_Sources.md]
54
+ - [SRC-ID of imagery Trend Scan entry if applicable]
55
+ - goal_refs:
56
+ - [project goal this axis supports, e.g., REQ-0010]
57
+ - review_questions:
58
+ - Does the color palette feel intentionally warm or cool relative to the selected brand archetype?
59
+ - Are there any unintentional temperature conflicts between primary and secondary colors?
60
+
61
+ <!-- VISUAL AXIS EXAMPLE 2: Typographic Legibility & Trend Alignment
62
+ Derive axes like this from typography Trend Scan entries in 04_Sources.md. -->
63
+
64
+ ### Axis: TRD-V02 — Typographic Legibility & Trend Alignment
65
+
66
+ - axis_id: TRD-V02
67
+ - axis_name: Typographic Legibility & Trend Alignment
68
+ - layer: trend-derived
69
+ - visual_category: true
70
+ - origin: Typography trend scan entries from 04_Sources.md capturing current typeface conventions
71
+ - intent: Measures whether the product's typeface choices meet legibility standards while reflecting contemporary typographic trends
72
+ - why_it_matters: Poor legibility harms conversion and trust; typographic misalignment signals a dated or unpolished product
73
+ - score_scale: 1-5
74
+ - score_anchors:
75
+ - low: 1 — Body text drops below 14px or fails WCAG AA contrast on primary routes
76
+ - mid: 3 — Body text stays at 16px with a consistent heading/body pairing on core screens
77
+ - high: 5 — Body text remains 16px+, uses a 1.25 modular ratio, and passes WCAG AA across all defined states
78
+ - positive_signals:
79
+ - Typeface pairing (heading + body) is harmonious with the selected brand archetype
80
+ - Base font size 16px or larger on body text
81
+ - negative_signals:
82
+ - Light-weight type on low-contrast background
83
+ - More than 3 font weights in active use on a single screen
84
+ - anti_patterns:
85
+ - Using display fonts at body sizes
86
+ - Mixing incompatible style epochs (e.g., humanist + mechanical geometric)
87
+ - evidence_required: Rendered type specimen at H1 / H2 / Body / Caption scale with contrast ratio measurements
88
+ - weight: 0.15
89
+ - minimum_floor: 2
90
+ - source_refs:
91
+ - [SRC-ID of typography Trend Scan entry — replace with actual source_id from 04_Sources.md]
34
92
  - goal_refs:
35
93
  - [project goal this axis supports]
36
94
  - review_questions:
37
- - [question for reviewer]
95
+ - Does the typeface pairing match the brand archetype aesthetic_properties for typography?
96
+ - Does body text pass WCAG AA contrast at all defined color/background combinations?
38
97
 
39
- ### Axis: [TRD-02]
98
+ <!-- Add additional TRD-XX axes below following the same schema.
99
+ For non-visual axes, omit the `visual_category: true` field or set it to false. -->
40
100
 
41
- <!-- Repeat the schema above for each trend-derived axis -->
101
+ ### Axis: [TRD-03]
42
102
 
43
- - axis_id: TRD-02
103
+ <!-- Repeat the schema above for each additional trend-derived axis -->
104
+
105
+ - axis_id: TRD-03
44
106
  - axis_name: [axis name]
45
107
  - layer: trend-derived
46
108
  - origin: [source]
@@ -48,9 +110,9 @@
48
110
  - why_it_matters: [impact]
49
111
  - score_scale: 1-5
50
112
  - score_anchors:
51
- - low: [1 — poor]
52
- - mid: [3 — acceptable]
53
- - high: [5 — excellent]
113
+ - low: [1 — poor with a measurable quantitative proxy]
114
+ - mid: [3 — acceptable with a measurable quantitative proxy]
115
+ - high: [5 — excellent with a measurable quantitative proxy]
54
116
  - positive_signals:
55
117
  - [signal]
56
118
  - negative_signals:
@@ -61,7 +123,7 @@
61
123
  - weight: [weight]
62
124
  - minimum_floor: [floor]
63
125
  - source_refs:
64
- - [ref]
126
+ - [SRC-ID from 04_Sources.md Source Registry]
65
127
  - goal_refs:
66
128
  - [ref]
67
129
  - review_questions:
@@ -39,3 +39,15 @@ This file defines how scores from invariant, trend-derived, and product-specific
39
39
  - Product-specific axes: `22_design_eval_product_specific.md`
40
40
  - Dynamic overrides (optional): `24_design_eval_dynamic_overrides.md`
41
41
  - Option comparison: `30_option_comparison.md`
42
+
43
+ ## Score Scope Limitation
44
+
45
+ **IMPORTANT**: Scores produced by this aggregate evaluation measure **design direction quality** — i.e., how well each design option satisfies the evaluation criteria for option comparison and selection.
46
+
47
+ These scores are **NOT** implementation quality scores. When the selected design direction proceeds to `/qfai-prototyping` in full-harness mode:
48
+
49
+ - Prototyping evaluates **implementation fidelity** against the selected anchor.
50
+ - Prototyping uses its own scoring criteria (calibration baselines, dimension weights).
51
+ - Discussion aggregate scores MUST NOT be copied into `fullHarness.scoringTrace`.
52
+
53
+ The boundary is: discussion scores inform the **what** (which direction); prototyping scores measure the **how well** (implementation quality).
@@ -32,7 +32,7 @@ Draft interaction contracts for key screens using the strong screen contract sch
32
32
  - notes_for_verify: [notes for verification/testing]
33
33
  - notes_for_reviewer: [any additional context for the reviewer]
34
34
 
35
- <!-- Nested list format is canonical for primary_tasks, secondary_tasks, required_states, transitions, observable_outcomes. Inline CSV is accepted for backward compatibility. -->
35
+ <!-- Nested list format is canonical for primary_tasks, secondary_tasks, required_states, transitions, observable_outcomes. -->
36
36
 
37
37
  > **Note:** `required_states` primary truth lives in this file. Each screen's state set is authoritative here.
38
38
  > **Note:** `secondary_tasks` documents non-primary user workflows available on the screen.
@@ -26,11 +26,13 @@ Consolidate all sidecar artifacts into a review-ready bundle for design reviewer
26
26
  - Required trend categories are all present and complete.
27
27
  - Stale / overused AI slop patterns are explicitly avoided.
28
28
  - Trend research is translated into scoring, comparison, and selected anchor decisions.
29
+ - Scoring-ready axes use canonical fields: `origin`, `layer`, `source_refs`, `goal_refs`, `evidence_required`, `review_questions`.
29
30
 
30
31
  ## Review Checklist
31
32
 
32
33
  - [ ] Strategy aligns with surface type and project constraints
33
34
  - [ ] Trend categories are complete and translated into local design decisions
34
35
  - [ ] Competitive references include adopted_points, rejected_points, and local_translation
36
+ - [ ] Scoring-ready axes expose canonical fields including origin/source_refs/goal_refs/evidence_required/review_questions
35
37
  - [ ] Selected anchor clearly documents rationale and downstream implications
36
38
  - [ ] Screen contracts cover all required states