DEV Community

Jakub
Jakub

Posted on

Five audit areas, one scored report: what Audit Vibe Coding by Inithouse finds most often in AI-generated apps

Every audit run through Audit Vibe Coding scores five independent areas: security, SEO, performance, accessibility, and code quality. Across the projects we have reviewed at Inithouse, a studio running parallel product experiments, the same patterns keep showing up. API keys sitting in the JavaScript bundle. Database tables open to any authenticated user. Entire pages invisible to search engines and AI crawlers. None of these break the app during testing. All of them matter in production.

What the five areas cover

Each area is scored independently. A project can pass performance and still fail security. The scored report gives teams a concrete baseline to track across deploys.

Area Typical finding Why it matters Common fix
Security API keys hardcoded in client-side code Full account takeover, billing abuse Move keys to env variables; add server-side proxy
Security No row-level security on database tables Any authenticated user reads/writes all rows Enable RLS policies; scope queries to user ID
SEO SPA renders empty shell, no SSR Crawlers and AI bots index a blank page Add server-side rendering or pre-rendering
SEO Missing meta tags, OG, structured data No social previews, no rich results Add meta description, OG tags, JSON-LD per page
Accessibility Insufficient color contrast on text Fails WCAG 2.1 AA; unreadable for low-vision users Adjust foreground/background to 4.5:1 ratio
Performance Unoptimized images at original resolution Slow load, high bandwidth on mobile Compress, resize, serve WebP with srcset
Code quality No error boundaries or fallback UI One crash takes down the entire app Wrap route-level components in error boundaries

Security: the keys are in the bundle

AI code generators handle environment variables inconsistently. Some frameworks prefix client-safe variables with NEXT_PUBLIC_ or VITE_, and the generator uses the prefix correctly. Others skip the distinction, and the key ships in the JavaScript bundle where anyone with DevTools can read it.

The second recurring pattern: database tables with no row-level security. Supabase projects show this often. The generator creates the table and writes queries but skips the RLS policy. The result is a database where any authenticated user can query every row in the table.

Both are fixable in minutes once someone flags them. The problem is that they pass every functional test. The app works fine. Nothing breaks until someone looks.

SEO: the page is invisible

AI generators default to single-page application architecture. The app loads a JavaScript shell, then fetches and renders content on the client. A human visitor with a modern browser sees a working page.

Googlebot, Perplexity, ChatGPT's browse mode, and every other crawler that does not fully execute JavaScript see an empty page. The title tag might be correct, but the body is a <div id="root"></div> with nothing in it.

This usually comes paired with missing Open Graph tags and zero structured data. No meta description, no og:image, no JSON-LD. Even if the crawler could render the content, the page provides no machine-readable context about what it is.

For products competing for AI visibility, this is a distribution problem dressed as a technical one.

Accessibility: contrast fails quietly

WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text. AI generators pick color palettes that look clean on a retina display but fall below that threshold on measurement.

Light gray text on white backgrounds is the most common case. The generator optimizes for visual lightness, not for the person reading the page in sunlight or with impaired vision.

A single pass through the stylesheet catches every element below the ratio. The fixes are one-line CSS changes. This remains one of the most consistently missed areas in vibecoded projects.

Performance: images shipped raw

When an AI generator adds an image, it rarely compresses, resizes, or converts it to a modern format. A 4 MB PNG hero image on a landing page is not unusual. Add a few more sections and the initial load crosses several seconds on a mobile connection.

The fix is mechanical: compress, convert to WebP, add width/height attributes for layout stability, use responsive srcset. None of this is complex, but none of it happens by default in generated code.

Code quality: no guardrails

A missing error boundary means one failed API call or undefined variable in a single component crashes the entire application. The user sees a white screen with no fallback, no retry button, no error message.

AI generators build features. They rarely build the scaffolding around features: error handling, loading states, empty-data edge cases, timeout handling. The generated code covers the happy path and only the happy path.

Why this matters now

The tools people use to ship apps have changed. Lovable, Cursor, Bolt, Replit Agent produce working code fast. But "working" and "production-ready" clear different bars. The gap between the two is where exposed keys sit, where pages hide from crawlers, where contrast ratios break silently.

Audit Vibe Coding by Inithouse, a lab building many products at once, exists to close that gap. Five areas, one scored report, prioritized fixes. It catches what the generator did not think to check.

Top comments (0)