Add AI validation guardrails for design system

Summary

Implements automated guardrails to prevent AI-generated code quality degradation in the design system.

Problem

Research shows AI-generated code accumulates quality issues:

• 4x increase in code duplication (GitClear 2025)
• 76% of developers encounter hallucinations
• Hardcoded values "sneak in" despite best intentions

Solution: ESLint Guardrails

Changes

• ✅ Added no-restricted-syntax ESLint rules
• ✅ Detects hardcoded colors (#fff, #3B82F6, rgb(), etc.)
• ✅ Enforces design token usage from globals.css
• ✅ Applies only to src/components/**
• ✅ Created AI validation strategy documentation

Prevention Strategy

1. ESLint catches violations at dev time
2. CI/CD fails builds with hardcoded values
3. Forces use of design tokens

Files Changed

• eslint.config.mjs - AI guardrail rules
• docs/team/architecture/2025-10-15-ai-validation-strategy.md - Strategy doc

Testing

# Test that lint catches violations
yarn lint

Effect:

• ❌ <div style={{ color: '#3B82F6' }}> → ERROR
• ✅ <div className="text-primary"> → PASSES

Methodology Principles Applied

• Rule #1: "Generators over generated code"
• Rule #7: "Fail fast on violations"
• Anti-Pattern #6: Hardcoded values prevention
• Lesson #7: "Hardcoded values always creep in"

Phase 2 Planned

• ⏳ Hardcoded spacing detection
• ⏳ Token usage validation script
• ⏳ Blast radius checker

🤖 Generated with Claude Code