# Prohibited Actions

The following behaviors are **absolutely forbidden** when cloning websites.

## Code Generation

### 1. NO Tailwind Color Palette

```tsx
// FORBIDDEN
<div className="bg-blue-500">
<div className="text-gray-600">
<div className="border-indigo-400">

// REQUIRED - Exact hex values
<div className="bg-[#3B82F6]">
<div className="text-[#4B5563]">
<div className="border-[#818CF8]">
```

### 2. NO Rounded Spacing

```tsx
// FORBIDDEN - Tailwind defaults
<div className="p-4">      // 16px when original is 18px
<div className="mt-8">     // 32px when original is 28px
<div className="gap-6">    // 24px when original is 22px

// REQUIRED - Exact values
<div className="p-[18px]">
<div className="mt-[28px]">
<div className="gap-[22px]">
```

### 3. NO Remote Asset URLs

```tsx
// FORBIDDEN
<img src="https://cdn.example.com/hero.png">
<Image src="https://images.unsplash.com/photo-123">

// REQUIRED
<img src="/assets/hero.png">
<Image src="/assets/photo-123.jpg">
```

### 4. NO Generic Font Stacks

```tsx
// FORBIDDEN
<h1 className="font-sans">
<p className="font-serif">

// REQUIRED - Specific fonts
<h1 className="font-marker">  // Defined in globals.css
<p className="font-inter">
```

### 5. NO Simplified Layouts

```tsx
// FORBIDDEN - Removing complexity
// Original has absolute positioning, you use flexbox

// REQUIRED - Preserve the original structure
// If original uses absolute positioning, keep it
```

## Content

### 6. NO Fabricated Content

- Do not invent text that wasn't in the original
- Do not add placeholder content ("Lorem ipsum")
- Do not guess at missing information

### 7. NO Removed Content

- Do not skip sections because they're "complex"
- Do not omit decorative elements
- Do not simplify text to "fit better"

## Styling

### 8. NO Missing Hover States

If the original has hover effects, include them:
```tsx
className="hover:bg-[#1A1A1A] hover:text-white transition-all"
```

### 9. NO Missing Shadows/Effects

```tsx
// FORBIDDEN - Removing visual depth
<div className="bg-white rounded-lg">

// REQUIRED - Preserve all effects
<div 
  className="bg-white rounded-[1rem]"
  style={{boxShadow: '0 10px 30px rgba(0,0,0,0.12)'}}
>
```

### 10. NO Wrong Font Weights

```tsx
// FORBIDDEN - Guessing weights
<span className="font-bold">

// REQUIRED - Check exact weight
<span className="font-semibold">  // 600 not 700
<span style={{fontWeight: 600}}>
```

## Process

### 11. NO Skipping Screenshot Analysis

Always look at the screenshot before generating code. The screenshot is the ground truth.

### 12. NO Skipping Validation

Always run through the validation checklist in [workflow/step5-validate.md](../workflow/step5-validate.md).

### 13. NO Incomplete Asset Downloads

Verify all assets downloaded successfully. Check for:
- 404 errors
- CORS issues
- Missing fonts

## Why These Rules Matter

Each prohibition exists because violating it produces "AI slop" - generic-looking clones that are immediately recognizable as AI-generated rather than pixel-perfect reproductions.

**The goal is a clone that is indistinguishable from the original.**