Auditing 687 React & Tailwind Files for "Vibecoded" UI Tells (and Catching Two False-Positive Traps)

The author ran a static UI linter on OpenCode-App, a desktop application with 536 .tsx files, and discovered two immediate issues: false positives from code blocks and syntax themes. During the scanning process, the raw file strings flagged pre-code documentation blocks for sample href tags and terminal ANSI color maps for indigo tokens.

After addressing these false positives by masking out comments, pre, code, and svg blocks while preserving exact line numbers, and normalizing cosmetic penalties by sqrt(4 / filesScanned), the author published a tool called uislop (npx uislop) to catch 16 deterministic vibecoded UI tells across various frameworks, including React, Next.js, Vue, Svelte, Tailwind, and HTML.

The tool was tested on a real benchmark across 687 UI files, targeting the W.prince/Princeportfolio repository with 129 UI files, and comparing it to Vibecoded SaaS Landing Files with 129 UI files. The results showed that OpenCode-App had 97/100 (Grade A) with 6 findings and 13.0% indigo usage, while Vibecoded Landing Files received a 65/100 (Grade C) with 47 findings and 16.8% indigo usage. The Vibecode Index for the Vibecoded Landing Files was 35/100.

The 16 rules that the uislop tool catches include Palette & Gradient Defaulting, Icon & Eyebrow Clichés, Layout Monotony, AI Copywriting, Fake Social Proof, and Hollow Wiring. These rules aim to identify common UI design issues and encourage better practices in UI development.