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.
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:
<Select>
Trigger FixSelect.tsx
now sets explicit IDs for label association.aria-invalid
and aria-describedby
.DataTable
Keyboard ControltabIndex={0}
, keyboard events, and aria-sort
state.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.
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!