Syntax - Tasty Web Development Treats

998: How to Fix Vibe Coding

· Summarized

Share this episode
Anyone with this link can open it.
Share Link
Start at 0:00

Key takeaways

  • Use deterministic tools like linters, code analyzers, and bug trackers to make AI-generated code more reliable and maintainable.
  • Tools such as Fallow, Jscpd, and ESLint are essential for analyzing code quality, detecting duplication, unused dependencies, and complexity hotspots.
  • Leverage AI-integrated component discovery with Storybook to improve component reuse and documentation.
  • Regularly incorporate formatting, linting, and style checks into your workflow to ensure code consistency and reduce regressions.
  • Utilize headless browsers and UI testing tools like agent-browser and Chrome DevTools MCP for automated testing and debugging.
  • Implement task management workflows and document access tools to structure AI processes and enforce best practices.
  • Embed clear rules and rulesets into your code and documentation files to guide AI behavior and improve deterministic outcomes.

Summary

Introduction and the Need for Deterministic AI Tools

Wes and Scott kick off the discussion by highlighting the challenges with current AI coding practices, such as unpredictability and the issues caused by unreliable outputs. They emphasize the importance of integrating deterministic tools—like code quality analyzers, linters, and bug trackers—to make AI more reliable, predictable, and maintainable. The conversation underscores the importance of turning subjective 'vibe' coding into fact-based, logical processes to prevent errors and improve client trust.

Code Quality and Static Analysis Tools

The hosts explore various tools that analyze code quality and identify issues such as duplication, unused dependencies, and complexity hotspots. They recommend tools like jscpd.dev for detecting duplicate code across multiple languages, and fallow.tools for comprehensive static analysis including dead code detection and complexity measurement. Wes discusses the utility of these tools in helping AI generate better code by focusing on maintainability and clarity, and stresses their speed and configurability, as well as the potential for auto-fixes with caution.

Component Discovery and Error Tracking with Sentry & Storybook

The discussion shifts to methods for finding and using components efficiently through Storybook’s AI integrations, which provide documentation and usage examples, improving AI’s accuracy in component selection. They also delve into bug detection—highlighting Sentry's CLI and Spotlight tools for real-time error tracking, root cause analysis, and performance monitoring both in development and production environments. These tools aid in maintaining high code quality and ensuring bugs are caught early.

Formatting, Linting, and Styling Tools

Scott and Wes review the critical role of formatting tools such as Vite+ VP Check, ESLint, StyleLint, and custom utilities like Clint, which enforce code consistency and style standards automatically. They discuss strategies to integrate these tools into their workflows—especially in CI/CD pipelines—to catch issues early and ensure cleaner, more maintainable code. The conversation emphasizes how these tools make AI-generated code more predictable and aligned with best practices.

Headless Browsers and UI Testing Tools

The hosts explore advanced tools for testing UI components and simulating user interactions, such as agent-browser, Chrome DevTools MCP, and Lightpanda. They discuss the importance of headless browsers in QA automation, performance testing, and capturing screenshots. Wes raises concerns about resource consumption and potential misuse, mentioning the relevance of using these tools responsibly in automated workflows and scraping scenarios.

Task Management and Documentation Tools for Workflow Optimization

Wes and Scott highlight tools like Dex, Beads, and Context7, which manage tasks, to-dos, and document access within AI workflows. These tools help formalize tasks, enable task dependencies, and improve process predictability—making AI-driven project management more structured and transparent. They discuss how integrating these workflow tools can help enforce the use of quality checks at each step, especially on commits.

Enforcing Best Practices and Making AI Follow Rules

The conversation concludes with strategies for ensuring AI adheres to deterministic patterns. Techniques include embedding rules into agents.md files, creating custom ESLint plugins, and setting up scripts that run at commit or deployment. Wes notes that explicit instructions and custom plugins significantly improve reliability, and Scott emphasizes the role of documentation and clear expectations for AI behavior.

Sponsors

  • Sentry.io · Brought to you by Sentry.io

Show notes

Wes and Scott talk about making AI coding more reliable using deterministic tools like fallow, knip, ESLint, StyleLint, and Sentry. They cover code quality analysis, linting strategies, headless browsers, task workflows, and how to enforce better patterns so AI stops guessing and starts producing maintainable, predictable code.

Show Notes

00:00 Welcome to Syntax!

Losing two clients in one week

04:49 Code quality tools

jscpd.dev

knip.dev

fallow.tools

wallace

14:11 Finding and using components

Storybook AI

17:28 Brought to you by Sentry.io

17:42 Finding bugs

Sentry CLI

Spotlight

19:55 Formatting and linting

Vite+

ESLint

StyleLint

clint

25:41 Headless browsers

agent-browser

chrome-devtools-mcp

Lightpanda

32:11 Tasks and todos

dex

beads

33:32 Docs

Context7

34:22 TanStack Code Mode

36:01 Getting AI to use these tools

38:18 Sick Picks + Shameless Plugs

Sick Picks

Scott: Leaf Two Razor

Wes: Puzzles

Shameless Plugs

Phases.fm Podcast

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Follow this show on AudioBrevity and new episodes get summarized for you. Create a free account

Couldn't load the audio. A blocker may be stopping the show's tracking links. Open the file