# Step 5: Validate the Clone

## Your Task

Before declaring the clone complete, perform a thorough self-check.

## Pre-Output Checklist

Go through EVERY item. Do not skip any.

### Colors
- [ ] All colors are exact hex values (not `blue-500`, `gray-600`, etc.)
- [ ] CSS variables defined for repeated colors
- [ ] No Tailwind palette colors used

### Fonts
- [ ] Google Fonts imports added to globals.css
- [ ] Font families applied correctly
- [ ] Fallback fonts specified

### Spacing
- [ ] Exact pixel values used (not rounded to Tailwind defaults)
- [ ] Arbitrary values syntax used: `p-[13.44px]`
- [ ] Vertical rhythm matches original

### Assets
- [ ] All images load from `/assets/` (not remote URLs)
- [ ] All SVGs downloaded or inlined
- [ ] Fonts load from `/fonts/` or Google Fonts

### Layout
- [ ] Absolute positioning preserved where used
- [ ] Z-index stacking order correct
- [ ] Max-width containers match original
- [ ] Responsive breakpoints included

### Effects
- [ ] Gradients exactly reproduced
- [ ] Box shadows match original
- [ ] Blurs and opacity preserved
- [ ] Hover states included

### Code Quality
- [ ] No TypeScript errors
- [ ] "use client" only where needed
- [ ] Components properly exported

## Screenshot Comparison (Recommended)

Run a visual diff to measure accuracy:

```ts
import {renderPage, compareScreenshots} from './plugin';

// Start your dev server first: npm run dev

const original = await renderPage({url: 'https://original-site.com'});
const clone = await renderPage({url: 'http://localhost:3000'});

const result = await compareScreenshots(
  original.screenshot,
  clone.screenshot,
  './validation/diff.png'
);

console.log(`Similarity: ${(result.similarity * 100).toFixed(2)}%`);
```

### Similarity Targets

| Score | Rating | Action |
|-------|--------|--------|
| > 95% | Excellent | Ready to ship |
| 90-95% | Good | Minor tweaks |
| 80-90% | Fair | Review diff.png |
| < 80% | Poor | Major issues |

## If Issues Found

1. Check the diff image to identify problem areas
2. Compare specific elements between original and clone
3. Fix the most visible differences first
4. Re-run validation

## Completion Criteria

- [ ] All checklist items passed
- [ ] Screenshot similarity > 90% (ideally > 95%)
- [ ] No TypeScript errors
- [ ] Dev server runs without errors

## Done!

If all checks pass, the clone is complete. Output the final file structure for the user.