In our last video, we went through a bunch of tips and tricks that I use to make cursor more reliable. Building with AI means that you have to have this tool bag of stuff, these new techniques that you've never had before with traditional coding to come back to again and again. Now I find that there is one method that I use a sort of repeatable process again and again and again. I just keep coming back to it. It's my own thing that I've developed.

I just keep coming back to it. It's my own thing that I've developed. But I find that it works so reliably that it is such a good starting point for whatever I'm building inside of winter. From day to day. Anytime I go to build a feature, I start with this method. I call it the explain method and incorporates some of the things that we learned in the last lesson

and incorporates some of the things that we learned in the last lesson and it has some new tricks up it sleeve. So today we're just gonna walk through beginning to end real quick how this method works and then we're going to apply it. So let's take a look at it here inside of uh, winter, I made this nice little slide for us. So I call it the explain method. The first step is to pass in the files

So I call it the explain method. The first step is to pass in the files with the functionality you want to change. We saw that in the last lesson. The next thing is new. This is to ask the LLM to explain the current functionality and technical detail. In our last video I told you to explain to the LLM how your app works, how this current feature works so that it has that in the context. Now it turns out I'm actually pretty lazy.

that it has that in the context. Now it turns out I'm actually pretty lazy. I don't wanna do that every single time. And I found that the LLM is actually better at it than I am anyway. So what I will do is I will pass the correct files in and then I will say, here's the feature or functionality that I want to think about or change. Explain this to me, explain how it works. And that is less of uh, something

Explain this to me, explain how it works. And that is less of uh, something that I want it to do for me really. And it's more about collecting the context that it needs to then change that thing. So this is a trick that I use. I say explain it and in explaining it it loads it into context. It loads the technical details of how that thing works, which is exactly what you want the LLM to know.

It loads the technical details of how that thing works, which is exactly what you want the LLM to know. So that's the big trick that I've developed is just to have the LLM explain the current functionality so it has it in context so that you can then go forward. Now a third optional step is if your context is sort of bloated at that point, if you're reaching the end of your context or it's just too big, uh, I often have the agent toss that into a markdown file. Just say save this in a markdown file, start a new chat

I often have the agent toss that into a markdown file. Just say save this in a markdown file, start a new chat and then use that as context for your new chat and it hopefully will use less context 'cause you're not having it. Go find all of the functionality, you're not having it explained. Again, you're just having it look at the doc for how the current functionality works. And then finally you wanna prompt

how the current functionality works. And then finally you wanna prompt for the changes that you want. So as a reminder, what we are trying to do is we are trying to get winder so that I can shift select two art boards right now that is not currently a thing. As I explained in the last video, there's a whole bunch of logic here that needs to change to make sure that this uh, works correctly

of logic here that needs to change to make sure that this uh, works correctly and that the state management works correctly. So we're gonna pop over to cursor and then we're going to look at the prompt that I wrote for this. So to start we're going to use the explain method. And so I have written here explain the logic and technical details for selecting art boards, the state management for dragging art boards versus

and technical details for selecting art boards, the state management for dragging art boards versus selecting them and how selecting an art board makes chat sidebar and simple tool panel appear or disappear. And then I've passed in some files that I know are related to this logic. So again, I know that it works to select and drag around a current file. How does that logic work? I need the LLM to understand it.

and drag around a current file. How does that logic work? I need the LLM to understand it. 'cause otherwise what an L LM will do is it'll write new logic and I don't want it to write new logic. I don't want it to write brand new methods. I want it to understand the way that my app currently works and to build on top of that functionality. So by doing this, you put it in a lane where these L LMS get stuck when they see a lane, they get go down and they don't turn around.

where these L LMS get stuck when they see a lane, they get go down and they don't turn around. So in this way I'm using that to my advantage. And so I want it to use the current selecting and dragging functionality. So I've asked it to explain that and so we're going to go ahead and run this prompt. Okay, so now the LLM is done explaining how the current system works. I'll be honest with you, most

how the current system works. I'll be honest with you, most of the time I don't read this in depth. It's gonna spit out a whole bunch of stuff. As you can see, uh, we have filled up a lot of the context here. We might need to throw this into its own doc but we're gonna try without it. So basically what has happened here is it's gone through all of my files and it is dug through all of the logic

So basically what has happened here is it's gone through all of my files and it is dug through all of the logic and it is trying to explain to me how all of this stuff works. Now again, the reason for this is not so that I understand it, although it's good for me to understand it. The reason is so that it's in the context. And so now I'm going to write a prompt to change what I want to change.

And so now I'm going to write a prompt to change what I want to change. I have all of the right context. Again, the whole deal for vibe coding, the whole thing you wanna do is to create the right context for the task that you're doing. And so that's what we've done here with the explain method. So I have said now I want to make it possible to select and drag multiple art boards at once using the shift key. It's a very simple explanation

and drag multiple art boards at once using the shift key. It's a very simple explanation of the feature that I wanna add. This should work exactly like selecting and drag in one art board. Notice that I'm trying to get it to not write a bunch of new logic that I'm trying to get it to understand that I want it to do it like the current logic lms love to write brand new code and to blow your code base. So that's what I'm doing there only the simple tool panel

to write brand new code and to blow your code base. So that's what I'm doing there only the simple tool panel and chat sidebar should not show if more than one art board is selected. So again, a little bit more detail about how I want it to work. Don't add any new UI for this. It always tries to add like new UI and think about how it should work. That's nice in some cases. I don't want to do anything here.

and think about how it should work. That's nice in some cases. I don't want to do anything here. I know it's going to try. If I don't add that in, it should be simple and streamlined. Make sure you follow the current patterns for selecting and dragging so that it feels smooth and performant. Alright, so that's my prompt. Notice that's a little bit redundant. I'm reminding it to do a few things that I know it's gonna get tripped up on.

I'm reminding it to do a few things that I know it's gonna get tripped up on. We'll run that and see how it goes. Alright, so it's done running the prompt, it's done running all of the code. As you can see, cursor does this thing lately where it makes a nice to-do list. So I don't really have to prompt it to make a to-do list anymore. Some people have that technique.

it to make a to-do list anymore. Some people have that technique. I don't really do that because cursor just kind of does it now. Uh, some models do it more than others but I am in auto mode right now. Um, and so it's basically done. Now we're gonna go see if it worked and I bet you it didn't work. I bet you that there are things that it did that are good

and I bet you it didn't work. I bet you that there are things that it did that are good and things that it did that are bad. And I have tried this a couple of times and so I can kind of know what to predict here. So I'm going to hold down the shift key and select. So right away we're off to a good start. As with before when we tried this, this seems fairly straightforward. The tool panel and the sidebar are not showing.

this seems fairly straightforward. The tool panel and the sidebar are not showing. They are showing when one is selected. That is correct. I can hold down shift, I can select multiple. Let's see what happens when we drag. Uh oh it deselected the other one. Let's try. Okay, so it's running away quite a bit. So there's something wrong with the mat. This is a very LLM style problem is that uh, react state management

This is a very LLM style problem is that uh, react state management and calculations and things like this. Rich interactions. It's going to have a lot of trouble with. I just noticed that it has a lot of trouble with. So we're gonna switch back to cursor and we're going to explain this problem. Alright, so we're gonna skip ahead a little bit. I did some troubleshooting and cursor and I got it to work. I wanna walk you through what I did.

I did some troubleshooting and cursor and I got it to work. I wanna walk you through what I did. 'cause this is very important. This is my typical process. This happens every time I build a feature. So what happened is I prompted for the feature to be built using the explain method and it got us 90% of the way there. It's such a good solid, reliable method that even though there's a lot of complex logic that needs to be figured out here, it actually did a pretty good job.

that even though there's a lot of complex logic that needs to be figured out here, it actually did a pretty good job. Now because of the, I was 90% of the way there, I decided to just push forward into that generation as opposed to starting over. And so what I did is two things. One, I switched to GPT five thinking mode. I'm just reaching for the best model that I have access to in cases like this where I know that there's a weird math problem,

to in cases like this where I know that there's a weird math problem, there's a weird state management problem. It's really hard to troubleshoot these features with an LLM, they tend to spiral out of control. Save yourself some time and energy reach for the best model you got for these kinds of things. I said everything is working great except when I drag, it drags way faster with two R boards selected than with one R board selected.

it drags way faster with two R boards selected than with one R board selected. Why is that? This is the most important part. Compare and contrast dragging two R boards versus one and see if you can spot the problems. I'm pushing the model to look at the logic that works and look at the logic that doesn't work. These things are pattern matchers. That's what they do. They're pretty good at pattern matching. So lean into that, think about how they're pattern matchers

They're pretty good at pattern matching. So lean into that, think about how they're pattern matchers and point them to patterns that they should spot and then see if they can spot the patterns. So that's what I did and it turned out that it was able to spot the little math problem here that was causing this issue. And if we go back to winder, we can see that now we can select multiple R boards, clicking and dragging one works.

that now we can select multiple R boards, clicking and dragging one works. Clicking and dragging two or clicking, dragging two works. Everything. The state management is perfect. It works exactly like I want. If I had a third R board, now we can select all three. We can move them around. It's perfect. So if I jump back here, this is what we did. We passed in the files with the functionality that we wanted to change.

We passed in the files with the functionality that we wanted to change. We asked the LLM to explain the current functionality and technical detail. We had plenty of context left, so we didn't do step three. And then we prompted for the changes that we want. And then because we got so far into that and we got so close to what we wanted, we were able to just do one single more prompt to fix it, which said compare and contrast the things that are working with the things

do one single more prompt to fix it, which said compare and contrast the things that are working with the things that, that aren't and spot the problem. So that's it. That's the explain method. This is what I use time and time again to build every single feature inside of winder. It allows you to vibe, code, or use AI to code features on top of a very mature, very large code base.

or use AI to code features on top of a very mature, very large code base. I promise it's gonna work for you. Give it a shot.