Coding Agents Cursor + Windsurf Tips

and I deleted it, like, way back. Like, like, I went a whole day without realizing that it deleted an entire component.

So here we go. I have now a much darker blue. My light mode, dark mode seems to be working so certainly worth looking into that. Quite honestly, I don't even use a cursor you ask it to do something, and it'll say, okay.

Also tell it that the dark mode blue is now bad,

it can be either. Often, when I, like, wanna switch things in it, and that's really, like, the the best way to approach this. And that's kinda it's it's actually quite good. Like, I

Pretty much I open a new Composer for every single, like, feature I'm working on, but I haven't really found a difference, to be honest.

So question about this. So when it adds these changes and it's staging them, are you Yeah. Going back and saving the HTML file and it's just

and that's what's updating in the browser?

in the code base. Yeah. And since I have not accepted anything yet, at any point, I can just cancel or reject any of the changes, and it will throw me back to to where I was. So there's no, like, scariness of going too far

Make them darker.

it, have terminal commands. It will edit multiple files. It will go off through your code Bos searching in your entire code base. So you might create a prompt in your composer view that will will do something like here. I'm in normal view right now. So I'll

like bootstrap. So by default, everything looks kinda crappy, and you really have to press it to to look better, Yeah. I know. Well, in Canada, we have Robertson screws mostly, and they don't do that because the design of the Robertson screw is superior Git, etcetera, is is used to. Right? You you open up chat, you type in what you want, and it will sort of apply the changes to your current tab that you have open.

And and then I was like, and it does And this, I went back and forth with it maybe

said, alright. I've added light mode, and I can see both the diffs in my code as well as an explanation of it in the composer sidebar. And you'll see that I have the website open right now, and it's sort of, like, staged those changes, so I can go ahead and use them. So there we go. I've added light mode to it. Doesn't look amazing.

the arrays or the sets that we have like, the first one is is Wes and Kate, and the second one is Wes and Scott, and I wanna see the difference between those 2 pieces of of data.

like, I that would suck to have to go and wrap spans around all of these names, and this did a a relatively quick way with it. So that was much better than just using the chat example because

by default, makes everything look

So I was like, can you, like, color

make a bunch of changes. And you see the changes in the browser right away, but you haven't yet accepted them. So I went into composer. I am in agent mode, and I said, this website needs a light mode. Can you add it? When you told it to look nice, it runs tools. It it allows you to what it thinks is a satisfactory to what do y'all do use down there? The Phillips? The star? This was a Phillips side. Yeah. This Wes specifically Phillips side. Wes still have quite a few Phillips, but the the Robertson doesn't cam out or doesn't cam out and slip out like that, which So I was like, I'm gonna remake this Twitter account.

and sometimes go back 2 or 3 times. So here we go. Immediate so now it has,

you're able to go back and forth with it Wes it will I knew what to fix. I would still reject it and then go back and and actually fix it. That does seem like a good use case.

Minecraft server on my Mac mini. I'm doing all this little stuff I wanna do. And so I'm, like, swapping out one of the light switches for one of my Caseta switches,

man, it is really impacting my life. My like, I'm I was trying to do a lot of coding yesterday. My hand is, like, all tweaked out and stuff. Oh, man. And I'm, like, getting RSI from h just because, like, the ways I'm contorting my my hand is feeling kinda awful. Rouch. Right Node.

to, like, take care of tasks around the house. And I was just like, Wes. I'm so stoked about that. So I had a number of light switches I wanted to do. Yeah. So I I start and I'm, like, doing, like, 800 things at once. I'm pushing,

So to to give you some backstory real quick here, we can we can kind of breeze through this. But, It's like, I'm sorry that I'm wrong.

I'm I'm gonna get super squeamish at this, but continue

you know,

Ohio State winning the national championship. Those are bad things that happened to me this this weekend, but I I I broke my finger in a kind of dramatic way. And,

the one of these screws was super tight and it, like, was, like, locked up. And so, you know, you need to have to, like, put some force behind your your drill to get it so it doesn't strip. Yeah. I did this.

So data structures, and I even gave it a link to the documentation move the CSS and JS to its own files.

my pinky bone.

shoulder behind it, and I'm putting my full weight onto it.

bends and slips out. And while the drill is spinning, goes right into my my hand and pins my finger up against the wall to the point where So are you using this? Because I had not used Composer really. I the the way that I tend to use cursor is the Yeah.

this this place with their some of their friends, and you can have the whole day

So I found the results to always be that much more better than they would be GitHub.

it broke. It it not only it left a big old hole in my finger, but it broke custom software to my TV with my,

Samsung developers account or whatever for Jellyfin.

also, if if you are a little squeamish, maybe, fast forward like a minute or so. Yeah. So Courtney was like, oh, I'm gonna take the kids to,

gnarly weekend besides my, Detroit Lions losing,

and it was a really tight receptacle. And, like, man,

Yeah. I I could be doing I could be doing a little bit better. I had kind of a gnarly

my hand to try to type without using, you know, my pinky or any of that stuff, it it sucks.

it will tell you it'll give you an array of data, and then it'll give you the array of data backwards, and it will think those are different. Mhmm. So I was like, can you use symmetric difference, which is a new API? And I went back and forth, like, 4 times, I got into it. Well, this is another tip I have is I say the order of the stations do most of these things, but it's just a little bit behind right now, I bet. And maybe by the time you listen to this, Copilot will have rolled out some similar changes as well.

seems to change. So sometimes So I built this this morning in about 20 minutes Wow. To try to visualize by default, just add stuff to components, and things can get out of control really quickly

no. Use this. And it kept being like, no. This is not in all the browsers yet. Let me recreate it. And I've I was like, use it. My environment supports it. And finally, the names from each of their added to me. So the other thing that I want now is, Welcome to Syntax Today. We had an episode for you on Stay tuned for a video on that. Yes. I Node here. Let me let me show you.

to say,

at this specific Scott.

it went ahead and did it. So you have to be a little bit aggressive with it sometimes. And it does that does illustrate something that I I've come to realize with any of these AI tools for Yeah.

on MDN So I just I just wrote a whole bunch of

fire department and and saving them. So there used to be this Twitter account that every time a fire call went out, they would tweet out

my limited use of my my left hand is going to be Yes. Yeah. But the other thing is, like, use, Yeah. Totally. Yeah. I know. I think, yeah, especially if you're getting into the

I have it hooked up to hitting control twice, but use the your OS's dictation. Yes. So don't even type it. You know? I have that set up. Yes. Yeah. Totally.

The only thing is, like, I find it kind of slow, which is a hilarious thing to complain about. Yeah. Yeah. Yeah. Yeah. Literally doing all this stuff for you. But it's slow. Yeah. See, I'm working on another one right here, which is pulling rules file at all. Aside from the use ESM and fetch and use TypeScript

to catch. May maybe this is a good time for me to get used to this now that, I think 9 times out of 10, the results are so much better, in terms of like giving you exactly what you want. You don't have to like tell it multiple times, no, make this snake case, Node, or hey, use Svelte five, please. You Node, stop giving me these kind of things. So I don't want 1 I always hit is it it always uses Axios.

And tell it that, Scott said that. The dark mode. Oh, you're right.

all the data from So what an agent will do is it will Man, I've I've done that a couple times where I've I've been leaning in with a drill, and then it ESLint, and I put it I put it right through my finger once, and it hurt a ton. That's exactly what I did. Right through the finger.

those things are super handy. Yeah. Just those general things. Wes, performant ones, replace all,

React. It defaults to using So maybe I'll go back and say the blues are hard to read.

Parsing out bits and bytes for or coming over serial, which is is wild. So it does OCR within the it Wes tech text recognition? Wow. Yeah. Exactly. Because it had, like, a table of I was sending what's called a bit array, which is 8 bits in a byte that are just ones and zeros, making a dashboard. You know? That's a Yeah. That's a really annoying one.

that Svelte did recently JS they they had like an AI file for you on their their website. So you can now use the Svelte 5 AI file to like teach the AI what's going on here. But if you use these these cursor rules files or these instructions files to give it information about what you want out of your code base,

You have to explicitly go in. And I don't have this in my cursor rules. I I should probably add it. But you always have to say, don't use Axios. Use Fetch

the edge here, you know, Svelte five just came out, all that stuff.

Other tips we have here is give it screenshots when things are weird. So I had a weird layout bug that it couldn't fix. So I just did a screenshot and gave it to it, and it and it fixed it immediately Scott it'll understand what's going on. Another thing I did was give it screenshots dev. You know? Like, a lot of the stuff defaults to Their product is called Cascade, and ESLint also is another big one, in the space right now. I don't know that I would include GitHub Copilot.

Using those types of tools, I think the cursor rules becomes more important. Because otherwise, it JS. It's like, let me just give you some React code. Let me give you some you know? Yeah.

camel case and things like that.

Oh, really? I don't know if that's just because it's it's been trained on code Bos from a while ago. But Yeah.

which sounds Node, but I had a PDF of the Roomba will, Let me do a quick scan of your code Bos. And it might do a search for your code base for things that are related, or it might look at what tabs you have open up, or it might follow your e s m

output. Yeah. So I'm gonna be specifically talking about Cursor here, but these features are also in Windsurf.

AI agents in coding. Yeah. Then you can think of it really as here's a thing that's going to go off and do tasks for you, and and it it's going to run through those tasks. You know what? I I was wondering if the, Copilot workspace would be considered an agent. It's kind of very similar. Yes. Yeah. Yeah. Because it will it will just keep doing tasks until it gets to

Then then once it's listed those, it will it will take those and put it into the next prompt, and then it will come back with a bunch of changes and apply them.

a lot of times on the show, we've been talking about just, like, sort of, like, what's called a one shot, meaning that you you type in what you want, and you get the answer back, And and you try to provide the best possible prompt and then I just go ahead and click on accept, and boom?

tree to see which files are.

to actually get to the end result.

and sometimes it's better for it to do it in multiple steps.

at a certain point, you can't give it your entire code Bos,

And then after it's applied them, it might try to run something in the terminal. It often will run, And it's amazing that,

answer back into itself. So I'm not mister gung ho on a lot of this AI stuff. I I love it quite a bit. I don't think it's gonna be the the be all end all. You know? And I know how annoying some of these AI folks can be, but And the important part is that it feeds its

And that's kinda neat because that's that's how humans work as well. Right? That's how you don't just say, like, I'm going to build this app. No. You you say, alright. Well, let me see what we're working with. Okay. I got that back. Now let me try this. Okay. That gives me an error. Now let me fix that e s that ESLint error, and then you go kinda go back and forth. And that's the the sort of idea behind Because it now changed the the blue to be too dark what is far superior is the composer view. And what composer view will allow you to do is is is several things. First of all, it allows you to create multiple files, and you can also add in context to multiple files

linting errors and see if there's any linting errors. And if there's any errors that come back from the code that it just it just did, It's low stakes, but high reward when you can scaffold it out.

And then I might, like, prompt, like, a CSS file or, especially for things that are, like, repetitive or boring, say, this website needs to did you give it any parameters? Did you say use these colors, use these kind of When I I said use dark blue and hot pink, and then it just went in and did it, I find that the new set methods. So we have, different intersections, symmetric difference, union, disjointed, superset, and subset.

in there. So you add all of that to the context as as you go. Although Node the new one is the the agent mode.

So agent mode will allow you to what it is that I wanted. So I started with with basically gave it the code examples, and I said make a visual representation of this code using,

Make sure to reference the styles.

add a light mode.

One thing that I really like

prompts or I'm not, like, really telling it what to do specifically.

I mean, if you know what you're talking about. Because if I ask it, like, very Node right. I I give it nontechnical my my my day of accomplishing tasks. The Minecraft server never got finished.

use this API, use this strategy, use,

called Cursor Directory that will have some premade ones for you based on what your project is. But these are just sort of like general information about your code base. And I found that all of the tools in any of the AI editors work so much better if you give it the tools.

wrong.

You gotta know what you're doing a little bit. You Scott know what you're looking for. Still like, there was one The pnpm error had some touch animation issues in Safari. It would not figure out what the actual issue was, so I had to go in and and do it. And and in fact, that debugging our city's Now I've got that feature

or it might be okay or sometimes it's just straight up wrong. But if I'm able to give it, you know, bits of a technical solution, And this hand is just kinda hanging out, and it

Totally. I agree. And I'm I'm quite surprised that at the quality of the code that it it puts out. I know, like, you certainly have to be careful I haven't found the need for it. But, also, I think I do a bit more of, like like, mainstream things. Like, let's go through it and say, if we have sent an incident previously, can you run a deep check on the object and log any differences? Make sure to use. And then I referenced parse units dispatch and parse stations involved to parse the unit strings into an array of unit. You may do this before looping over it. And then it it went ahead and and wrote all the code for me. So, like, I find for, like, very complex then it will feed those errors back into itself JS, ah, sorry. I I goofed that up, or let's let's change this a little bit so we can fix it. Right? And it sort of goes back and forth 3 or 4 times of documentation, find files that need to be referenced. You don't have to explicitly tell it which files are need to be edited.

All of the tools

I've had some issues like that with like, you know, ESM or TS config stuff. And the AI agent or the the AI in general is just like, do this. I'm like, you were so wrong. You Remove all expensive transitions, replace them with, syntax. Again, we've been using this tool for a long time, and it totally rolls. Alright.

you know, these types of things and you direct it more technically,

will be so much more effective

isn't something that I would be comfortable pushing out. It might work and found what I was what I was looking for and and reinstated it, which was pretty impressive. And this is all through 1 long composer chat or Vercel? Like, is composer always 1 long chat, or is it It

A lot of times the code that it gives me It all around sucks. I I'm like the king of, I'm like, I'm I'm I'm setting up Landon's,

and and whatnot, but I'm I'm relatively surprised at at the quality of the code.

You better be sorry. Another tip for especially for Cursor, but all of the windsurf and copilot now have similar concepts here JS establishing your rules file. And in Cursor, it's a Cursor rules file. They all have a little bit different names. And in fact, there's a website

of that Safari issue took me way longer than if I had written all the code myself. Yeah. Because I had no idea what was going on. Yeah. You don't know what's going on. I've been let me tell you, time, that you want. And in fact, I had it accidentally delete some features, I bet chat view will probably go away relatively soon because

Awesome. Alright. Thanks again for tuning in, and we'll catch you later. Peace. Peace.

like, find and replace it. You know? You can't do, like, a global search because things are a little bit different. Totally. It's it's really handy.

Nice.

Well, that that's been super helpful. And to to be clear, all of this stuff is capable in Wind Surf as Wes, like you had mentioned. And you had also mentioned that, you know, some people found Wind Surf's version of this to be even better.

making a brand new component, TypeScript, blah blah blah. Use this, please. Don't use anything else. Yeah. Yeah. There is a cursor directory website that has a bunch of different cursor rule files for different types of of development, with it because you can always restore to any point in to, like, building a new component, I'll create a brand new composer chat just because I don't want any of the stuff.

I think that's where it's most interesting to me. It's like, how can I get these things to respond well to the fact that I'm using packages that are in alpha and new libraries and things that were just released? So for me, that's super exciting.

they didn't make a a big hubbub over it, and I think a lot of people are maybe not taking full advantage of it. So I would certainly and all the possible context for something

making me so much faster, and this is I'm able to get through

Yeah. Like, quite a bit. You you do any searching on Reddit or Cursor forms or whatever, and quite a few people are are saying, no. I like the the Wind Surf version better. And and the thing is, like, that some of those comments were a month old, so who knows? You know, it's always changing. But certainly check out, the Wind Surf version as well. Yeah. Wind Surf, all this stuff is in constant flux as always. But, thank you so much for this this good introduction on on agents. For me, personally, it's good timing considering I don't. Like I said, I primarily use the command k and and just chat right there. But we're gonna see how much this can do for me, especially given that my code base uses some very experimental

you go, this is the details about that fire call. It would give you cross streets. It would give you what engines are are re responding.

So those are all my tips for using it. It's the cursor agent is and I could not figure something out. So I just screenshotted the whole page, dumped it in there, and boom. It wrote all the code for Interesting.

how to use these to be the most effective. And and there's a relatively new features to all of them called, like, agent mode, and we're specifically gonna be focusing in on that. So my name is Wes Bos, developer from Node. With me as always, mister Scott Tolinski. How are you doing today, Scott?

Replit Agent, the agent mode is is very good. Like, I had built, So in 15 times to sort of add

That was on, that was on Saturday. So, you know, I'm, stuff. So, I love to tell it that I say, you are so wrong.

injuring myself in dumbass ways, so this is, like, par for the course for me. So yeah. Yeah.

I'm hanging in there, but man Did you go to the doctor or the hospital? Do you have a cast on it? I went to the urgent care. I I do have a little cash for it, but the because the wound was so bad, they didn't want me to put it on yet. So I'm just, like, letting the wound heal first and then I gotta put the pinky cast on.

meaning it can generate code, npm install things, run things on terminals.

Sucks.

is superior. Sucks. And you know what the worst part about it is? It ruined my whole day because I had this whole day, and I just spend the rest of the day in the urgent care, like,

run a linter or something like that against it and see if there's there's any issues.

very good. I don't have as much experience in my code base. I've only been using it for a month or so, but I'm surprised at at how well it works. And then really, really Wes. And then when I'm done, I can I can go through and review all the code changes that are here, serial spec, it works really well. And then I don't know, 3 or 4 things in the last week or so with it, and I'm amazed at how quick and productive I can be. So And I just added it. I just said, hey. Like, you deleted something, and it, like, went back in the Git history

Yeah. I've so I've used it on my types of things,

agent mode will search your code base. It will do multi steps. Right? It can

for possible issues,

Command k ESLint chat JS, like, even I don't even use the chat pane. So the the command k inline chat is the way that I I pretty much use cursor. Are you building things in large projects with this, or have you only done kind of smaller things and demos? if you're giving it instructions as if

course code base quite a bit, which is very large code base. It's a monorepo with multiple, some transitions, and I was using tailwind. So I had, like, transitions in, like, 80 different parts of the code base. So I just said, disable all expensive tailwind classes. I'm trying to figure out a animation bug. It just went through the whole code base, turn remove them, there's you can prompt files, folders, code bases, documentation, set by the set color? Right? So Scott is always pink, and and Kate is always blue.

It will modify multiple files. You can approve it. You can edit it. And, it also checks its work, meaning that it will Composer is making checkpoints I think just a couple weeks ago, maybe a month or two ago. So it's relatively new. And if you want to see all of the errors in your application, And both, like, regular people, when, like, you see a fire truck, you say, what's going on? You go to the Twitter account and say, oh, it's a medical or, oh, there's a massive fire My Jellyfin server has, like, hardware encoding issues now. It's like all of the little tasks got half done, which is the worst worst place it's going to be. Yeah. If only I had AI agents to take care of it. You go. Yeah. Right? So this word agents has been kinda thrown around. It's it's kind of like, one of these, like, BSE words in the AI space. But, essentially, the way to describe what an agent is say, please go ahead and and try it out because it's it's pretty good. It's it's one of those things where And at first, it didn't do a very good job at it. I had to go back and forth maybe 6 or 7 times for it to actually get what I wanted, but then it did it. And then I was like, okay. Now I'm gonna jazz it up. And I was like like, make it look really Node, and then I was like, make it look even nicer.

also, I've used it in quite a few smaller websites. So I made the dashboard for the Roomba that I'm currently driving with JavaScript.

And then, also, like, one last tip I have is, like, use it as a way to experiment. You know? Because if you say,

I'm trying to debug this thing,

and become extremely messy. So explicitly tell it create a new component for this.

and then I I got to test it. And then if if it didn't fix it, I just rejected the the changes. And if it did fix it, then and always use ESM. Yes. Always use it. Yeah. Pretty good job at figuring out if you have an existing code Bos. But when you're going from scratch,

and what would I was trying to debug something with, what it is called, Venn diagrams and use SVG.

cursor, you have chat view, which is kinda like what everybody translates with translate 3 d's, all that kind of stuff. Yeah. Yeah. Yeah. A lot of those things where it's like, that would take me way too long to manually do, and I also cannot,

syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to Sentry.i0forward/

you'll want to check out Sentry at sentry.ioforward/

But this this just landed in Wes Surf a couple months ago. It landed in Cursor, AI coding agents that is how to use Cursor, and there's a couple other ones, Wes Winsorff, cascade, And the city removed it and replaced it with some crappy website.

They do Wes, Tell it to refactor things out to separate files. I find that it is something that can do multiple tasks,

and I couldn't I didn't know how to do that. Right? So I just screenshot it, put it in. I'm like, create a bit array for me, and it boom. It created everything Nice. Right away.