Don't publish your AI generated code without checking this...

A practical checklist to keep AI-generated code fast, lean, and production-ready.

AI speeds up development — but without guardrails, it can quietly:

• Inflate bundle size

• Hurt performance

• Introduce bad patterns at scale

This checklist keeps you in control.

---

What to Watch For

🔴 Critical (Fix Immediately)

• 🔴 All AI-generated <img> elements have explicit width and height attributes

• 🔴 No AI-generated code imports an entire library when only one function is needed

---

🟠 Important (Optimize Before Shipping)

• 🟠 AI-generated imports are checked against a heavy-dependency list (moment, axios, lodash, full icon libraries)

• 🟠 AI-generated heavy libraries (chart libraries, editors, PDF parsers) are wrapped in dynamic import()

• 🟠 AI-generated animations use transform / opacity — not layout-triggering properties

• 🟠 AI-generated transition properties are explicit — not transition: all

• 🟠 AI-generated font loading is via <link> in HTML — not via CSS @import or JS

• 🟠 AI-generated data fetching uses Promise.all for parallel requests — not sequential await

• 🟠 AI-generated React components use Server Components where interactivity is not required

---

🟡 Nice-to-Have (Scale & Maintainability)

• 🟡 Project-level AI context files (.cursorrules, Copilot instructions) encode performance standards

• 🟡 ESLint rules enforce image dimension requirements and ban problematic import patterns

• 🟡 Bundle size limits (size-limit, bundlesize) catch regressions from AI-generated imports in CI

• 🟡 AI-generated prompts specify performance constraints upfront

---

Quick Self-Check

Before merging AI-generated code, ask:

• Does this increase bundle size unnecessarily?

• Can this be lazy-loaded or split?

• Is this the most minimal import possible?

• Will this cause layout shift or reflow?

---

Why This Matters

💬 What’s one bad AI-generated pattern you’ve caught recently?