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.
- package/README.md +35 -8
- package/assets/init/.qfai/assistant/agents/frontend-engineer.md +2 -2
- package/assets/init/.qfai/assistant/agents/product-experience-architect.md +2 -2
- package/assets/init/.qfai/assistant/agents/product-surface-reviewer.md +1 -1
- package/assets/init/.qfai/assistant/instructions/agent-selection.md +2 -0
- package/assets/init/.qfai/assistant/instructions/shared-skill-delegation-baseline.md +88 -0
- package/assets/init/.qfai/assistant/instructions/shared-skill-operating-baseline.md +49 -0
- package/assets/init/.qfai/assistant/skills/qfai-atdd/SKILL.md +28 -88
- package/assets/init/.qfai/assistant/skills/qfai-configure/SKILL.md +50 -114
- package/assets/init/.qfai/assistant/skills/qfai-discussion/SKILL.md +137 -208
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/design-md-brand-catalog.md +90 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/discussion-completion-matrix.md +26 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/discussion-coverage-checklist.md +20 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/example-mapping-guide.md +18 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/oq-and-deferred-rules.md +41 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/review-cycle-playbook.md +22 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui-bearing-playbook.md +50 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/platform_baselines.md +107 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/review_audit_playbook.md +104 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux/trend_scan_playbook.md +76 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/references/ui_ux_best_practices.md +143 -1005
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/01_Context.md +9 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/03_Story-Workshop.md +1 -1
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/04_Sources.md +83 -32
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/14_Review-Request.md +7 -7
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/prototyping.yaml +12 -4
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/review/Rxx_reviewer.md +2 -2
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/review/review_request.md +2 -2
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/10_implementation_strategy.md +31 -13
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/12_design_system.md +115 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/21_design_eval_trend_derived.md +86 -24
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/23_design_eval_aggregate.md +12 -0
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/40_screen_contracts.md +1 -1
- package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/50_review_input_bundle.md +2 -0
- package/assets/init/.qfai/assistant/skills/qfai-implement/SKILL.md +27 -27
- package/assets/init/.qfai/assistant/skills/qfai-prototyping/SKILL.md +145 -155
- package/assets/init/.qfai/assistant/skills/qfai-sdd/SKILL.md +118 -355
- package/assets/init/.qfai/assistant/skills/qfai-sdd/references/review-cycle-playbook.md +30 -0
- package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-execution-playbook.md +29 -0
- package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-phase-checklists.md +37 -0
- package/assets/init/.qfai/assistant/skills/qfai-sdd/references/sdd-quality-gate.md +32 -0
- package/assets/init/.qfai/assistant/skills/qfai-sdd/references/spec-traceability-rules.md +33 -0
- package/assets/init/.qfai/assistant/skills/qfai-verify/SKILL.md +50 -115
- package/assets/init/.qfai/assistant/steering/agent-catalog.yml +1 -1
- package/assets/init/.qfai/assistant/steering/agent-routing.yml +20 -8
- package/assets/init/.qfai/assistant/steering/manifest.md +4 -7
- package/assets/init/.qfai/assistant/steering/product.md +6 -6
- package/assets/init/.qfai/assistant/steering/review-profiles.yml +3 -0
- package/assets/init/.qfai/assistant/steering/ui-definition-protocol.md +7 -7
- package/assets/init/.qfai/contracts/README.md +15 -8
- package/assets/init/.qfai/contracts/ui/README.md +24 -26
- package/assets/init/.qfai/discussion/README.md +35 -32
- package/assets/init/.qfai/evidence/README.md +65 -181
- package/assets/init/.qfai/evidence/calibration.yaml +26 -0
- package/assets/init/.qfai/review/README.md +56 -11
- package/assets/init/.qfai/specs/README.md +2 -2
- package/assets/init/root/qfai.config.yaml +5 -6
- package/assets/scripts/capture-screenshots.js +128 -0
- package/assets/uix-rev/comparison-review.md +3 -15
- package/assets/uix-rev/contracts-review.md +5 -2
- package/assets/uix-rev/scoring-review.md +10 -2
- package/assets/uix-rev/strategy-review.md +11 -7
- package/dist/cli/index.cjs +8532 -4204
- package/dist/cli/index.cjs.map +1 -1
- package/dist/cli/index.mjs +8599 -4271
- package/dist/cli/index.mjs.map +1 -1
- package/dist/index.cjs +9808 -5532
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +467 -277
- package/dist/index.d.ts +467 -277
- package/dist/index.mjs +8909 -4647
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- 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
|
|
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
|
-
###
|
|
17
|
+
### user expectation / market norm
|
|
18
18
|
|
|
19
19
|
#### Entry 1
|
|
20
20
|
|
|
21
21
|
- reference: [Source name or URL]
|
|
22
|
-
- observation: [What
|
|
23
|
-
-
|
|
24
|
-
-
|
|
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
|
-
###
|
|
27
|
+
### product neighbor / comparable flow
|
|
29
28
|
|
|
30
29
|
#### Entry 1
|
|
31
30
|
|
|
32
31
|
- reference: [Source name or URL]
|
|
33
|
-
- observation: [What
|
|
34
|
-
-
|
|
35
|
-
-
|
|
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
|
-
###
|
|
37
|
+
### platform convention
|
|
40
38
|
|
|
41
39
|
#### Entry 1
|
|
42
40
|
|
|
43
41
|
- reference: [Source name or URL]
|
|
44
|
-
- observation: [What
|
|
45
|
-
-
|
|
46
|
-
-
|
|
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
|
-
###
|
|
47
|
+
### accessibility / compliance relevant signal
|
|
51
48
|
|
|
52
49
|
#### Entry 1
|
|
53
50
|
|
|
54
51
|
- reference: [Source name or URL]
|
|
55
|
-
- observation: [What
|
|
56
|
-
-
|
|
57
|
-
-
|
|
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
|
-
###
|
|
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
|
|
67
|
-
-
|
|
68
|
-
-
|
|
69
|
-
-
|
|
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
|
-
###
|
|
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
|
|
78
|
-
-
|
|
79
|
-
-
|
|
80
|
-
-
|
|
81
|
-
|
|
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
|
|
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
|
|
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
|
|
49
|
+
## Selected Anchor Consistency
|
|
50
50
|
|
|
51
51
|
<!-- Required for UI-bearing packs. Verifies sidecar-family alignment. -->
|
|
52
52
|
|
|
53
|
-
- Selected
|
|
54
|
-
- Strategy alignment: verify `uiux/10_implementation_strategy.md` aligns with the selected
|
|
55
|
-
- Evaluation traceability: verify selected
|
|
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`
|
|
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:
|
|
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
|
|
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
|
|
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
|
package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/review/review_request.md
CHANGED
|
@@ -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
|
|
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
|
|
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
|
-
##
|
|
3
|
+
## Surface
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- surface: web
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Selection Requirement
|
|
8
8
|
|
|
9
|
-
-
|
|
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
|
-
##
|
|
11
|
+
## Decision
|
|
17
12
|
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
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-
|
|
13
|
-
- axis_name:
|
|
29
|
+
- axis_id: TRD-V01
|
|
30
|
+
- axis_name: Visual Warmth & Color Harmony
|
|
14
31
|
- layer: trend-derived
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
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:
|
|
21
|
-
- mid:
|
|
22
|
-
- high:
|
|
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
|
-
-
|
|
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
|
-
-
|
|
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
|
-
-
|
|
29
|
-
- evidence_required:
|
|
30
|
-
- weight:
|
|
31
|
-
- minimum_floor:
|
|
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
|
-
- [
|
|
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
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
101
|
+
### Axis: [TRD-03]
|
|
42
102
|
|
|
43
|
-
-
|
|
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
|
-
- [
|
|
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).
|
package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/40_screen_contracts.md
CHANGED
|
@@ -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.
|
|
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.
|
package/assets/init/.qfai/assistant/skills/qfai-discussion/templates/uiux/50_review_input_bundle.md
CHANGED
|
@@ -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
|