Skip to content

Instantly share code, notes, and snippets.

@boriscy

boriscy/tools.md

Last active April 30, 2026 14:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save boriscy/1f948ec850fda45fe6faf6bf301592b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save boriscy/1f948ec850fda45fe6faf6bf301592b6 to your computer and use it in GitHub Desktop.
Download ZIP
Syntax tools
Raw
tools.md

Summary: How to Fix Vibe Coding (Syntax Podcast)

In this episode, Scott Tolinsky and Wes Bos discuss tools and techniques to move away from "vibe coding" (relying on AI's best guesses) toward deterministic solutions using facts, logic, and automated guardrails.

1. Code Quality & Analysis

These tools prevent AI from generating "slop" by detecting dead code, duplication, and unnecessary complexity.

  • Fallow (Highly Recommended)
    • What it does: A high-performance Rust tool for detecting dead code, circular dependencies, code duplication, and complexity hotspots.
    • Key Feature: Provides "maintainability scores" and identifies "code churn" to show which parts of your app need refactoring.
  • Knip
    • What it does: Specifically finds unused files, dependencies, and exports in JavaScript/TypeScript projects.
  • jscpd
    • What it does: A copy-paste detector that works across 150+ languages to find duplicate code blocks.

2. CSS & UI Consistency

AI often struggles with CSS best practices, such as hardcoding values instead of using variables.

  • Project Wallace
    • What it does: Analyzes CSS to find inconsistencies in font sizes, colors, and line heights.
  • Stylelint
    • What it does: Enforces CSS conventions. Scott suggests writing custom rules to prevent AI from using unauthorized units or colors.
  • Storybook MCP
    • What it does: Allows AI agents to access your component documentation and canonical examples so they use your Design System correctly.

3. Bug Finding & Monitoring

Instead of copying/pasting logs, these tools give AI direct access to structured error data.

  • Sentry CLI
    • What it does: Enables agents to query the root cause of errors directly from the terminal.
  • Spotlight
    • What it does: An MCP server that provides real-time local errors, traces, and logs in a "sidecar" view for development.

4. Agentic Browsers

For AI workflows that require interacting with the browser (testing or scraping).

  • Agent Browser
    • What it does: A tool by Vercel for letting agents control a browser, take screenshots, and read console logs.
  • Light Panda
    • What it does: A lightweight browser engine built in Zig for "machines, not humans." It is Puppeteer-compatible but significantly faster for headless tasks.

5. Workflow & Context

  • Dex: A task manager that saves to a .json file in your repo, allowing the AI to follow a deterministic plan stored in git.
  • Context.7: Provides documentation to AI agents to ensure they use the latest library patterns.

Strategies for Success

  1. Stop using "Wishy Rules": Don't just tell AI "don't do X" in a text file. Use ESLint or Stylelint to make it fail deterministically.
  2. Sequential Execution: Command your agent to always run a sequence (e.g., Type Check -> Lint -> Quality Check) upon completing a feature.
  3. Custom Linters: AI is very good at writing custom ESLint or Vite plugins; use it to build your own guardrails for your specific stack.

Hyperframes

Tool to make Animations on Video

https://github.com/heygen-com/hyperframes

Use gsap for animation

Aaa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment