# Spec Compliance Evaluator

## Purpose

This evaluator assesses how well iterations adhere to specifications across four dimensions: requirements met, naming conventions, structure adherence, and quality standards. It uses ReAct reasoning to make objective, checklist-based assessments.

## Evaluation Process

### THOUGHT Phase: Pre-Evaluation Reasoning

Before scoring, reason about:

1. **What specification compliance means**
   - Following explicit requirements
   - Adhering to stated conventions
   - Meeting quality baselines
   - Honoring constraints

2. **Why compliance matters**
   - Ensures consistency across iterations
   - Demonstrates attention to requirements
   - Validates understanding of spec
   - Enables fair comparison

3. **How to assess compliance objectively**
   - Treat spec as checklist
   - Each requirement is binary (met/not met) or scored
   - Look for explicit evidence
   - Avoid interpretation beyond spec

### ACTION Phase: Compliance Assessment

#### 1. Requirements Met Assessment (0-40 points)

**Load the specification and create requirement checklist:**

**Functional Requirements (0-16 points)**

For each functional requirement in spec:
- Fully met: Full points
- Partially met: Half points
- Not met: 0 points

Example checklist:
```
Spec: "Display meaningful data using charts"
✓ Met: Has chart displaying temperature data [4/4 points]

Spec: "Support at least one dataset with minimum 20 data points"
✓ Met: Dataset has 50 points [4/4 points]

Spec: "Implement smooth transitions and animations"
⚠ Partial: Has transitions but not smooth [2/4 points]

Spec: "Provide user controls"
✓ Met: Has 3 control buttons and 1 slider [4/4 points]

Spec: "Respond to user input with visual feedback"
✗ Not Met: No visual feedback on button click [0/4 points]
```

Score: 14/16 points

**Technical Requirements (0-12 points)**

Check each technical requirement:

Example checklist:
```
Spec: "Single HTML file (self-contained)"
✓ Met: Single file, all embedded [4/4 points]

Spec: "Embedded CSS in <style> tag"
✓ Met: CSS properly embedded [4/4 points]

Spec: "No external file dependencies"
⚠ Partial: Uses CDN (allowed) but has external .json file (not allowed) [2/4 points]
```

Score: 10/12 points

**Design Requirements (0-12 points)**

Check each design requirement:

Example checklist:
```
Spec: "Cohesive color scheme (3-5 colors)"
✓ Met: 4-color palette, cohesive [4/4 points]

Spec: "Clear typography hierarchy"
✓ Met: 3 clear heading levels, distinct sizing [4/4 points]

Spec: "Responsive to different screen sizes"
⚠ Partial: Works on desktop, breaks on mobile [2/4 points]
```

Score: 10/12 points

**Calculate Requirements Score**: Sum all requirements (0-40 points)

Total example: 14 + 10 + 10 = 34/40

#### 2. Naming Conventions Assessment (0-20 points)

**Check filename against spec naming pattern:**

**Pattern Adherence (0-10 points)**

Spec pattern: `visualization_{iteration_number}_{theme}.html`

Check each component:
```
Actual filename: visualization_042_ocean_temps.html

Pattern match:
✓ Prefix "visualization_": Correct [3/3 points]
✓ Iteration number "042": Correct, zero-padded [3/3 points]
✓ Theme "ocean_temps": Descriptive [3/3 points]
✓ Extension ".html": Correct [1/1 point]

Score: 10/10 points
```

**Naming Quality (0-10 points)**

Assess naming quality:
- Is iteration number correct for sequence? (3 points)
- Is theme identifier descriptive and meaningful? (4 points)
- Does naming follow any case conventions specified? (3 points)

Example:
```
Iteration number: 042 is correct in sequence ✓ [3/3 points]
Theme: "ocean_temps" is descriptive ✓ [4/4 points]
Case: Uses snake_case as specified ✓ [3/3 points]

Score: 10/10 points
```

**Calculate Naming Score**: Sum above (0-20 points)

Total example: 10 + 10 = 20/20

#### 3. Structure Adherence Assessment (0-20 points)

**Verify file/code structure matches spec:**

**File Structure (0-10 points)**

Check structural requirements:

Example checklist:
```
Spec: "Single HTML file"
✓ Met: Single file [5/5 points]

Spec: "Embedded <style> in <head>"
✓ Met: Proper placement [2.5/2.5 points]

Spec: "Embedded <script> before </body>"
✓ Met: Proper placement [2.5/2.5 points]

Score: 10/10 points
```

**Code Organization (0-10 points)**

Check organization requirements:

Example checklist:
```
Spec: "Modular function structure"
✓ Met: Clear functions, well-organized [4/4 points]

Spec: "CSS organized by component"
⚠ Partial: Some organization, could be better [2/3 points]

Spec: "JavaScript in logical sections"
✓ Met: Clear sections with comments [3/3 points]

Score: 9/10 points
```

**Calculate Structure Score**: Sum above (0-20 points)

Total example: 10 + 9 = 19/20

#### 4. Quality Standards Assessment (0-20 points)

**Verify meets baseline quality standards from spec:**

**Code Quality Baseline (0-8 points)**

Spec baseline: "Well-commented code, descriptive names, no obvious bugs"

Check:
```
Comments present: ✓ [3/3 points]
Descriptive names: ✓ [2/2 points]
No obvious bugs: ⚠ Minor console error [2/3 points]

Score: 7/8 points
```

**Accessibility Baseline (0-6 points)**

Spec baseline: "Sufficient color contrast, keyboard navigation, screen reader labels"

Check:
```
Color contrast: ✓ WCAG AA compliant [2/2 points]
Keyboard navigation: ⚠ Partial support [2/3 points]
Screen reader labels: ✗ Missing aria labels [0/1 point]

Score: 4/6 points
```

**Performance Baseline (0-6 points)**

Spec baseline: "Render within 500ms, maintain 60fps"

Check:
```
Initial render: ✓ 350ms [3/3 points]
Animation fps: ⚠ ~50fps [2/3 points]

Score: 5/6 points
```

**Calculate Quality Standards Score**: Sum above (0-20 points)

Total example: 7 + 4 + 5 = 16/20

### OBSERVATION Phase: Results Analysis

**Calculate Total Compliance Score**:
```
compliance_score = requirements_met + naming + structure + quality_standards
```

Range: 0-100

Example total: 34 + 20 + 19 + 16 = 89/100

**Analyze Results**:

1. **What requirements were missed?**
   - List specific unmet requirements
   - Identify patterns in omissions
   - Assess impact of missing requirements

2. **Where is compliance strongest?**
   - Which areas fully complied?
   - What was done particularly well?
   - What can others learn?

3. **Where is compliance weakest?**
   - Which areas had most violations?
   - Are violations intentional creative choices?
   - How much do violations matter?

4. **Is the spec itself clear?**
   - Were any violations due to spec ambiguity?
   - Should spec be clarified?
   - Are requirements reasonable?

## Output Format

```json
{
  "dimension": "compliance",
  "total_score": 89,
  "breakdown": {
    "requirements_met": 34,
    "naming_conventions": 20,
    "structure_adherence": 19,
    "quality_standards": 16
  },
  "strengths": [
    "Perfect naming convention adherence",
    "Excellent file structure compliance",
    "All functional requirements met or partially met"
  ],
  "weaknesses": [
    "Missing screen reader labels (accessibility)",
    "Animation frame rate slightly below 60fps target",
    "External JSON file violates no-external-dependencies requirement"
  ],
  "evidence": {
    "requirements_met": {
      "functional": {
        "score": 14,
        "max": 16,
        "checklist": [
          "✓ Display meaningful data using charts [4/4]",
          "✓ Support dataset with 20+ points [4/4]",
          "⚠ Smooth transitions partially implemented [2/4]",
          "✓ User controls present [4/4]",
          "✗ No visual feedback on interaction [0/4]"
        ]
      },
      "technical": {
        "score": 10,
        "max": 12,
        "checklist": [
          "✓ Single HTML file [4/4]",
          "✓ Embedded CSS [4/4]",
          "⚠ External JSON file present [2/4]"
        ]
      },
      "design": {
        "score": 10,
        "max": 12,
        "checklist": [
          "✓ Cohesive color scheme [4/4]",
          "✓ Clear typography hierarchy [4/4]",
          "⚠ Responsive issues on mobile [2/4]"
        ]
      }
    },
    "naming_conventions": {
      "pattern_adherence": 10,
      "naming_quality": 10,
      "filename": "visualization_042_ocean_temps.html",
      "pattern": "visualization_{iteration_number}_{theme}.html",
      "analysis": "Perfect adherence to naming pattern with descriptive theme"
    },
    "structure_adherence": {
      "file_structure": 10,
      "code_organization": 9,
      "checklist": [
        "✓ Single HTML file [5/5]",
        "✓ CSS in <head> [2.5/2.5]",
        "✓ JS before </body> [2.5/2.5]",
        "✓ Modular functions [4/4]",
        "⚠ CSS organization could improve [2/3]",
        "✓ JS well-sectioned [3/3]"
      ]
    },
    "quality_standards": {
      "code_quality": 7,
      "accessibility": 4,
      "performance": 5,
      "checklist": [
        "✓ Well-commented [3/3]",
        "✓ Descriptive names [2/2]",
        "⚠ Minor console error [2/3]",
        "✓ Color contrast [2/2]",
        "⚠ Partial keyboard nav [2/3]",
        "✗ Missing aria labels [0/1]",
        "✓ Fast render (350ms) [3/3]",
        "⚠ 50fps animation [2/3]"
      ]
    }
  },
  "requirement_violations": [
    {
      "requirement": "No external file dependencies",
      "severity": "moderate",
      "impact": "Reduces portability",
      "suggestion": "Embed JSON data in script"
    },
    {
      "requirement": "Screen reader friendly labels",
      "severity": "moderate",
      "impact": "Reduces accessibility",
      "suggestion": "Add aria-label attributes to controls"
    },
    {
      "requirement": "Maintain 60fps animations",
      "severity": "minor",
      "impact": "Slightly degraded experience",
      "suggestion": "Optimize animation calculations"
    }
  ],
  "reasoning": "This iteration demonstrates strong spec compliance overall, with perfect naming and near-perfect structure adherence. Most functional requirements are met, though visual feedback and smooth transitions need improvement. The main compliance issues are the external JSON file (violates self-contained requirement), missing accessibility labels, and slightly low animation frame rate. These are moderate issues that don't fundamentally compromise the implementation but do represent spec violations that should be addressed. Overall, this represents high compliance with room for improvement in specific areas.",
  "improvement_suggestions": [
    "Embed JSON data directly in HTML to eliminate external dependency",
    "Add comprehensive aria-label attributes for screen reader support",
    "Optimize animation loop to achieve consistent 60fps",
    "Add visual feedback on user interactions (button press states, etc.)"
  ]
}
```

## Calibration Examples

**Score 90-100 (Exceptional)**:
- All or nearly all requirements met
- Perfect naming and structure
- Exceeds quality baselines
- No significant violations
- Example: Perfect or near-perfect spec adherence

**Score 80-89 (Excellent)**:
- Most requirements fully met
- Correct naming and structure
- Meets quality baselines
- Minor violations only
- Example: Strong compliance with minor gaps

**Score 70-79 (Good)**:
- Core requirements met
- Generally follows naming/structure
- Meets most quality baselines
- Some moderate violations
- Example: Solid compliance, some areas need work

**Score 60-69 (Adequate)**:
- Basic requirements met
- Naming/structure mostly correct
- Meets minimum baselines
- Several violations
- Example: Acceptable compliance, notable gaps

**Score Below 60 (Needs Improvement)**:
- Major requirements missed
- Naming/structure issues
- Below quality baselines
- Significant violations
- Example: Poor spec adherence

## Handling Spec Ambiguity

When spec is unclear:

1. **Document the ambiguity**
   - Note where spec is vague
   - Explain interpretation used
   - Don't penalize for reasonable interpretation

2. **Apply reasonable judgment**
   - What would most people interpret?
   - What makes most sense in context?
   - Give benefit of doubt

3. **Suggest spec clarification**
   - Note in evaluation
   - Recommend spec improvement
   - Help improve future clarity

## Creative Violations vs Compliance Issues

Distinguish:

**Creative Risk (May accept lower compliance)**:
- Intentional deviation for creative purposes
- Adds value through innovation
- Still meets core requirements
- Example: Novel interaction model that technically violates stated pattern

**Compliance Issue (Should penalize)**:
- Oversight or carelessness
- Missing requirements without reason
- Reduces quality or consistency
- Example: Forgot to add required feature

Consider intent and impact when scoring.

## ReAct Reminder

Every compliance evaluation should:
1. **THOUGHT**: Reason about what compliance means for this spec
2. **ACTION**: Systematically check each requirement
3. **OBSERVATION**: Analyze patterns in compliance/violations

Document reasoning to ensure transparent, fair compliance assessment.

---

**Remember**: Spec compliance is objective - it's a checklist. Apply criteria consistently, give credit for what's done well, identify what's missing, and recognize that perfect compliance is achievable with attention to detail.
