DEV Community

g dollar
g dollar

Posted on

Why "Vibe Coding" Fails Without a Behavioral Floor: A Browser-Verified Rerun

#a11y #webdev #react #ai

The Experiment

We just published a comprehensive, browser-verified rerun experiment comparing uncontrolled AI-generated React/Tailwind against the newly released Toolcrib v0.5.0.

If you are currently building frontends using autonomous AI assistants or "vibe coding" inside an LLM chat, this structural teardown shows exactly why relying on raw AI generation without a pre-tested component floor guarantees UI, UX, and accessibility drift.

👉 Read the full live-browser teardown here: Refactor Application Experiment, Rerun: Toolcrib v0.5.0 vs. v0.4.0.

📊 The Headline Metrics

  • -91.2% reduction in raw HTML elements.
  • -100% elimination of raw, hand-rolled styling attributes.
  • 156 / 156 patches applied cleanly out of the box.

🔥 The Big Fixes in v0.5.0

Our latest rerun, using Puppeteer, confirms all four major behavioral gaps from the v0.4.0 action plan are resolved in Toolcrib v0.5.0:

  1. <Select> Trigger Fix: Select.tsx now sets explicit IDs for label association.
  2. Accessible Validation: Error states are now structurally wired to aria-invalid and aria-describedby.
  3. DataTable Keyboard Control: Sortable table headers now correctly handle tabIndex={0}, keyboard events, and aria-sort state.
  4. Cursor Affordance Correction: Fixed sorting defaults to prevent false mouse-pointer cues on non-interactive elements.

🧠 The Core Takeaway: The Extension Test

When challenged to create a deletion confirmation dialog, the AI hand-rolled a component that introduced 11 new raw elements and 11 classNames, while repeating previous accessibility bugs.

Conversely, Toolcrib v0.5.0 mapped the request to a specialized <AlertDialog> primitive, resulting in 0 new styling attributes and maintaining a, fully accessible, heavily tested foundation.

📉 The Cost of Retrofitting

Fixing the hand-rolled code required writing 86 lines of custom infrastructure code to manage focus-trapping and keyboard events, creating a fragile solution. Without a functional floor, AI assistants are guaranteed to repeat these accessibility mistakes in future iterations.

💬 How are you handling layout and accessibility drift when working with AI assistants? Do you enforce a strict UI library component floor, or are you auditing hand-rolled JSX? Let's discuss below!

Top comments (0)