SimpleFinanceDash/.planning/phases/01-design-foundation-and-primitives/01-VALIDATION.md

phase, slug, status, nyquist_compliant, wave_0_complete, created

phase	slug	status	nyquist_compliant	wave_0_complete	created
1	design-foundation-and-primitives	draft	false	false	2026-03-16

Phase 1 — Validation Strategy

Per-phase validation contract for feedback sampling during execution.

---

Test Infrastructure

Property	Value
Framework	None — no test framework installed
Config file	none
Quick run command	npm run build
Full suite command	npm run build && npm run lint
Estimated runtime	~15 seconds

---

Sampling Rate

• After every task commit: Run npm run build
• After every plan wave: Run npm run build && npm run lint
• Before /gsd:verify-work: Full suite must be green
• Max feedback latency: 15 seconds

---

Per-Task Verification Map

Task ID	Plan	Wave	Requirement	Test Type	Automated Command	File Exists	Status
01-01-01	01	1	UI-DESIGN-01	build	npm run build	N/A	⬜ pending
01-01-02	01	1	UI-DESIGN-01	manual	OddContrast WCAG check	N/A	⬜ pending
01-02-01	02	1	UI-DASH-01	build	npm run build	N/A	⬜ pending
01-02-02	02	1	UI-RESPONSIVE-01	manual	Browser DevTools responsive	N/A	⬜ pending

Status: ⬜ pending · ✅ green · ❌ red · ⚠️ flaky

---

Wave 0 Requirements

• No test framework exists. This is acceptable for a UI-only overhaul where verification is primarily visual.
• The build command (tsc -b && vite build) serves as the primary automated validation: catches type errors, missing imports, and bundling failures.

Existing infrastructure covers automated build validation. Visual verification is manual.

---

Manual-Only Verifications

Behavior	Requirement	Why Manual	Test Instructions
Color tokens pass WCAG 4.5:1 contrast	UI-DESIGN-01	Visual/perceptual — requires external contrast tool	Use OddContrast with OKLCH values; verify each category color pair against white background
Summary card grid responds to viewport	UI-RESPONSIVE-01	Layout behavior — requires browser viewport testing	Open DevTools, resize from 1440px to 768px, verify cards reflow
PageShell renders consistent header	UI-DESIGN-01	Visual consistency — no automated assertion available	Navigate between pages, verify header pattern matches
StatCard variance badges render correctly	UI-DASH-01	Visual — semantic colors and badge positioning	View dashboard with budget data, verify green/red badges on cards

All phase behaviors are primarily visual; automated validation is limited to build/type-check.

---

Validation Sign-Off

• All tasks have <automated> verify or Wave 0 dependencies
• Sampling continuity: no 3 consecutive tasks without automated verify
• Wave 0 covers all MISSING references
• No watch-mode flags
• Feedback latency < 15s
• nyquist_compliant: true set in frontmatter

Approval: pending