How to Fix Vibe Coding - CourtneyR.dev's 2nd Brain

How to Fix Vibe Coding ![rw-book-cover](https://img.youtube.com/vi/LSq485DvILM/maxresdefault.jpg) 🔗 **Source:** [How to Fix Vibe Coding](https://www.youtube.com/watch?v=LSq485DvILM) > [!note]+ Document Notes > tags: #ai-development #code-quality #developer-tools > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=LSq485DvILM > date created: 2025-01-08 21:00 > > # 🏷️ Title: How to Fix Vibe Coding >  ## 🧰 Action Inbox - [H1] Implement Fellow tool for code quality analysis — comprehensive codebase health checking #code-quality - [H2] Set up deterministic linting rules instead of relying on agents.md files — enforce standards programmatically #linting - [H3] Configure agent browser for headless testing workflows — automate browser interactions #testing ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Fellow Tools](https://docs.fellow.tools) - [Project Wallace](https://www.projectwallace.com) - [Storybook MCP Server](https://storybook.js.org) ## 📝 Summary - Scott and Wes discuss moving from "vibe coding" with AI to deterministic, fact-based development - Why current AI coding often fails: lack of quality checks, breaking changes, unmaintainable code - Key stakeholders: developers using AI tools, teams dealing with AI-generated technical debt - Risks: shipping broken code, losing clients due to unreliable automations - Bottom line: Use deterministic tools and enforce standards programmatically rather than relying on AI prompts ## 📖 Main Content The hosts argue that while AI coding can be productive, "vibe coding" - where developers rely on AI without proper quality controls - leads to serious problems. They've seen developers lose clients due to unreliable AI-generated automations and codebases becoming unmaintainable. The solution involves implementing deterministic tools that provide consistent, measurable results rather than relying on AI's variable responses. These include code quality analyzers, linters, formatters, and testing tools that can programmatically enforce standards. Key categories of tools discussed: - Code quality analysis (Fellow, Project Wallace) - Component documentation (Storybook) - Bug detection (Sentry CLI, Spotlight) - Formatting and linting (ESLint, custom plugins) - Browser automation (Agent Browser, Chrome DevTools MCP) The approach shifts from asking AI "make it good please" to having concrete, enforceable criteria for code quality that can be automatically checked and fixed. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/LSq485DvILM?t=0) — [H1] The Problem with Vibe Coding - Key idea: AI coding without deterministic quality checks leads to unreliable, unmaintainable code - Evidence: "I had clients and I made all these automations for them and I just lost all these clients because things were not working properly" #### ⏱️ [02:15](https://youtu.be/LSq485DvILM?t=135) — [H2] Moving from Wishes to Facts - Key idea: Replace subjective AI prompts with objective, measurable tools - Evidence: "anytime you're working with AI, even if the output of these tools is deterministic... it gives you the same results every time" #### ⏱️ [04:30](https://youtu.be/LSq485DvILM?t=270) — [H1] Code Quality Tools - Fellow - Key idea: Fellow provides comprehensive code quality analysis including dead code, duplication, and complexity - Evidence: "looks for dead code, circular dependencies, code duplication, complexity hotspots, codebase health" #### ⏱️ [08:45](https://youtu.be/LSq485DvILM?t=525) — [H2] CSS Quality with Project Wallace - Key idea: AI often over-applies CSS properties like font-size and line-height everywhere - Evidence: "the trifecta is line height, font size, and letter spacing on every single background text element" #### ⏱️ [12:20](https://youtu.be/LSq485DvILM?t=740) — [H2] Storybook for Component Documentation - Key idea: Storybook provides canonical examples for AI to reference instead of guessing component usage - Evidence: "gives it like a real here's how you use this thing. That way it can plop it in there" #### ⏱️ [15:10](https://youtu.be/LSq485DvILM?t=910) — [H1] Bug Finding with Sentry Tools - Key idea: Sentry CLI and Spotlight provide real-time error analysis and root cause identification - Evidence: "agents can connect to the CLI and therefore the agents can look up what your errors are and get the actual root cause" #### ⏱️ [18:30](https://youtu.be/LSq485DvILM?t=1110) — [H2] Custom ESLint Rules Over Prompts - Key idea: Write enforceable ESLint rules instead of putting restrictions in agents.md files - Evidence: "Kevin from the Svelte team... put in his ESLint setup, it would fail if the agent used effect in Svelte kit" #### ⏱️ [22:45](https://youtu.be/LSq485DvILM?t=1365) — [H1] Browser Automation Tools - Key idea: Agent Browser and Chrome DevTools MCP enable headless browser interactions for testing - Evidence: "you can tell agents to hey check this in the browser. It can do screenshots and those types of things" #### ⏱️ [26:15](https://youtu.be/LSq485DvILM?t=1575) — [H3] Light Panda Browser Engine - Key idea: New browser engine designed specifically for machine automation, faster than traditional headless browsers - Evidence: "the first browsers for machines, not humans... makes it faster for interacting" #### ⏱️ [29:30](https://youtu.be/LSq485DvILM?t=1770) — [H2] Task Management Systems - Key idea: Use structured task systems like Dex instead of AI's unreliable to-do generation - Evidence: "AI loves to lift a bunch of to-dos and then like not check them off or not do them" #### ⏱️ [32:00](https://youtu.be/LSq485DvILM?t=1920) — [H3] Implementation Strategy - Key idea: Run quality checks on completion of features rather than trusting AI to self-regulate - Evidence: "upon completion of any feature, always run this sequence, run quality, run type checking" #### ⏱️ [34:45](https://youtu.be/LSq485DvILM?t=2085) — [H2] Code Mode Approach - Key idea: Some companies replacing MCP servers with TypeScript sandboxes for tool execution - Evidence: "Cloudflare replaced their entire MCP server... with simply just like giving it a sandbox to run some TypeScript" ## 📚 References - [Fellow Tools Documentation](https://docs.fellow.tools) - [Project Wallace CSS Analysis](https://www.projectwallace.com) - [Sentry CLI](https://sentry.io) - [Spotlight Development Tool](https://spotlightjs.com) - [Agent Browser](https://github.com/vercel/agent-browser) ## 🗣️ Paraphrase - Instead of relying on AI to self-regulate code quality through prompts, developers should implement automated tools that provide consistent, measurable feedback about code health and standards compliance - Tools like Fellow, Project Wallace, and custom ESLint rules can catch common AI coding mistakes like code duplication, excessive CSS properties, and framework anti-patterns before they become technical debt - Browser automation and structured task management systems help create reliable workflows that don't depend on AI's inconsistent planning and execution capabilities ## 📰 Newsletter **Stop Vibe Coding: Make Your AI Development Deterministic** If you're using AI for coding, you've probably experienced the frustration of inconsistent results and unmaintainable code. The Syntax team shares practical solutions for moving from "vibe coding" to deterministic development. **Key Tools to Implement:** - **Fellow** - Comprehensive code quality analysis for dead code, duplication, and complexity - **Custom ESLint Rules** - Enforce framework best practices programmatically - **Sentry CLI & Spotlight** - Real-time error analysis and debugging **Why This Matters:** Developers are losing clients due to unreliable AI-generated code. These tools provide objective, measurable criteria for code quality instead of relying on wishful thinking in prompt files. **Get Started:** Pick one quality tool and integrate it into your AI workflow with "always run X after completing a feature" instructions. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer education: Create workshops on deterministic AI development practices, quality tool integration - Documentation: Update AI coding guidelines to include mandatory quality checks - Community: Share case studies of successful quality-first AI development workflows #### OSPO - Policy: Establish code quality standards for AI-generated contributions - Tooling: Evaluate and standardize quality analysis tools across projects - Training: Educate maintainers on implementing enforceable coding standards #### Community - Maintainers: Create templates for quality-checking AI contributions - Contributors: Develop onboarding materials for deterministic AI development - Ecosystem: Coordinate standards for AI-generated code across related projects #### WordPress - Core: Implement quality gates for AI-assisted contributions - Documentation: Create guides for using AI tools with WordPress coding standards - Training: Develop lessons on maintaining code quality with AI assistance ## 🧪 Hypotheses - Developers using deterministic quality tools with AI will produce more maintainable code than those relying solely on prompts - Custom ESLint rules are more effective than agents.md files for enforcing framework-specific best practices - Projects implementing automated quality checks will have fewer AI-related bugs in production - Teams using structured task management will complete AI-assisted projects more reliably ### 📊 Methodology - Compare codebases developed with and without quality tool integration over 6-month periods - Measure bug reports, technical debt, and maintenance overhead between approaches - Survey developers on productivity and confidence levels using different AI development strategies ### ❓ Questions - How can quality tools be better integrated into AI development workflows without slowing down iteration? - What combination of tools provides optimal coverage for different types of AI coding mistakes? - How should teams balance automation with manual code review for AI-generated contributions? ### 🔮 Future Research - Investigation into AI models that can better understand and apply deterministic quality feedback - Development of WordPress-specific quality analysis tools for AI-generated theme and plugin code - Exploration of real-time quality feedback integration in AI coding interfaces ### 💡 Implications - Practice: Development teams need to shift from prompt engineering to tool engineering for AI workflows - Policy: Organizations should establish quality gates for AI-generated code before production deployment - Education: Developer training programs must include deterministic quality practices alongside AI tool usage - Tooling: The developer tool ecosystem needs better integration between AI interfaces and quality analysis systems ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Tool screenshots and workflow diagrams - Improve: Architecture diagrams showing quality tool integration points #### 🔊 Aural learners - Present: Podcast format with detailed verbal explanations - Improve: Audio examples of tool output interpretation #### 🗣️ Verbal learners - Present: Clear definitions of deterministic vs. vibe coding, technical term explanations - Improve: More analogies comparing AI development to traditional software practices #### 🧩 Kinesthetic learners - Present: Step-by-step tool installation and configuration guides - Improve: Hands-on labs for setting up quality pipelines #### 🧠 Logical learners - Present: Clear problem-solution structure, tool comparison matrices - Improve: Decision trees for choosing appropriate quality tools #### 🧑‍🤝‍🧑 Social learners - Present: Discussion of team experiences and community practices - Improve: Collaborative workshops on implementing quality standards #### 🧘‍♀️ Solitary learners - Present: Individual tool exploration and self-assessment opportunities - Improve: Personal coding quality checklists and reflection prompts #### 🌿 Naturalistic learners - Present: Ecosystem thinking about tool interactions and development environments - Improve: Sustainability considerations for long-term codebase health ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear headings and section structure - Improve: More descriptive link text for tool references #### Keyboard navigation - Present: Logical tab order through content sections - Improve: Skip links for long tool descriptions #### Contrast and readability - Present: Good text contrast in transcript - Improve: Ensure code examples maintain readability standards #### Text resizing and reflow - Present: Responsive content structure - Improve: Test tool interface descriptions at various zoom levels #### Media and captions - Present: Full transcript available - Improve: Time-stamped captions with speaker identification #### Forms and interactions - Present: Clear action item formatting - Improve: Interactive checklists for tool implementation ### 🌍 DEIB Assessment #### Cultural breadth - Present: Focus on universal development practices - Improve: Include examples from diverse development communities #### Inclusive language - Present: Technical explanations avoid unnecessary jargon - Improve: Define more technical terms for broader accessibility #### Neurodiversity support - Present: Well-structured content with clear sections - Improve: More frequent headings and consistent formatting #### Representation - Present: Variety of tool examples and use cases - Improve: Include perspectives from different developer backgrounds #### Psychological safety - Present: Non-judgmental discussion of coding challenges - Improve: Emphasize learning and improvement over criticism ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear logical progression from problem identification to solution implementation - Inductive strength: Multiple examples supporting the need for deterministic tools - Causal reasoning: Well-established links between quality tools and improved outcomes - Analogical strength: Effective comparisons between AI development and traditional software practices #### Fallacies - Appeal to authority: Minimal - mostly relies on practical evidence rather than expert opinions - False dichotomy: Slight tendency to present vibe coding vs. deterministic as binary choice #### Tone of voice - Overall tone: Practical and experienced, with conversational accessibility that makes technical concepts approachable ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on opposing viewpoints - Reverse victim/offender: Not applicable - Emotional cues and rhetoric: Positive, solution-focused language throughout ## 🎯 Conclusion The key takeaway is that successful AI development requires moving beyond subjective prompts to objective, automated quality controls. Rather than hoping AI will "make it good," developers should implement deterministic tools that provide consistent feedback and enforce standards programmatically. **Practical next steps:** 1. Choose one quality analysis tool (Fellow recommended) and integrate it into your workflow 2. Replace agents.md restrictions with enforceable ESLint rules 3. Set up automated quality checks that run after AI generates code This approach transforms AI from an unpredictable creative partner into a more reliable development accelerator, reducing technical debt and improving long-term maintainability. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Deterministic tools provide consistent quality feedback unlike AI prompts > [!quote] [How to Fix Vibe Coding](https://www.youtube.com/watch?v=LSq485DvILM) by [[Syntax]] via [[YouTube]]. Published 2025-01-08. Accessed 2025-01-08. > "anytime you're working with AI, even if the output of these tools is deterministic... it gives you the same results every time" Essential for moving from --- ## Full Transcript [00:00] Welcome to syntax. Today we're going to [00:03] be talking about how to turn vibe [00:05] codings vibes into more deterministic [00:09] solutions with facts and logic. We're [00:12] going to be really getting into the [00:14] depths of what are the different tools [00:16] that you can add to your setup. So that [00:18] way AI is not just guessing or making [00:21] assumptions or anything like that. So [00:23] we're going to be talking about [00:24] different code quality tools, uh, bug [00:27] finding tools, formatterers, llinters, [00:29] etc., but also the techniques in which [00:31] you can use these things. That way [00:34] you're not just like, hey, make it good, [00:36] please. All right. Is this good? I have [00:37] no idea. I have no way of figuring that. [00:39] My name is Scott Tolinsky. I'm a [00:40] developer from Denver. With me as always [00:41] is Wes Boss. What's up, Wes? Man, I this [00:44] is great because so much of this is like [00:47] people have built stuff and now that [00:49] we're what three or four months into [00:51] people building like serious stuff with [00:53] it. You're starting to see a lot of the [00:55] sort of edges crack around it. People [00:57] are, oh, this is not actually very good [00:59] and now I have a problem on my hands, [01:00] right? There was this post in the Reddit [01:02] OpenClaw the other day where this guy [01:05] was just saying like, I had clients and [01:07] I I made all these automations for them [01:08] and I just lost all these clients [01:10] because things were not working [01:11] properly. They they were breaking all [01:13] the time. I had no way to tell [01:16] >> uh that things were breaking, which is [01:19] like throw Sentry on there, brother. [01:21] You'll be able to tell when things are [01:22] breaking. Just it's an absolute mess. [01:25] And if we can like have the like pure [01:28] functional programming renaissance that [01:30] we had in JavaScript what, eight years [01:32] ago? If we can have that in this AI slop [01:36] world, I think that the outputs will [01:37] become a lot better. [01:39] >> Yeah. It It's so funny because I did my [01:41] video on the GStack stuff and that that [01:45] the video was like 34,000 lines of slop. [01:48] I think that's what it was called. And [01:50] uh you get comments especially on [01:52] Twitter where there's some [01:53] non-developers on there who are going to [01:55] be like you all dinosaurs are going to [01:57] learn that it doesn't matter what the [01:59] code quality is or if we shipped 26 test [02:02] files to the user. It doesn't matter. [02:04] But like, [02:05] >> yeah, [02:06] >> I think a lot of those people are going [02:08] to wake up at some point when they just [02:11] start hitting issues that are impossible [02:13] to solve or, you know, you're just [02:16] throwing AI back and forth at it trying [02:18] to fix [02:18] >> you push one thing and and something [02:20] else breaks and it's just an absolute [02:22] mess. And like I get it that maybe the [02:25] code doesn't matter as much, but we have [02:29] come so far from you have to worry about [02:32] your initial paint times to who cares if [02:36] you shipped 8 megs of tests. [02:38] >> Yeah, right. No kidding. Part of that [02:40] too is if like that exists then who [02:43] knows what else exists? Like are you [02:46] shipping your social security number to [02:47] everybody as well? Like if you have no [02:49] idea, you don't know, right? and and a [02:51] lot of these people get systems full [02:54] access. Yes. So, what we're going to be [02:56] diving into is really like what types of [02:59] actually deterministic tools exist out [03:02] there. And anytime you're working with [03:05] AI, even if the output of these tools is [03:08] deterministic, as in to give people [03:10] context who might not be familiar with [03:11] that word, it gives you the same results [03:14] every time, right? So, you know, AI, if [03:17] you ask it the same question, it it's [03:20] depends on on what the answer is going [03:23] to be based on a number of things with [03:25] the the AI. But like with these tools, [03:28] these are like analysis of your codebase [03:31] to output real information. The most [03:35] obvious one of those that you could [03:36] think of is something like a llinter, [03:38] right? It's analyzing the file. This is [03:40] either a problem or it's not. Yes or no. [03:42] Output the problem. Right? don't use [03:44] this X Y and Z, you know, don't use [03:47] CommonJS. There's just so many of these [03:49] little guard rails you can put in place [03:52] that could be rules, but they can also [03:55] simply just be like a pure function that [03:58] checks your code, and it's it's either a [03:59] pass or a fail. Um, and then you don't [04:02] have to worry about the wishy-washy [04:04] vibes of of an AI spitting something out [04:06] where it might pass, it might not. Yeah, [04:08] a lot of people put that solution like [04:10] you said into like an agents file, [04:12] agents.mmd file or a cursor rules or [04:14] rules file of some kind and then again [04:17] the AI can choose to ignore that. [04:19] There's been so many times when I'm like [04:21] why didn't you do this and it's like I [04:23] don't didn't want to like you I told you [04:25] you have to do this if so like who cares [04:28] >> enforceable and and to be fair like a [04:31] lot of times that does pass but when you [04:35] have like an enforcable thing and you [04:37] could put in your agents file if you if [04:40] you're worried about the code run it [04:42] through l a llin llin llin llin llin [04:43] llin llin llin llin llinter right and [04:44] then it will it will see if there's any [04:45] problems that pop up and it kind of [04:47] learns from that. [04:48] >> Yeah. So, let's actually I'm going to [04:50] start off with an interesting uh [04:52] category here, which is code quality [04:54] tools because uh code quality isn't [04:56] something that we necessarily think of [04:58] beyond like linting or something like [05:00] that. We'll talk about linting and [05:01] formatting for formatting formatting [05:04] later in this episode. But, uh the code [05:06] quality area is something that I think [05:08] has really kind of blown up just a [05:11] little bit. And I first started looking [05:12] into this and I I I found a couple of [05:14] tools. one was jscpd.dev [05:19] which is basically something that will [05:22] analyze your code to find duplicated [05:26] code blocks across 150 languages. So, [05:29] this is the very first one of these [05:30] tools that I came across. And there's a [05:32] MCP server included or an agent skill, [05:35] an AI reporter and stuff. And this uh [05:38] this tool, it's a CLI tool that will [05:41] actually scan your code and look for [05:43] lines that are duplicate cuz we know [05:45] that AI will love to just solve a [05:49] problem like where it's at. Oh, I'm I'm [05:51] going to write this utility function [05:53] that clearly should be a global utility. [05:55] I'm going to write it in this file and [05:56] use it instead of importing or or [05:58] looking for an actual global utility. [06:01] >> Um, so that helps with that because it [06:03] can output and then your tools can then [06:06] self-patch, right? So it's like, oh, I [06:09] recognize that this is some code [06:10] duplication, therefore let me fix it. [06:13] Uh, and then there's also NIP kn.dev, [06:18] which is an analysis for JavaScript and [06:21] Typescript projects. And this is going [06:24] to find unused dependencies, exports and [06:27] files. It helps analyze your code. [06:29] There's a whole bunch of different [06:30] plugins, 100 and uh 100 plus plugins [06:33] like Astro, Cypress, ESLint, etc. It's a [06:37] cool tool, but I'm going to recommend [06:40] actually instead of JS CPD or NIP, I'm [06:44] going to recommend a tool that I found [06:47] that does it all and does it all very [06:49] fast and very reliable, which is now [06:54] exists at docs.fallow.tools. [06:56] We will have these links in the show [06:58] notes. [07:00] Looks for dead code, circular [07:02] dependencies. It looks for code [07:04] duplication. It looks for complexity [07:07] hotspots uh codebase health and uh they [07:11] just added feature flag detection which [07:13] I this fellow is an active development [07:16] because every time I go to this page [07:18] there is another tool and this again [07:21] works with everything automatically out [07:25] of the box like there are tools for to [07:28] work with spelt and I didn't have to [07:30] install a single thing it just has that [07:32] plugin baked into it complexity analysis [07:37] finds the most complex functions per [07:39] file maintainability scores get churn [07:43] hotspots probably like code that's often [07:45] touched and ranked refactoring target [07:48] that's that's cool man you like look at [07:50] your codebase and say ah this is a piece [07:52] of your codebase that is often being [07:55] fussed with probably because every [07:57] single time that you add a new feature [07:58] you have to touch that it's probably a [08:01] good spot where you could refactor a lot [08:04] of that out into smaller reusable [08:06] functions. [08:07] >> Yes. And this all outputs in a way that [08:09] AI can read. It outputs in a way that [08:11] you can read. It feels just like using a [08:15] CLI llinter or anything like that. And [08:17] one thing I really like about it is that [08:20] you can configure it to be whatever you [08:22] want. Like if you're looking for [08:24] duplications, [08:25] uh you can configure the minimum amount [08:28] of tokens or minimum amount of lines [08:29] that are duplicated or what those [08:31] thresholds are and things like that. [08:33] >> That's good. cross language duplication [08:35] where it will check between Typescript [08:37] and JavaScript files by stripping the [08:39] TypeScript stuff to to see like there's [08:42] a lot of great stuff in here and it's [08:46] fast. It's fast. It works good. [08:48] Architecture boundaries, man. there [08:50] there's so many interesting stuff and [08:52] there's even an autofix feature but I to [08:55] be honest autofix features kind of freak [08:57] me out even though for some reason I [08:59] don't know if this this like an autofix [09:02] to me freaks me out more than outputting [09:05] the output into AI and being like you [09:07] fix it which I don't I don't know if [09:09] that tracks in terms of reasonability I [09:12] wonder if this complexity finding solves [09:14] the opposite of code duplication because [09:17] what I often find AI does is it will [09:19] modify by a function just and throw a [09:21] whole bunch of if statements. Oh, you [09:23] want to do this and now let me add this [09:25] one case inside of this function. And [09:27] then you end up with this just like well [09:29] if it's this or if it's this and if it's [09:30] and it's like no that's not that's not [09:32] good code at all. You're simply just [09:34] handling every single possible outcome [09:36] instead of making it into a like you [09:38] could probably delete half of this [09:39] function if you made it a little bit [09:41] more uh reusable. So yeah, I hope I hope [09:45] that that's what it does because I I [09:46] find the opposite as well is if you if [09:48] you lean too hard into like hey [09:51] >> make this maintainable and reusable and [09:53] and into a utility function then it just [09:55] starts to stuff everything into one [09:57] function. The cyclomatic complexity. So [10:01] it has a number of different complexity [10:03] metrics. Uh so the number of linearly [10:07] independent path through a functions [10:09] control flow graph. That kind of sounds [10:12] like exactly what you're talking about, [10:14] >> man. And like [10:15] >> cognitive complexity, cognitive density. [10:17] Yes. [10:18] >> How does this work? It obviously [10:21] analyzes your code. Um, but then it [10:23] probably just gives scores based on [10:25] different things. That's probably what [10:26] the plugins are. [10:27] >> Yes, there's a bunch of different [10:29] scores. Uh, there's different uh let's [10:32] see, fellow uses binary coverage model. [10:35] A file is either test reachable or it's [10:38] not test reachable mean. So there's [10:39] different types of essentially rubrics [10:43] that it's it's uh evaluating your code [10:45] on scores. [10:47] >> Love a rubric. Yes, this is the number [10:50] one tool I think that people aren't [10:52] using that can help their slob because [10:57] this is the exact types of things that [11:00] like you mentioned that AI loves to do. [11:02] It it loves to just just solve a problem [11:05] as efficiently as it can. not as [11:08] efficiently as your codebase should have [11:10] and then that can lead to [11:12] maintainability issues. It can lead to [11:14] performance issues. It can lead to bugs [11:16] overall. Yeah. Yeah. And even if you are [11:20] vibe coding, you probably just pipe the [11:22] output of this right into the AI as well [11:24] and say, "Hey, fix it." Just being able [11:26] to find potential issues in your code [11:30] that are are not necessarily like syntax [11:32] errors or security errors, but they're [11:34] simply just like bad programming. That's [11:37] cool. I'm I'm gonna gonna check that [11:39] out. [11:40] >> There's even a VS Code extension for it. [11:42] It's written in Rust, so you know that [11:43] it is fast. [11:44] >> Probably amazing. Then it must be. [11:47] >> Yeah. Um here's another one. So there's [11:49] also CSS. And one of the tools that I [11:52] really like for CSS uh code quality [11:55] finding is uh Project Wallace. Now [11:58] Project Wallace has a CLI as well. It [12:01] can analyze your CSS variables and [12:04] things like that. This would take a [12:07] little bit more work to tell the AI like [12:10] how to interpret the results here. It's [12:12] not just giving it a punch list of [12:14] things to change. But I do think that [12:17] it's a cool tool to have in your toolbox [12:20] for when you're working with CSS, which [12:22] is another one of the things AI sucks [12:24] at. One thing that I I want to see more [12:26] of is tools like the spelt autofixer [12:30] which comes in their spelt mcp which [12:33] will basically read your file and tell [12:36] you like what is not spelt best [12:39] practices. So I I don't know like what [12:42] other frameworks might have tools like [12:44] that. I'm very sure that other [12:46] frameworks probably do but uh you can [12:50] search for those. I did a number of [12:51] googling around but there's a lot of [12:53] people talking about it. So, leave a [12:54] comment below if you have a specific [12:57] React fixer type of deal or a uh [13:00] viewfixer for things that might be [13:02] considered not best practices that might [13:04] be hard to lint about. [13:06] >> Man, the project Wallace is really good [13:08] for finding like one thing that AI loves [13:10] to do is set font sizes and line heights [13:14] explicitly on every single thing, you [13:16] know, [13:17] >> and go. like why did you set like it's [13:20] the the trifecta is line height, font [13:23] size, and letter spacing on every single [13:26] >> background text element in there. Yeah. [13:29] And Project Wallace is is excellent at [13:31] like hunting those out and figuring out [13:33] where that's gone wrong. And and [13:35] generally that's because you haven't set [13:36] up anything in the first place. If you [13:39] just tell it [13:40] >> make a cool UI and it goes nuts with [13:43] those types of things. So if you have [13:44] those things in place beforehand, maybe [13:46] it doesn't happen as often. [13:47] >> Yeah. as we saw in the codec system [13:50] prompt and the open codec system prompt, [13:52] it says use gradients and expressive CSS [13:55] and stuff. So yeah. Yeah, that stuff [13:58] >> I get cuz it looks better than some of [14:00] the crap that gets pushed out, [14:02] >> but then [14:03] >> it it just does it all the time, you [14:06] know, and then everyone it overdo does [14:08] it and it becomes played out and it [14:09] looks awful. It's hard to maintain all [14:11] that. [14:11] >> All that. Yeah. Uh next one here is for [14:14] finding and using components. Now, this [14:16] is a a tool that requires a bit of buy [14:19] in, but one of the problems that AI has [14:21] is certainly like looking up and finding [14:23] appropriate components, knowing when uh [14:26] like testing components and isolation. [14:28] We actually use storybook on the syntax [14:31] uh website and storybook has some really [14:34] good new AI tools uh specifically around [14:39] finding and indexing your components, [14:42] testing your components. So, there is a [14:45] storybook MCP server that the thing that [14:49] I I like most about the storybook MCP [14:52] server. Now, it does require buy into [14:54] storybook, but if you're already using [14:56] Storybook, this gives you a number of [15:00] things like uh list all documentation, [15:03] get documentation, uh those types of [15:06] things. So that way like when you say I [15:10] need this component or whatever, it's [15:12] not just doing a find in your codebase [15:16] looking for components and then trying [15:18] to guess here. It it's actually like [15:20] okay here are all of the components. Get [15:22] that components documentation. [15:24] And one of the more powerful things is [15:26] that there becomes canonical examples [15:30] because you're using stories to show how [15:32] the components used because typically [15:35] the AI is going to use the what like the [15:37] type signature and or maybe other prior [15:40] usage of that component. But this gives [15:42] it like a real [15:44] >> here's how you use this thing. That way [15:46] it can it can plop it in there. [15:48] >> Man, if you have a really good design [15:50] system and a whole suite of components [15:52] that you can then use [15:54] unstoppable with with AI stuff, [15:56] especially when you're like simply just [15:58] clicking together like a new view and [16:00] you already have all the pieces for that [16:03] and you just need to like wire them up, [16:04] maybe write a bit of logic and how how [16:06] to interact with it. [16:08] >> Great use case. So I I've become more of [16:10] a believer in the storybook stuff since [16:14] all of the AI. I always have enjoyed it, [16:16] but like now where you have a nice clean [16:20] example of how it works and you you feel [16:22] comfortable about how it looks on its [16:24] own and how it works and interacts so [16:26] much better. Yes. And I and I find that [16:28] like man even with AI story book becomes [16:32] a little bit less annoying because I'm [16:34] not having to hand author all the story [16:36] components like [16:38] >> oh yeah [16:38] >> just oh now I got to make a companion [16:40] component for all this and copy and [16:42] paste and do this and that you know so [16:44] >> testing is like that as well. All of a [16:45] sudden everybody loves testing because [16:47] you don't have to do all this. [16:49] >> I love testing because with AI my tests [16:51] always passing it out [16:52] >> because uh AI will just make them pass. [16:55] >> Yeah. Well, like not not exactly that, [16:58] but like the just the work of of like [17:00] scaffolding them out and writing them [17:02] and coming up with potential like use [17:06] cases where things will break or even if [17:08] you have a bug, you know, just throw [17:10] that bug in there, write a test. [17:12] >> Yeah, I think testing has never been [17:13] more valuable, but also more disposable [17:16] in a way where it's really easy to just [17:19] be like, I don't know, tests are passing [17:20] because the AI wrote them, whatever. But [17:22] at the same time, it's also really handy [17:25] to be able to easily move through [17:28] testing. Next one here is bug finding. [17:30] Now, I just have these two Sentry tools. [17:33] Sentry, which is well, Sentry presents [17:35] syntax. Head on over to centry.io/sax [17:38] and I'm get uh two months for free with [17:40] the coupon code tasty treat, all [17:42] lowercase, all one word. But these two [17:44] tools I think are really fantastic. One [17:46] is the Sentry CLI which everything CLI [17:50] these days but the Sentry CLI allows you [17:52] to you authenticate with your Sentry. Um [17:56] you can get the root cause of any error [17:58] in your Sentry. You can see all of the [18:00] relevant errors in your project directly [18:03] from your CLI. The agents can connect to [18:06] the CLI and therefore the agents can [18:08] look up what your errors are and get the [18:11] actual root cause and then fix the thing [18:13] for you. It's very seamless. So, if [18:17] you're if you're using Sentry already, [18:19] plug in the CLI to with whatever you're [18:21] doing. And if you're not, yeah, check it [18:23] out. Uh, another tool that I think has [18:25] gone under the radar a bit is the [18:27] Spotlight tool from Sentry, [18:29] spotlightjs.com [18:32] is an MCP server that gives you real [18:36] time local errors, traces, and logs. And [18:39] it gives you essentially a local [18:41] interface for debugging in development. [18:46] And so this is a tool that is primarily [18:49] used for while you're in dev. You're [18:51] talking back and forth and the agent [18:53] isn't having to hunt in the browser [18:57] logs. It's not having to hunt in your uh [18:59] terminal logs. It has all of that [19:02] information directly in an organized [19:05] way. So that way again you're not [19:07] copying and pasting back and forth with [19:09] the agent or you're not having to use a [19:11] headless browser that then has to scoop [19:14] up those errors dev tools and and paste [19:17] in your logs. Just a nice tidy spot for [19:20] >> all of your info that you're probably [19:23] interested in that info in in prod, [19:25] right? And you're using centry for that. [19:26] But in development as well sometimes [19:28] that or often that info is extremely [19:30] helpful um especially when you're using [19:32] agents. [19:33] >> Yeah. and you still get that root cause [19:35] analysis which I think is super helpful [19:37] but there's also performance so you can [19:40] get database query timing API request [19:43] waterfall component render times like [19:46] you get all of this in your local devow [19:47] and I don't feel like enough people talk [19:49] about this tool because I I find it to [19:51] be very helpful so it's easy to install [19:53] works with everything and uh I like [19:54] spotlight next step on the list is [19:57] generally formatting and linting these [19:59] are tools that again uh we many of us [20:02] have just always use formatting and [20:04] linting tools or even type-checking [20:06] tools like just TypeScript. But like [20:08] these things become very important when [20:11] you are wanting to tell your agent to [20:14] always run, you know, type checking, [20:16] always run linting after completing a [20:18] feature. All this stuff and moving again [20:21] these general like is this a problem or [20:24] not out of the brain of an AI scanning [20:28] your code for problems and into a [20:29] checklist of fix this, fix this, fix [20:31] this. Um, one thing I really like in [20:34] this regard is [20:36] uh, Vit Plus uses VP check to run [20:40] linting and formatting and type checking [20:43] if you wanted to. Uh, it does so with [20:45] caching. It's just the best for this [20:49] type of thing. So, if you're using Vit [20:50] Plus, the VP check is the the one to [20:54] use. It's really great. But otherwise, [20:56] using something like ESLint is just [20:59] becoming more and more important. Now, [21:00] one thing I think that's really [21:02] underutilized here is that a lot of us, [21:05] as we've mentioned, have issues that AI [21:07] just continues to do. Like [21:10] >> in spelt, it's a problem where it just [21:12] uses effect for everything. It's like [21:14] brother [21:16] just coerces the value, you know, it [21:18] uses as or it just like makes up its own [21:21] types. Oh, I expect that this is what [21:24] the template looks like, so I'll just [21:25] throw a type above it. And it's like no [21:27] that that should be inferred from from [21:30] like the database something like that. [21:31] And it I feel like with Typescript a lot [21:33] it as good as it is as TypeScript it it [21:36] cheats it quite a bit. [21:38] >> Yeah. [21:38] >> A lot of people are just like oh no test [21:40] pass you know types there's no type [21:42] errors. Yeah because you just use [21:44] assertions everywhere. [21:46] >> Yeah I know. And so one of the things [21:48] that like I think vibe coders might do [21:50] in this situation is just put it in [21:53] their agents.mmd saying hey don't do [21:55] that. Please, no, don't. But that's like [21:56] a sign that says don't that you can just [21:58] walk past, right? Like the AI agents [22:00] won't adhere to that. They're going to [22:02] consider it. But if you put it into a [22:05] tool like this, then that changes things [22:07] quite a bit. So, uh, I I think Kevin [22:10] from the spelt team was saying that he [22:13] even put in his ESLint setup, it would [22:15] fail if the agent used effect in spelt [22:19] kit just because of how much it was [22:22] doing it. So he wrote a custom ESLint [22:24] plugin just to check for those types of [22:26] things. And I think that's really [22:28] underutilized. Writing custom ESLint [22:30] plugins instead of just tossing stuff [22:33] into your agents.mmd. Yeah, [22:35] >> I think is something that people don't [22:36] do enough. [22:37] >> Make it deterministic. You know, don't [22:39] write a wisher rule. And [22:42] >> the beautiful thing about that is that [22:44] it is so easy to get the AI to write a [22:46] deterministic plugin, right? and and [22:49] then you can write tests against it and [22:50] see that it actually works. It's man [22:53] I've written like three Vit plugins in [22:55] the last like six months as well just [22:56] because it's so easy to spin one up. [23:00] Yes, I know it's it is. Uh and then on [23:02] the CSS tip of things, Styent is still [23:05] great. It's something that is so [23:06] underutilized. I think I've said that [23:08] about a hundred times on this podcast. [23:11] Stylent is basically CSS linting in the [23:14] same type of way. It helps you find [23:16] those exact type of things. expected [23:18] custom property name this allowed unit [23:20] like again like all right you are [23:23] assigning a background color or you're [23:26] assigning a box shadow without using one [23:27] of our predefined shadows that's in a [23:29] variable or you're giving a color that's [23:31] not in our variables it's going to error [23:33] on this and then you know that can be [23:36] used in addition to actual like agents [23:38] MD files uh about saying what to do in [23:41] those types of situations I am working [23:43] on my own because stylant is great but I [23:47] would rather a tool that was more [23:50] effortless. [23:52] So I I made one using the lightning CSS [23:57] parser because I wanted it to be faster. [24:00] I wanted it to be, you know, tuned to [24:03] kind of modern CSS sensibilities. [24:06] >> Yeah. So what's what's wrong with [24:08] styint? [24:10] >> I find styint to be difficult to work [24:13] in. I find it to be a bit bloated. It's [24:18] been around forever. It's very [24:20] fullfeatured, but I'd rather it be like [24:26] like Parcel or even like with the new [24:29] Vit stuff, right? Where it is just [24:32] really smart defaults, [24:35] >> no configuration, [24:36] >> throw it in there as long as you're okay [24:38] with it. Like, [24:40] >> yeah, [24:41] >> that's what that's what I've been [24:42] telling people with like oxlin and ox [24:43] format and stuff in most cases like I [24:47] just put my I've put so much of my like [24:50] eslint and prettier config away and I [24:54] was like I'll just I'll just use this [24:56] you know and for for newer projects or [24:58] projects where like a massive changing [25:01] thing I maybe two or three changes I [25:03] added to it so I wouldn't have this [25:05] massive commit that just changed the [25:07] entire codebase but if yeah as long as [25:09] you just like lay down and accept the [25:11] defaults. Sometimes that's better. [25:13] >> Yes. And so that's really what this is [25:15] about. And man, is it fast. It works [25:17] with all my stuff. It's called Clint, [25:20] like CSS lint Clint. Uh check it out. [25:23] And uh I I it's still early, but it does [25:26] no unknown properties, invalid values, [25:28] duplicate selectors, duplicate [25:30] declarations, empty rule sets, those [25:32] types of things. And I think it does so [25:34] very fast and nice. So uh give it a try. [25:37] and accepting uh contributions to it. [25:40] That would be great. Uh next one here is [25:43] making your browser usage headless. The [25:46] king of this area is the agent browser [25:49] from Verscell. Agent browser is great [25:52] because it's very fullfeatured. You can [25:55] tell agents to hey check this in the [25:57] browser. Uh it can do screenshots and [26:00] those types of things. It can handle [26:02] anything that a browser would be able to [26:04] really is what it comes down to. And for [26:06] the most part, I don't have a lot of [26:08] complaints with agent browser. [26:10] >> No, it's it's great. Especially because [26:12] like one cool thing with agent browser [26:15] is that you can hook it up to any [26:17] Electron application. And all you have [26:19] to do when you're starting the Electron [26:22] application is you have to start it with [26:24] like a remote debugging port um which is [26:27] an an argument. So you can open Slack [26:30] and pash it d- remote debugging port [26:33] 9222 and then your agent browser skill [26:38] will be able to connect to it. And like [26:40] I sent Scott's like what what were you [26:42] using? I was like I use agent browser [26:44] and I sent him a message from I just [26:48] went into cloud and I was like use the [26:49] agent browser. Um you have to restart [26:51] Slack with the with the flag but it can [26:53] do that because it can run terminal [26:55] commands, right? And then it just sent [26:56] like Scott a little message. And I set [26:58] that up the other day because we were [27:00] doing um a battle with the CJ, Scott, [27:04] and myself. We were doing a battle where [27:06] we like couldn't use the mouse. And I [27:08] thought that Randy was going to post [27:10] something in Slack, like a screenshot or [27:12] something like that, and we weren't [27:13] allowed to like copy paste it. So I was [27:15] like, I'm going to get my agent browser [27:17] dialed in so that if Randy posts [27:20] something in Slack, I'm going to be able [27:21] to get that image out of Slack into my [27:24] editor. and it ended up working, but it [27:26] ended up not being what Randy had [27:28] planned for us. So, I'm ready for the [27:30] next one. Yeah. Yeah. Uh there's also [27:33] Chrome DevTools MCP, which is uh great [27:36] for this as well. The thing I like about [27:38] Chrome DevTools MCP is that it pops open [27:41] a little Chrome that you can see it [27:43] executing your stuff on nice and easily. [27:45] I think that's the default way that it [27:47] works. I don't know if you can even turn [27:48] that off if we're being honest, but I [27:51] like that I can see what it's doing. [27:53] Like sometimes sometimes the AI uses [27:56] like the wrong like it just assumes it's [27:58] like oh this is a feed site. Of course [27:59] it's on port 5173. Okay let me and then [28:02] it's like the wrong site and it's like [28:04] huh for some reason the app is showing [28:06] something weird here. I'm like that's [28:08] cuz you're at the wrong app and you [28:09] didn't check the port. [28:11] >> So yeah Chrome Dev Tools MCP great great [28:13] uh usage for that as well. But having [28:15] these tools are great because again you [28:17] can look at the uh they can take [28:19] screenshots and see what it looks like. [28:20] can read the console log and and it can [28:22] read the network panel and those types [28:24] of things. Another option here is light [28:26] panda. Have you seen light panda? [28:29] >> I I had this on a list for another show [28:32] um that I've been been mulling around. [28:34] So they rebuilt an entire browser. Um it [28:38] uses it uses V8, but it's apparently way [28:41] faster for headless. And I I went back [28:44] and I I looked at it. It says the first [28:47] browsers for machines, not humans. And I [28:50] was like, "Wow, they're like they really [28:52] are going hard on this like aentic [28:54] browser, which apparently is it makes it [28:56] faster for interacting because that's [28:58] the one thing about these like puppeteer [28:59] and these headless browsers. They're [29:01] slow as molasses because they got to [29:04] like take a screenshot or or go to the [29:06] DOM and then send a click event. [29:08] Absolutely. So brutally slow." So Light [29:10] Panda is like a a new browser that they [29:14] basically just took V8, which is like [29:15] the engine. It can run JavaScript. Um, I [29:18] don't know if it runs CSS or not, but [29:22] because it just needs like the the [29:24] markup, right? And then it runs faster. [29:27] >> I looked into it because I was like, [29:29] what is this? I was like, they didn't [29:30] just build a browser from scratch, you [29:32] know, like that's crazy. Ladybird is [29:34] doing that, but they are crazy. [29:36] >> Yeah, cuz it just says a browser engine. [29:38] So, okay. Yeah, it does say Light Panda [29:40] is written with Zigg and it uses build [29:44] the V8 engine for Zig.js JS runtime. [29:47] Interesting. Yeah. Okay. [29:49] >> Yeah. And I looked into it. I went on [29:51] way back machine and I was like, this is [29:52] not just some thing that someone vibed [29:54] up in the last like 6 months because [29:57] everything everything is agents. And [29:58] they it they used to be a browser for [30:01] scraping, which makes sense. So they [30:03] they were they used to be this thing [30:04] that like scraped websites and got data [30:07] and it was as fast as possible. And I [30:09] guess they've sort of changed. I guess [30:11] that still is a big use case, right? Is [30:13] visiting websites and scraping. [30:15] >> Yeah. You know there's pricing on here. [30:17] Is the pricing only for their cloud pro [30:20] but or is it just using light panda in [30:22] general? [30:23] >> That's you can install this thing and [30:24] run it no problem. I think the [30:26] >> okay thing that nobody is talking about [30:28] with these like AI agents and whatever [30:30] is that you need a lot of IP addresses [30:34] and you need a lot of compute to [30:36] actually run these browsers. Um and and [30:38] often it doesn't make sense to like run [30:41] a headless browser inside of like a [30:43] serverless function, right? So you see [30:45] like Cloudflare has their own like [30:47] browser thing that you can use to take [30:49] screenshots and it's it's like it's [30:51] Puppeteer compatible and then they have [30:53] this thing as well. But I think the [30:55] other thing that a lot of these [30:56] companies that do this are not talking [30:58] about is that they probably run them on [31:01] either in like people's houses. I think [31:04] I don't I don't know if this is true or [31:06] not, but I I listened to this really [31:07] good Darknet Diaries about these like [31:09] streaming boxes [31:11] >> and I've also gotten lots of emails from [31:13] people saying I have residential IPs [31:15] available and it's because [31:18] >> you can't just like use a VPN and like [31:20] scrape a thousand websites. They're [31:21] going to block you. They don't want you [31:22] doing that. Many of these places don't [31:24] want you doing that. So, what you need [31:26] really is like something like light [31:28] panda running on somebody's illegal [31:31] streaming box and you have like a nice [31:34] clean IP address that you're able to [31:37] send requests out on behalf of someone. [31:38] I don't know that that's actually [31:40] happening, but and I don't know that [31:42] this is light panda is doing this, but I [31:44] guarantee that's happening in some [31:46] regard right now in our industry. [31:48] >> It's very interesting. And also if [31:50] you're curious out there, you can have [31:53] agent browser use light panda as the [31:56] engine. So if that's like [31:58] >> it's like puppeteer compatible, right? [32:00] >> Yeah. If you want to just have your [32:02] whole setup with agent browser that you [32:05] already have and then pop in light [32:08] pandas the engine. It's a simple config [32:10] change. Another thing here we have is [32:12] tasks and to-dos, which man, AI loves to [32:17] like lift a bunch of to-dos and then [32:19] like not check them off or not do them [32:21] or every single AI harness has its own [32:24] to-do system and they're all crazy and [32:26] they don't get saved to your database. [32:28] So, I have a couple of tools here and [32:31] this is less for deterministically [32:33] scanning your codebase, but this is more [32:36] for a general workflow type of thing. I [32:39] use Dex uh at dex.ri which saves [32:43] everything to a JSON file. And then [32:45] there's beads which is one that's [32:46] popular that stores things into a [32:48] database and uses gith hooks. But either [32:51] way the things that are nice about these [32:53] is that they can be blocking uh you can [32:57] have uh tasks that are blocking other [32:59] tasks. You can have a clear execution of [33:01] this then this then this and again it's [33:04] commits to your GitHub repo. You can [33:06] take it with you. This is again less of [33:08] a a code deterministic thing but more of [33:10] a plan deterministic thing. Uh that way [33:13] if it's saying give me the next task to [33:15] do. It's not just like huh what should [33:16] we do? It's like okay this is blocked by [33:18] this which is blocked by this. Let me [33:20] pick this and then let's implement this. [33:22] And then again you can have descriptions [33:24] where you're passing in actual code [33:25] paths and stuff. Uh so I I like dex.ri [33:29] for this and not just because it was [33:31] made by my boss. Next one here is [33:34] context 7 for docs. I still use Context [33:38] 7 quite a bit because in this this whole [33:42] platform of AI agents knowing what to [33:45] do, you can have best practices, you can [33:47] have skills that are telling it this or [33:50] that, but a lot of times just having the [33:53] docs in context 7 v MCP I find to be [33:58] still the best. It just looks it up, [34:00] gets the answers, possibly usage [34:02] patterns and stuff like that, and then [34:04] is able to uh assess a better version of [34:08] like, okay, this is what it should be [34:11] done like because I have the docs. So, [34:13] that one's been talked about to death. [34:15] And again, less deterministic about your [34:17] current code and your current quality, [34:19] but when you're looking up patterns and [34:20] examples, context 7. Great. [34:23] >> Yeah. Did you see Tanstack had code [34:25] mode? they released the other day and I [34:26] think this is similar to the Cloudflare [34:29] code mode that they came out there. [34:30] Cloudflare replaced their entire MCP [34:33] server, which was they had like seven or [34:35] eight different MCP servers that you [34:37] could hit and and what happens is that [34:39] you get so much context blo and and it [34:41] has to work really hard to figure out [34:43] which tools to call whatever. And they [34:45] replace the whole thing with with simply [34:47] just like giving it a sandbox to run [34:49] some TypeScript because the LLM is it's [34:51] pretty good at running tool calls, but [34:53] it's really good at just simply writing [34:55] TypeScript that can can be run, right? [34:56] It's the same idea that everybody is [34:59] saying don't use MCP just let it run [35:01] CLI. The the agent is very good at [35:04] running CLI calls. So in the same way [35:06] the agent is very good at writing [35:08] TypeScript. And if you give it this [35:10] sandbox where it can run TypeScript, I [35:13] won't get into it. We'll do a whole show [35:15] on it. But you get like the schema, you [35:17] can call all these different tools and [35:18] and then it will then execute it, right? [35:21] It might return documentations. It might [35:23] update your your Cloudflare dashboard or [35:25] whatever. And it's like a really [35:26] interesting way to make an MCP server is [35:30] basically just giving the LLM a little [35:32] spot to run some code that is in [35:34] sandbox. That's what the Cloudflare [35:36] dynamic workers are. Now, Tanstack came [35:38] out with their own code mode, which is [35:40] really cool, a spot to like run this [35:42] all. So, I think we should probably do a [35:44] whole show on this because this is very [35:45] interesting. We're all trying to figure [35:47] out what all these tools are and how [35:49] they best work. And I think this code [35:52] certainly hits on some of those. Code [35:54] mode is an interesting name for that. I [35:57] uh don't know if I get the naming, but I [35:59] I I'm keeping an open mind here. So, at [36:02] the end of the day, how do we get AI to [36:05] use these tools? We beg them. We put [36:08] them into our agents.nd file. We put it [36:12] into skills. We we tell it, hey, always [36:15] Yeah, I I've had good luck with saying [36:18] >> upon completion of any feature, always [36:22] run this sequence, right? Runow quality, [36:26] run first run type checking or VP check, [36:29] then run checking, then do this, then do [36:32] that. I've had good luck with that. But [36:35] at the end of the day, you can run them [36:38] yourself and give the output to the AI [36:40] agent and say, "Hey, fix these things." [36:43] Or you can say in your agents, please do [36:45] this. Or you can have skills which is [36:47] like my quality check skill commands [36:50] that run the quality check commands. But [36:52] it's very difficult. Uh besides that, um [36:56] you can always wrap this all up into one [36:58] quality check script that then runs all [37:01] of your quality checks. [37:02] >> Yeah, you could run it on like a commit, [37:04] which is pretty common thing to do, [37:05] right? Like you're not allowed to commit [37:07] any code if these things are failing. [37:09] Some of them are a little bit more like [37:11] annoying because you're like, well, it [37:13] surfaced that and I don't necessarily [37:14] care about that and then I have to go [37:15] and put this weird comment in my code to [37:17] ignore that. But running it on commit is [37:21] maybe a good idea. That means it will [37:23] never actually make its way into your [37:25] your codebase until things pass. [37:27] >> Yeah. And honestly, I found it to be [37:29] better to be in control of the output of [37:32] these things rather than just being [37:34] like, "Oh, go ahead and just do whatever [37:36] you got to do to get these things [37:37] passing or fixed, etc." But I think [37:39] that's it for all of the the tools and [37:41] things that I have here. Wes, is there [37:43] anything else in your toolbox that you [37:45] use to make AI more deterministic? [37:48] >> Just swearing mostly. Um, we did find [37:51] out via when the cursor thing leaked, we [37:54] did find out that swearing at cursor [37:56] does log into an internal anthropic [37:59] dashboard and they have an F chart that [38:02] they can see um how angry their users [38:05] are. So swearing does swearing at your [38:07] LLM does work. [38:09] >> I wonder if I'm on the leaderboard. [38:10] That's all I got to say. [38:12] >> There certainly is the top. [38:15] >> Oh, that would be that would be [38:18] hilarious. All right, let's get into [38:19] sick picks and shameless plugs. I have a [38:22] sick pick, which is a razor. I I I don't [38:26] like I'm going to be real. I don't know [38:28] if they're like straight razor or like [38:30] whatever. People are snobbish. I would [38:32] assume they are. I'm not clued into [38:34] that. I have been advertised this leaf [38:39] razor on Instagram a whole ton. And it's [38:42] all metal. It uses single blades like SN [38:46] half blades or whatever. And the blades [38:49] are just so incredibly cheap. You can [38:51] get really nice blades from different [38:53] places. Um you don't have to buy their [38:55] specific ones. It's standardized. But [38:58] this razor in particular is a twoblade [39:01] razor. And because the blades are so [39:04] cheap and standardized, the idea is that [39:06] every time you're shaving, you're just [39:08] popping two new blades in there. There's [39:10] like no disposable plastic anything [39:13] that's getting tossed in the landfill [39:15] somewhere. It's all just really great. [39:18] So, I had the prior single blade one [39:22] called the I believe it's called the [39:23] Thorn or the Twig and that's for like [39:26] using like edge like lining up things [39:28] and stuff. And I I liked it for so long [39:31] that I was like, you know what? I'll [39:32] just get the two blade one for for [39:35] normal shaving. And my god, I it's it's [39:40] just like a completely different [39:42] experience because every single time you [39:44] got these just beautifully sharp blades. [39:47] >> Twice as much. Yeah. Oh man. A fresh [39:50] blade. Man, I don't I don't use razors [39:52] to shave cuz my skin gets on fire, [39:54] right? I just turn into like a red [39:56] tomato. But I cut things with razor [39:59] blades. And a fresh one, man. I bought a [40:02] 100 pack for my like utility blades. [40:04] Nothing better. Yeah. Nothing better, [40:07] man. It just like, man, shaving has [40:09] gotten so much nicer and it's fast. [40:11] >> You have the old timey like you brush it [40:14] on. No. [40:16] >> No. I'm not that snobbish about it, [40:17] which is why I'm concerned that there [40:19] people be like, "Oh, you buy the leaf [40:20] razor." Yeah. [40:21] >> Yeah. But [40:23] >> it worked great. So, uh uh really cool, [40:26] really nice, and happy with it for sure. [40:28] >> I'm a sick pick something really silly. [40:30] Puzzles. We've been doing puzzles with [40:32] our kids lately. [40:34] >> Yeah. puzzle. [40:35] >> They're a hoot, right? It's fun to like [40:37] think about how I I can't get it out of [40:39] my brain that I would love to build a [40:41] bot that could solve the puzzle. I know [40:44] I know Mark Robber did it on one of his [40:46] videos and ever since he did that, I was [40:48] just like, man, [40:49] >> that would be so cool. And then I look [40:51] at the the puzzle pieces and they're all [40:55] different. I was like, what's the [40:56] algorithm for making these [40:58] >> swoops, you know? I just want to learn [41:00] so much more about puzzles. But my kids [41:02] absolutely love them. It's super fun. [41:03] So, just generally get a puzzle. [41:07] >> Get a puzzle. Yeah. My my daughter [41:10] >> is she's got the engineering brain and [41:13] she is really good at puzzles. [41:15] Shockingly good at puzzles. So, that's [41:18] like one of her favorite things to do. [41:20] And so, it's it's so funny. I've never [41:22] been into doing puzzles, but now her and [41:24] I sit down and do puzzles all the time. [41:26] And it's so such a good time to connect. [41:29] And like, man, [41:30] >> she really loves it. Yeah. even just [41:33] like the content of the puzzle. Like we [41:34] got one which is like like 20 countries [41:37] in in Europe or something like that. [41:39] It's like the countries of Europe and it [41:41] just shows like a monument and like [41:43] something like like the Eiffel Tower and [41:45] a baguette and that's France, right? And [41:47] the flag and my it's so fun to like be [41:50] like, "Oh, we've been there." Or like, [41:51] "Oh, that'd be kind of cool to visit [41:52] that." [41:53] >> Yeah, we got an outer space one. She's [41:54] naming all the planets. She knows all [41:56] the she's giving me facts about all [41:58] kinds of stuff. Um, but yeah, no, [42:00] they're they're uh and we push it, too. [42:02] So, every single time we're like, "All [42:04] right, we're going to go a little bit [42:05] crazier with this one." And uh yeah, [42:07] she's doing some [42:08] >> We should make a syntax puzzle, [42:10] >> man. Yes. Count me [42:12] >> or like like a code mode puzzle [42:15] >> where like cuz you could read the code [42:17] on the pieces and know where that goes. [42:20] >> That would actually be kind of funny. [42:22] >> That actually be Yeah. code puzzle. And [42:24] then the code could be funny in some [42:26] sort of way. I'm real quick before we [42:29] get out of here, I do want to [42:30] shamelessly plug my wife's podcast, [42:32] Phases.fm. [42:34] Man, she uh she's been working really [42:37] hard on this and uh just her first video [42:39] episode, which is going to be on [42:40] YouTube, phases FM, or it's on Phases uh [42:44] FM is the website, but you can find it [42:46] in any major podcast app. Just go to the [42:48] website and there's links to all that [42:49] stuff there. I want to also shout out [42:52] the transistor.fm, [42:55] I believe, is the URL. Transistorfm as a [42:58] podcast hosting platform. It's really [43:00] good, Wes. And I know we we we use [43:03] Megaphone for ours. We used Libson [43:05] before. They have a really neat feature [43:07] on here which is like showing you amount [43:10] of downloads in the release window. So [43:12] it's not just like day one downloads. [43:14] It's like you can get hotspots for [43:16] seeing what the re release window looks [43:17] like. And one interesting thing that [43:19] they've add they're adding right now [43:21] that you might be curious about is video [43:24] distribution where now that Apple's [43:27] added video content. [43:28] >> That's why we didn't go with them cuz [43:29] there was no standard for [43:32] >> Yes. And so they're implementing that [43:34] and I I'm curious to see I've signed up [43:37] for the waiting list. So Justin, if [43:39] you're listening, uh please get me on [43:40] that waiting list because I want to try [43:42] >> I went out for lunch with him a couple [43:44] months ago. So I I'll get I'll get you [43:47] in. I'll get get me in. Yeah, cuz I'm [43:49] interested. Uh, it's good product [43:51] though, man. It's really good. So, shout [43:52] out to Shan Sister. Check it out. [43:54] >> Canadian product as well. Of course, all [43:56] good all the good things are Canadian. [43:58] >> I didn't even say what my wife's podcast [44:00] was. It's a parenting podcast. She's a [44:02] psychologist. She's a doctor of [44:04] psychology. She taught master's level [44:07] human development courses. So, she's [44:09] brilliant and uh [44:11] >> what she's doing. [44:12] >> She's talking about human development, [44:14] neurodeiversity. She's talking about [44:16] kids and parenting in like a [44:17] scientifically backed, light-hearted, [44:19] fun way. So, check it out. [44:22] >> Cool. All right. Thanks for tuning in. [44:23] Catch you later. Peace. [44:24] >> Peace.  📄 **Full text:** ![[Full Document Contents/Articles/How to Fix Vibe Coding.md|How to Fix Vibe Coding by YouTube]] ## Highlights - Welcome to syntax. Today we're going to be talking about how to turn vibe codings vibes into more deterministic solutions with facts and logic. We're going to be really getting into the depths of what are the different tools that you can add to your setup. So that way AI is not just guessing or making assumptions or anything like that. So we're going to be talking about different code quality tools, uh, bug finding tools, formatterers, llinters, etc., but also the techniques in which ([View Highlight](https://read.readwise.io/read/01kpv0n5vsthsrj67m701bp9fh)) - Tags: 👻 ai highlighted - lot of times that does pass but when you have like an enforcable thing and you could put in your agents file if you if you're worried about the code run it through l a llin llin llin llin llin llin llin llin llin llinter right and then it will it will see if there's any problems that pop up and it kind of learns from that. >> Yeah. So, let's actually I'm going to start off with an interesting uh category here, which is code quality tools because uh code quality isn't something that we necessarily think of beyond like linting or something like that. We'll talk about linting and ([View Highlight](https://read.readwise.io/read/01kpv0n5w8z0dfcn5ewetcabah)) - Tags: 👻 ai highlighted - the crap that gets pushed out, >> but then >> it it just does it all the time, you know, and then everyone it overdo does it and it becomes played out and it looks awful. It's hard to maintain all that. >> All that. Yeah. Uh next one here is for finding and using components. Now, this is a a tool that requires a bit of buy in, but one of the problems that AI has is certainly like looking up and finding appropriate components, knowing when uh like testing components and isolation. We actually use storybook on the syntax ([View Highlight](https://read.readwise.io/read/01kpv0n5z3jet4tw4vwtsvs8d1)) - Tags: 👻 ai highlighted - And it I feel like with Typescript a lot it as good as it is as TypeScript it it cheats it quite a bit. >> Yeah. >> A lot of people are just like oh no test pass you know types there's no type errors. Yeah because you just use assertions everywhere. >> Yeah I know. And so one of the things that like I think vibe coders might do in this situation is just put it in their agents.mmd saying hey don't do that. Please, no, don't. But that's like a sign that says don't that you can just walk past, right? Like the AI agents ([View Highlight](https://read.readwise.io/read/01kpv0n60zhq1q0vkd29any1vs)) - Tags: 👻 ai highlighted