# Validate Implementation (Quality Gates)

**Phase 3 of Golden Path:** Run ALL quality gates before committing code.

## Purpose

Ensure every change meets production quality standards. NO exceptions.

## Mandatory Validation Sequence

Run these checks IN ORDER:

### Gate 1: Type Safety ⚡
```bash
npm run astro check

Expected Output: 0 errors, 0 warnings

If Failed:

❌ STOP - Do not proceed
✅ Fix TypeScript errors
✅ Ensure all Props interfaces are exported
✅ Re-run validation

Common Issues:

Missing Props interface
Using any type
Missing type imports
Incorrect prop types

Gate 2: Build Verification 🏗️

npm run build

Expected Output: Build Complete!

If Failed:

❌ STOP - Do not proceed
✅ Check error messages
✅ Fix issues (often TypeScript or import related)
✅ Re-run validation

Common Issues:

Import errors (use @/ aliases)
Missing dependencies
Syntax errors in templates
Invalid Astro syntax

Gate 3: Component Audit 🧩

Manual Checklist:

All components in correct directory structure
- UI: src/components/ui/
- Marketing: src/components/marketing/
- Forms: src/components/forms/
- Layout: src/components/layout/
All Props interfaces exported
All imports use @/ path aliases
All styling uses cn() utility
No duplicate components created

Verification:

# Check for relative imports (should be none)
grep -r "from '\.\." src/

# Check for missing @/ usage
grep -r "from '@/" src/ | wc -l  # Should be > 0

Gate 4: SEO Compliance 🔍

Checklist:

BaseLayout used on all pages
Unique title per page
Description meta tag present
Open Graph tags configured
Twitter Card tags configured

Verification: View source of built page:

npm run build && npm run preview
# Then inspect <head> section in browser

Required Tags:

<title>Unique Page Title</title>
<meta name="description" content="Unique description">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta name="twitter:card" content="summary_large_image">

Gate 5: Responsive Design 📱

Test Breakpoints:

Mobile (375px) - iPhone SE
Tablet (768px) - iPad
Desktop (1024px) - Laptop
Large (1440px) - Desktop

Verification:

npm run dev
# Test in browser with DevTools responsive mode

Common Issues:

Text overflow on mobile
Images not scaling
Navigation broken on mobile
Buttons too small for touch

Must Pass:

All content visible
No horizontal scroll
Buttons/links tappable (min 44x44px)
Text readable (min 16px)

Gate 6: Accessibility Check ♿

Checklist:

Semantic HTML used (<header>, <nav>, <main>, <footer>)
ARIA labels on interactive elements
Color contrast meets WCAG AA (4.5:1 for text)
Keyboard navigation works (Tab, Enter, Escape)
Focus indicators visible

Verification:

# Test keyboard navigation
# Tab through all interactive elements
# Verify all are reachable and have visible focus

Quick Test:

Navigate with Tab only (no mouse)
Can you reach all buttons/links?
Can you see where focus is?
Can you activate with Enter/Space?

Gate 7: Performance Budget 📊

Limits:

JavaScript: <50KB gzipped
CSS: <20KB gzipped
Images: Optimized (WebP/AVIF)
Total page: <500KB

Verification:

npm run build
ls -lh dist/_astro/*.js | awk '{sum+=$5} END {print "Total JS:", sum/1024, "KB"}'

Lighthouse Audit:

npm run build && npm run preview
# Open Chrome DevTools → Lighthouse → Run audit

Required Scores:

Performance: 100
Accessibility: 100
Best Practices: 100
SEO: 100

If Below 100:

❌ Investigate issues
✅ Optimize (lazy load, code split, compress images)
✅ Re-run audit

Gate 8: Component Reuse Audit 🔄

Questions:

Did I check existing components before creating new ones?
Could I have extended an existing component?
Is this component generic enough for reuse?
Did I maximize composition over creation?

Verification:

# List all components
find src/components -name "*.astro"

# Check for similar components (manual review)

Rule: If <80% unique, extend existing component instead.

Full Validation Command

Run all automated checks:

# Combined validation
npm run astro check && npm run build && echo "✅ All gates passed!"

Expected Output:

✓ Completed type checking
✓ Build complete!
✅ All gates passed!

Validation Report Template

After running all gates, generate report:

## Validation Report

Date: [YYYY-MM-DD]
Feature: [Feature Name]

### Gate Results:
- [✅/❌] Type Check: [0 errors / X errors]
- [✅/❌] Build: [Success / Failed]
- [✅/❌] Component Audit: [Pass / Issues found]
- [✅/❌] SEO: [All tags present / Missing: X]
- [✅/❌] Responsive: [All breakpoints work / Issues at: X]
- [✅/❌] Accessibility: [WCAG AA compliant / Issues: X]
- [✅/❌] Performance: [Within budget / Over by: X KB]
- [✅/❌] Component Reuse: [Maximized / Could improve: X]

### Lighthouse Scores:
- Performance: [score]/100
- Accessibility: [score]/100
- Best Practices: [score]/100
- SEO: [score]/100

### Issues Found:
[List any issues that need fixing]

### Status:
[✅ Ready to Commit / ❌ Needs Fixes]

What to Do If Gates Fail

TypeScript Errors:

Read error message carefully
Fix type issues (add interfaces, correct types)
Re-run npm run astro check
Repeat until 0 errors

Build Failures:

Check console output
Fix syntax/import errors
Verify all imports use @/ aliases
Re-run npm run build

Performance Issues:

Check bundle size
Remove unnecessary dependencies
Lazy load heavy components
Optimize images
Re-run Lighthouse

Gate 2: Build Verification 🏗️

Gate 3: Component Audit 🧩

Gate 4: SEO Compliance 🔍

Gate 5: Responsive Design 📱

Gate 6: Accessibility Check ♿

Gate 7: Performance Budget 📊

Gate 8: Component Reuse Audit 🔄

Full Validation Command

Validation Report Template

What to Do If Gates Fail

TypeScript Errors:

Build Failures:

Performance Issues:

Accessibilit

Maintain Validate?

Related loops