DEV Community

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

Posted on

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

#frontend #react #softwaredevelopment #tailwindcss

When I ran the first version of my static UI linter against OpenCode-App (536 .tsx files on my machine), two things broke immediately:

  1. Code blocks and syntax themes triggered false positives. Scanning raw file strings flagged <pre><code> documentation blocks for sample href="#" tags and terminal ANSI color maps for indigo tokens.
  2. Global weight subtraction punished large repos. Subtracting raw rule weights without normalizing for file count gave a 536-file desktop app a 68/100 (Grade C) when 99.1% of its files had zero findings (only 2 dialog components used indigo utilities and 3 routes had an em-dash).

After masking out comments, <pre>, <code>, and <svg> blocks while preserving exact \n line numbers, and normalizing cosmetic penalties by sqrt(4 / filesScanned), I published uislop (npx uislop) to catch 16 deterministic "vibecoded UI" tells across React, Next.js, Vue, Svelte, Tailwind, and HTML.

npx uislop ./src
Enter fullscreen mode Exit fullscreen mode

Real benchmark across 687 UI files 

Target            : W.prince/Princeportfolio (129 UI files) vs Vibecoded SaaS Landing
Files scanned     : 129 UI files · 47 findings across 3/6 categories
Human-Craft Score : 65/100 (Grade C) · Vibecode Index: 35/100
Palette Entropy   : 50/297 chromatic tokens in indigo/violet/purple (16.8%)

REAL CORPUS BENCHMARK (687 UI files across 4 repositories)
  rajesh-portfolio (21 UI files)          100/100 (Grade A) ·  0 findings ·  0.0% indigo
  OpenCode-App (536 UI files)              97/100 (Grade A) ·  6 findings · 13.0% indigo
  W.prince/Princeportfolio (129 UI files)  65/100 (Grade C) · 47 findings · 16.8% indigo
  vibecoded-landing.tsx (1 UI file)         0/100 (Grade F) · 24 findings · 95.2% indigo
Enter fullscreen mode Exit fullscreen mode

What the 16 rules catch

  • Palette & Gradient Defaulting (UIS001-UIS004): bg-clip-text text-transparent bg-gradient-to-* headings, from-indigo-500 via-purple-500 to-pink-500 gradients, files where indigo/violet/purple exceed 35% of all chromatic Tailwind utilities, and blur-3xl rounded-full opacity-20 background orbs.
  • Icon & Eyebrow Clichés (UIS005-UIS007): Importing 3+ of Sparkles, Zap, Rocket, Shield, Brain, Wand2 from lucide-react, <Sparkles> + animate-ping hero pills above <h1>, and repeated bg-indigo-500/10 rounded-xl p-3 squircle icon boxes.
  • Layout Monotony (UIS008-UIS009): Stacked grid-cols-1 md:grid-cols-3 sections and backdrop-blur + hover:-translate-y-1 glass cards.
  • AI Copywriting (UIS010-UIS011): "Supercharge your", "Unleash the power of", "Built for modern teams", "Next-Generation", and em-dash splices in UI text.
  • Fake Social Proof (UIS012-UIS014): "Sarah Chen", "Alex Rivera", "Acme Corp", "TechFlow", pravatar.cc, and LLM-memorized Unsplash portrait IDs (photo-1534528741775-53994a69daeb).
  • Hollow Wiring (UIS015-UIS016): Dead <a href="#"> links and onClick={() => {}} / console.log handlers.

Code and CLI are MIT-licensed at https://github.com/princejain756/uislop (and on npm at https://www.npmjs.com/package/uislop).

Top comments (0)