Phase 5: Test

Purpose

The test phase validates the completed prototype against the component contract and WCAG accessibility criteria, producing a pass/fail report.

Usage

/design:test <component-name>

Prerequisites

All prior phase artifacts should exist in .metapowers/design/<component-name>/.

What It Does

1. Reads the component contract and prototype notes
2. Checks each contract requirement against the prototype
3. Runs figma_a11y_lint to detect accessibility issues in the Figma component
4. Generates a scorecard with figma_a11y_scorecard for overall a11y health
5. Validates contrast ratios with figma_a11y_contrast_check
6. Simulates color-blind views with figma_a11y_color_blind_sim
7. Checks focus order with figma_a11y_focus_order
8. Generates a test report with pass/fail for each criterion
9. Writes to .metapowers/design/<component-name>/test-report.md

Output

Creates .metapowers/design/<component-name>/test-report.md containing:

• Contract compliance checklist (pass/fail per requirement)
• WCAG validation results
• Issues found and remediation suggestions
• Overall pass/fail status

MCP Tools Used

• figma_a11y_lint — Lint the Figma component for accessibility violations
• figma_a11y_scorecard — Generate an overall accessibility scorecard
• figma_a11y_contrast_check — Check color contrast ratios against WCAG thresholds
• figma_a11y_color_blind_sim — Simulate color-blind views of the component
• figma_a11y_focus_order — Validate keyboard focus order annotations

After Testing

If the test report identifies issues, iterate by returning to the relevant phase (often prototype or define) to address them. The artifact flow is designed for iteration — update the artifact and re-run downstream phases.