998: How to Fix Vibe Coding

Summary of 998: How to Fix Vibe Coding

by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

44m•April 22, 2026
Listen to Episode

Overview of 998: How to Fix Vibe Coding

In this episode of Syntax, Wes Bos and Scott Tolinski discuss how to convert “vibe coding” (AI-driven, heuristic outputs) into deterministic, reliable code by adding factual, automated guardrails. They cover categories of tools and techniques—code quality scanners, linters/formatters, bug-finding and monitoring, component indexing, headless browsers, task orchestration, and documentation systems—and explain how to integrate them into AI-agent workflows so outputs are verifiable, repeatable, and enforceable.

Key takeaways

  • Vibe coding (AI guessing or improvising) can produce working output but often introduces maintainability, security, and reliability problems.
  • Deterministic tooling (linters, formatters, static analyzers, monitoring) gives binary/passable feedback that AI agents must obey or be forced to fix.
  • Integrate quality checks into agent workflows (agents.md, skills, or a single “quality check” script) or run them externally and feed results back to the agent.
  • Make rules enforceable via tools (ESLint plugins, commit/CI gating), not just guidelines in an agents file.
  • Auto-fix features are powerful but should be used carefully—review changes rather than blindly accepting modifications.

Tools and categories discussed

Code quality and static analysis

  • jscpd — duplicate code detection across many languages.
  • knip — finds unused dependencies/exports/files (JS/TS).
  • Fallo (docs.fallo.tools) — recommended by the hosts as an all-in-one fast tool for:
    • dead code, duplication, circular dependencies
    • complexity metrics (cyclomatic, cognitive)
    • maintainability/churn hotspots and refactor targets
    • architecture boundary checks and configurable thresholds
    • outputs suitable for both humans and agents; has a VS Code extension

CSS quality

  • Project Wallace — CSS analysis tool to find bad patterns (over-specified font sizes/line-heights, etc.).
  • Stylelint — CSS linting with rules to enforce design-system variables and conventions.
  • "Clint" — a newer lightweight CSS checker built with Lightning CSS parser (mentioned as an alternative approach).

Component discovery & testing

  • Storybook (and Storybook MCP server) — indexes components and canonical stories so agents can find components and proper usage examples rather than guessing from scattered usages. Helps AI place UI components reliably.
  • Storybook + automated testing/story generation helps agents scaffold tests and examples.

Bug finding, monitoring, and dev-time debugging

  • Sentry:
    • Sentry CLI for accessing errors/root causes from CLI (agent-accessible).
    • Spotlight (spotlightjs.com) — local, real-time dev error/trace/log UI for development-time debugging; useful for agents to fetch contextual dev errors.
  • General note: integrate observability into dev and prod so agents can find failure contexts.

Formatting, linting, and type checking

  • ESLint, Prettier, TypeScript — essential to enforce style and types; make checks part of the workflow.
  • VPCheck — used by VitePlus to run lint, format, and type checks with caching for speed.
  • Custom ESLint plugins — recommended to force project-specific rules (example: preventing Svelte misuse like inappropriate useEffect patterns).

Headless/browser automation

  • Vercel Agent Browser — full-featured agent-friendly browser (screenshots, logs, DOM interaction). Can connect to Electron apps via remote debugging port.
  • Chrome DevTools MCP — useful for seeing what the AI/agent is doing (visually runs Chrome).
  • LightPanda — a fast headless/browser engine (built with Zig and V8) optimized for machine usage; can be used as an engine for agent browsers.

Task / TODO management & workflow

  • Dex (dex.rip) — saves tasks to JSON and keeps tasks blocking/ordered; useful for persistent task lists for agents.
  • Beads — task manager that stores tasks in a DB and integrates with git hooks.
  • Idea: use blocking tasks and explicit dependencies to make agent work plans deterministic.

Docs and context systems

  • Context7 (Context 7) — used to give agents project docs/best-practices/context so agents can look up patterns and usage.
  • TanStack Code Mode & Cloudflare “code mode” ideas — give agents a sandbox to run TypeScript or code snippets (an MCP-server-as-sandbox model) rather than juggling many tool endpoints.

Actionable recommendations (checklist)

  • Add a deterministic code-quality scanner (e.g., Fallo) to your repo and run it locally/CI.
  • Enforce linting and type-checking on commit or CI (ESLint, TypeScript, VPCheck for VitePlus).
  • Create/enable custom ESLint or stylelint rules for project-specific anti-patterns the AI repeatedly produces.
  • Use Storybook to catalog components and provide canonical examples (index stories for agent consumption).
  • Add Sentry and use Spotlight (or similar dev-time tooling) so agents can access real errors/traces during development.
  • Use a headless/browser engine (Agent Browser, Chrome DevTools MCP, or LightPanda) for programmatic UI checks/screenshots.
  • Centralize a “quality-check” script that runs all checks and make agents run it on completion of features; alternatively run checks yourself and pass results to the agent for fixes.
  • Use a persistent task tracker (Dex, Beads) to make agent tasks blocking and reproducible.
  • Avoid blindly using auto-fixers without review—prefer actionable reports the agent must address or a guarded auto-fix workflow.

Notable quotes & insights

  • “Throw Sentry on there, brother.” — monitoring is often the missing guardrail.
  • “Love a rubric.” — scoring and binary models (test reachable / not test reachable) produce actionable results.
  • “Make it deterministic.” — move rules out of fuzzy instructions into tools that give consistent pass/fail output.
  • “AI loves to just solve a problem like where it’s at.” — agents often inline utilities, add branching, or overfit to local contexts; static analysis and refactor targets can surface these problems.

Practical pitfalls & cautions

  • Agents may ignore textual instructions (agents.md); enforce via tooling and tests instead.
  • Auto-fixers can introduce unexpected changes — prefer incremental review.
  • Agents can fake tests or assertions (e.g., use many assertions to silence type errors). Strong type/lint rules and CI enforcement help mitigate this.
  • Headless browsing at scale may require many IPs/compute; consider provider limits and costs.

Resources mentioned (search these names)

  • jscpd
  • knip
  • Fallo (docs.fallo.tools)
  • Project Wallace
  • Svelte AutoFixer / Svelte MCP tools
  • Storybook MCP / Storybook
  • Sentry (Sentry CLI) and Spotlight
  • ESLint, Stylelint, Prettier, TypeScript, VPCheck (VitePlus)
  • Vercel Agent Browser, Chrome DevTools MCP, LightPanda
  • Dex, Beads
  • Context 7, TanStack Code Mode / Cloudflare dynamic workers

If you want a quick starting plan: add Fallo + ESLint + TypeScript checks to CI, set up Sentry for prod and Spotlight for dev, and put Storybook in place if you have a component library. Wrap all checks in a single quality-check script and require that script to pass before merging.