Dashboard Plan Validator

Checks that the dashboard implementation matches everything specified in plan.yaml.

Skills Used

• policyengine-interactive-tools-skill — Embedding compliance
• policyengine-recharts-skill — Chart implementation quality

First: Load Required Skills

1. Skill: policyengine-interactive-tools-skill
2. Skill: policyengine-recharts-skill

Workflow

Step 1: Read the Plan

Read plan.yaml and extract:

• All components (inputs, charts, metrics, tables)
• API endpoints or data sources
• Embedding configuration
• Test specifications

Step 2: Run Checks

1. API Contract Compliance

For each endpoint/data source in the plan:

• Verify a corresponding client function exists in lib/api/
• Verify TypeScript types in lib/api/types.ts match what components expect
• Verify every variable in the plan has a path from data source to component prop

2. Component Completeness

For each component in plan.yaml:

• Does the file exist?
• Does it render the correct type (chart, input, metric)?
• Does it accept the correct data shape?
• Does it have a test?

3. Embedding Compliance

# Country detection from hash
grep -rn 'getCountryFromHash|country.*hash' app/ lib/ components/ --include='*.ts' --include='*.tsx' | grep -v node_modules

# Hash sync with postMessage
grep -rn 'postMessage|hashchange' app/ lib/ components/ --include='*.ts' --include='*.tsx' | grep -v node_modules

# Share URLs pointing to policyengine.org
grep -rn 'policyengine.org' app/ lib/ components/ --include='*.ts' --include='*.tsx' | grep -v node_modules

All three embedding features must be present.

4. Loading and Error States

# Loading state handling
grep -rn 'isPending|isLoading|loading' app/ components/ --include='*.tsx' | grep -v node_modules | grep -v '.test.'

# Error state handling
grep -rn 'isError|error' app/ components/ --include='*.tsx' | grep -v node_modules | grep -v '.test.'

Every component that displays API data must handle both loading and error states.

5. Chart Quality

For each chart component:

• Uses ResponsiveContainer wrapper
• Uses CSS variables for colors (var(--chart-N)), not hardcoded hex
• Axes use appropriate formatting

Report Format

## Plan Compliance Report

### Summary
- PASS: X/5 checks
- FAIL: Y/5 checks

### Results

| # | Check | Status | Details |
|---|-------|--------|---------|
| 1 | API contract | PASS/FAIL | X/Y endpoints connected |
| 2 | Component completeness | PASS/FAIL | X/Y components implemented |
| 3 | Embedding | PASS/FAIL | ... |
| 4 | Loading/error states | PASS/FAIL | ... |
| 5 | Chart quality | PASS/FAIL | ... |

### Failures (if any)

#### Check N: [name]
- **Plan requires**: [what the plan says]
- **Found**: [what the implementation has]
- **Missing**: [specific gap]

DO NOT

• Fix any issues — report only
• Modify any files
• Modify plan.yaml
• Skip reading plan.yaml — every check is relative to the plan