The latest articles on DEV Community by Kithure Ian (@eyanoh). https://dev.to/eyanoh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3892056%2Fdecae385-8d69-4674-be0f-e68b52223ada.jpg https://dev.to/eyanoh en Kithure Ian Sat, 25 Apr 2026 09:38:41 +0000 https://dev.to/eyanoh/dont-publish-your-ai-generated-code-without-checking-this-2op8 https://dev.to/eyanoh/dont-publish-your-ai-generated-code-without-checking-this-2op8 <p>A practical checklist to keep AI-generated code fast, lean, and production-ready.</p> <p>AI speeds up development — but without guardrails, it can quietly:</p> <ul> <li><p>Inflate bundle size </p></li> <li><p>Hurt performance </p></li> <li><p>Introduce bad patterns at scale </p></li> </ul> <p>This checklist keeps you in control.</p> <h2> What to Watch For </h2> <h3> 🔴 Critical (Fix Immediately) </h3> <ul> <li><p>🔴 All AI-generated <code>&lt;img&gt;</code> elements have explicit <code>width</code> and <code>height</code> attributes </p></li> <li><p>🔴 No AI-generated code imports an entire library when only one function is needed </p></li> </ul> <h3> 🟠 Important (Optimize Before Shipping) </h3> <ul> <li><p>🟠 AI-generated imports are checked against a heavy-dependency list (<code>moment</code>, <code>axios</code>, <code>lodash</code>, full icon libraries)</p></li> <li><p>🟠 AI-generated heavy libraries (chart libraries, editors, PDF parsers) are wrapped in <code>dynamic import()</code> </p></li> <li><p>🟠 AI-generated animations use <code>transform</code> / <code>opacity</code> — not layout-triggering properties </p></li> <li><p>🟠 AI-generated transition properties are explicit — not <code>transition: all</code> </p></li> <li><p>🟠 AI-generated font loading is via <code>&lt;link&gt;</code> in HTML — not via CSS <code>@import</code> or JS </p></li> <li><p>🟠 AI-generated data fetching uses <code>Promise.all</code> for parallel requests — not sequential <code>await</code> </p></li> <li><p>🟠 AI-generated React components use Server Components where interactivity is not required </p></li> </ul> <h3> 🟡 Nice-to-Have (Scale &amp; Maintainability) </h3> <ul> <li><p>🟡 Project-level AI context files (<code>.cursorrules</code>, Copilot instructions) encode performance standards </p></li> <li><p>🟡 ESLint rules enforce image dimension requirements and ban problematic import patterns </p></li> <li><p>🟡 Bundle size limits (<code>size-limit</code>, <code>bundlesize</code>) catch regressions from AI-generated imports in CI </p></li> <li><p>🟡 AI-generated prompts specify performance constraints upfront </p></li> </ul> <h2> Quick Self-Check </h2> <p>Before merging AI-generated code, ask:</p> <ul> <li><p>Does this increase bundle size unnecessarily?</p></li> <li><p>Can this be lazy-loaded or split?</p></li> <li><p>Is this the most minimal import possible?</p></li> <li><p>Will this cause layout shift or reflow?</p></li> </ul> <h2> Why This Matters </h2> <p>💬 What’s one bad AI-generated pattern you’ve caught recently? </p> ai webdev react programming