mop-skills/skills/create-website/references/anti-slop-checklist.md

Anti-AI-Slop Quality Checklist 🛡️

Before finalizing and publishing any website or HTML artifact, verify every item on this checklist. This ensures the output feels designed by a human senior product designer rather than a generic LLM.

---

❌ Forbidden Trappings of "AI Slop"

1. Never use generic default fonts:
   • 🚫 No raw Inter, Roboto, Arial, or unstyled system-ui.
   • ✅ Always import characterful fonts (e.g. Syne, Cabinet Grotesk, Fraunces, Space Grotesk, Plus Jakarta Sans).
2. Never use the generic purple-to-indigo gradient:
   • 🚫 bg-gradient-to-r from-purple-600 to-indigo-600 on white background.
   • ✅ Use intentional palettes: deep obsidian with electric cyan accents, warm ivory with terracotta, neo-brutalist yellow with black borders, or slate with emerald glow.
3. Never generate static, boring centered 3-card rows:
   • 🚫 Three identical white boxes with light gray text centered on a plain gray canvas.
   • ✅ Vary card sizes, emphasize a primary card with a border glow or badge, use grid spans (md:col-span-2), or add asymmetry.
4. Never forget interactive micro-interactions:
   • 🚫 Dead buttons that don't react to hover or click.
   • ✅ Always add hover:-translate-y-0.5 hover:shadow-lg transition-all duration-200 and active:scale-95.
5. Never rely on broken external images:
   • 🚫 Using fake URLs like https://example.com/image.jpg or placeholder services that fail.
   • ✅ Use SVG patterns, Lucide icons, gradient mesh backgrounds, or reliable Unsplash source links with explicit fallback styling.

---

✅ Mandatory Pre-Flight Verification

Check	Requirement	Verified?
Viewport & Encoding	<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">	[ ]
Tailwind CDN	<script src="https://cdn.tailwindcss.com"></script> included in <head>	[ ]
Alpine.js CDN	<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> in <head>	[ ]
Lucide Icons	<script src="https://unpkg.com/lucide@latest"></script> + lucide.createIcons() at bottom of <body>	[ ]
Google Fonts	Preconnect + Google Font <link> + custom <style> setting font-family	[ ]
Touch Targets	Buttons and clickable elements have at least py-2.5 px-4 and cursor-pointer	[ ]
Dark Mode Consistency	If dark mode is supported, all cards, borders, text, and inputs have dark: variants	[ ]
Mobile Responsiveness	Layout uses grid-cols-1 md:grid-cols-2 lg:grid-cols-3 and responsive paddings (p-4 md:p-8)	[ ]
Content Richness	Real, realistic domain content (no repeated "Lorem Ipsum" filler)	[ ]