In this episode, I am joined by Ras Mic, a full stack engineer & YouTuber, where we dive deep into t...
Video Transcript:
if you're anything like me you've been down the cursor AI Rabbit Hole the idea of taking an idea and turning it into a code in a few minutes is just so amazing but before we get ahead of ourselves I think it's really important to uh know the best practices when using cursor Ai and I found this guy that you've probably never heard of he's got like a couple thousand followers on Twitter and the way he explains best practices around using cursor AI really clicked for me so I I brought them on uh the Pod hope you enjoy uh and I think that it this video is going to save you hours and hours of time uh because it's going to give you the foundations of how to actually build something that's going to work and uh that's what we're that's what we're about here taking ideas and making them work so enjoy [Music] all right so I had a question about cursor and there's a few people I call when I have a question about cursor but one of my main people is my man Mike and I had a simple question I said how could you get the best results from cursor AI we're all playing with cursor uh we're stumbling we're following we're falling um and my man Mike is going to teach us in this video how to get the best results um and this man this man knows so thank you for coming on well again thank you for uh the opportunity uh super excited to share some of my findings and I I guess we can uh get straight to it that's what we do we get straight to it you know like that's that's what this channel is about yeah I love it no long intro and we're just getting straight to it so yeah I think um so I've been for for context I'm a a front developer um in my uh current place of employment I do full full stack and I've been playing with cursor for the last couple weeks mainly because I wasn't really a big fan of like the other co-pilots that were available like GitHub co-pilot so decided to give cursor a shot and I think a lot of people are starting to enjoy it but I I realized there are a couple things that I think if people made these tweaks at least I believe the output would be different and this is my personal experience so the first thing I would really say is planning um I don't think it makes sense to just jump on cursor go on the composer and just start asking it to build stuff I really do think even if you're using AI you're not a developer you should have that developer mindset where you plan on what you're going to build what it kind of looks like I would even go as far as having some sketches that you can go on paint or figma or even handwritten and really have like some sort of picture in mind reason being is when whenever you're prompting these AI models you want to give it as much context as possible you you don't want to assume it's smart and you don't want to make the AI the boss you're the boss the AI is the co-pilot right so the biggest thing I would say is is planning and um I don't see enough people planning I see people just jumping on composer and telling you to make stuff and I think your outputs would be really really great if you did a lot if you did planning before you go to cursor so this step I call the measure twice cut once strategy so you measure twice um you you know I I I think yeah figma is where you want to start right yeah 100% like somewhere where you can draw like if you don't have figma it's too difficult for you paint whatever it is just like you know even if you're not a developer start to think and act like one you know what I mean like half the game is acting like one and do you have any anything you can share of planning documents or something like that that people can have a look at so they get a sense around okay I think I understand what do I actually do and this is pretty funny my uh like very first I would say product that uh popped off I don't know if I have it in my Apple notes but I literally just drew on my iPad let me see if I can pull it up here just sketches and there are also AI platforms that you can use let me see if I could pull it up here can you see my screen oh baby do I see your screen yeah so this is like something simple and this was before we even had cursor this was just Chad gbt um and I think I was doing some client work I think this is for client work where I literally just drew this out and this is like some portfolio page for like a uh web3 client of mine and I took this screenshot uploaded to chat gbt and we didn't even have like code or anything like that but basically we didn't have Claud or anything like that but basically I just asked it um what should my how should I plan this out what should my structure be I wanted I wanted it to look like this what should I do and I already know what I was going to do but this was me sort of like building uh this was me asking my assistant my co-pilot for some advice um oftentimes in uh the programming world you you call this rubber ducking where you're talking to a fictional duck that doesn't exist but basically explaining what you're thinking and in in in doing that you kind of start to have realizations and maybe this isn't the smart way of doing things maybe this is a great way of doing things and I think with AI you can do uh that a lot better and not only that I know I'm sure people are familiar with uh v0 but I highly highly suggest that at least if you're not not going to plan with like Figo and stuff like that at least start with v0 reason being is I I I find it it really helps visualizing what your potential app MVP whatever it is will look like and vzer is great for that so for example let's say shh don't tell anyone but I've got 30 plus startup ideas that could make you millions and I'm giving them away for free these aren't just random guesses they're validated Concepts from entrepreneurs who've built hundred million plus businesses I've compil them into one simple database compiled from hundreds of conversations I've had on my podcast but the main thing is most of these ideas don't need a single investor some cost nothing to start I'm pretty much handing you a cheat sheet the idea bank is your startup shortcut cut just click below to get access your next cash flowing business is waiting for you uh I want to build a clean looking Marketplace website for bicycle sellers I don't know something random right and what's great with vzer um is that you can just keep going and going and I I truly believe this is where you start and and once you have a sense of okay this is what I kind of want to build then you take this over to cursor then you take this over to clot or whatever AI model you want to use I think people are jumping straight to claw or or to cursor and sure you can get results but I think VZ or maybe drawing it out is where you start and what I love about VZ is um because it's built using shaten UI which is a UI uh Library you can really get nice looking uh UI and this is just one one prompt if I like I could ask it for maybe a better gradient maybe more rounded edges maybe a testimonial section it even gave me a footer and all I would do is literally just copy this code and take it over to cursor and now cursor has something to build on top of which I truly believe is where it shines best so go back to that wireframe that you had before right here I feel like and correct me if I'm wrong like it almost makes sense even before you get into vzer to draw it out yeah and you know what we can even test this out why don't I drag and drop this into vzero this is what I'm talking about the live cooking starts this wasn't even planned so drop the screenshot um I want to build a web3 portfolio uh I spell portfolio on portfolio website refer to the wire frame web 3 do you want to include web three oh did I not say oh I meant miss the three please and thank you and one thing I don't know if this actually helps but I'm nice to my Ai and I seem to be getting great results so this is live I didn't plan this I didn't even know I had these screenshots and so it's cooking okay got the search Yep this is what I live for so we went from this screenshot this drawing on my iPad to this and now what's cool about this is I can start getting specific and saying move the search bar to the right um and then what if I do that it's going to move the search here so this is just a great place to start and I think a lot of people uh would benefit spending a good chunk of time here uh just because as a developer especially when I'm working on like software that people will actually use not just like a side project you have to spend a lot of time planning making sure you know what it looks like because whenever you start coding that's not the time where you should be thinking about what you should do you should already know what you should do and then just start writing code from there so I really do believe people would benefit massively draw something up whether it be figma your iPad pencil paper whatever it is take a picture of that place it over at V Z and start prompting with v0 like you can go far like I would say minimum you should go at least 10 to 15 prompts with v0 and get what you want to build as close as possible to what you've envisioned and it's very possible like v0 is that good so that's at least where I would start in the beginning no cursor so far step one of being good at cursor don't go on cursor exactly exactly like that's why I have you you're here for the hot takes all right what what else what else you got yeah so that's that's number one so planning like spend as much time planning daydreaming visualizing drawing vzer is a great friend and I like the name vzer because it literally is your version zero and then SEC second is I know the devs might know this but a lot of people are getting to cursor don't know this there's a site called cursor. directory and it's a pretty sick site and basically what cursor. directory is there are these prompts that you can copy and paste and place in your cursor codebase and essentially what this does is this is like the um like this is the initial prompted will read before you even get to prompted anything so let's say I'm building an app that uses nextjs right I can go here and search nextjs click that here and then I see that there's six different uh prompts I can copy so if I click on this one right here this is what you would copy paste to cursor it says you are an expert in typescript nodejs nextjs app rer react shat CN UI radics UI and tailwind and then there's just a bunch of best practices that cursor should follow for nextjs and the reason why this is important is because sometimes the models have a tendency to pull outdated information um it's not that it's wrong but it's just outdated so what this does is you are setting up your cursor codebase for success and all you literally do is you go to this site you copy this uh text and they even have an instruction I believe it's uh in about yeah so if you go about it tells you copy and add do cursor rules file in the root of your project so I can even show a live example of this just to tie the picture home actually we'll do this for one of my project for my portfolio set right now so let me know okay you can see that right so this is my portfolio site simple nextjs codebase the way this would work is I would go on cursor and I would create a new file in the root folder and it would be called cursor rules that's it right cursor rules and then what I do is I search what technologies my uh the what technologies I'm using to build whatever I'm building I'm using nextjs I'm I'm kind of a nextjs fanboy so I'll go to nextjs I'll read through these this one seems to be the closest to what I'm building with and if I want I can always tweak it so I copy that and then I paste that here and all I do is save and I'm good to go so now every time I prompt cursor I either bring the uh composer view or the side AI chat every time I prompt it it's going to know what my codebase is based on because of thist cursor rules file so highly highly suggest again it's cursor.
directory all you have to do is just find what technology you're building with if it's python you go you go to python copy it and then create a cursor rules file paste it in there and I've literally seen Night and Day Results just by this simple uh implementation so highly suggest people do this I mean it makes sense right it's like why wouldn't you go use this 100% And I I think it just takes 30 seconds of work and here's what's cool let's say you're using u a set of technologies that um are not listed here what you can do is you can copy a couple of these go to Claude or gbt or whatever and be like I'm actually using these Technologies can you write something similar following this flow for these technology copy paste W that works yep so we can we can let's why don't we again let's do live example so let's say I'm going to copy this I'm going to say I'm building an application or let me say a web application using uh react and python python I want to write a nice prompt for my AI similar to the one below please be just as concise right and I don't even spell things properly but let's see and then I'll paste that um and then let's hit enter so it says here is so here it is you're an expert in react python scalable up applications key principles right concise you literally got the same thing dependencies react 18 Python and it even got the versions right too react 18 typescript react router axios fetch aper Implement code splitting lazy loading and react so your SES load yeah this is great so even if you don't have an En cursor directory copy one or two examples um prompted the way I just prompted and if there's something maybe you want to use react 17 or 16 for some reason I don't know why or you want to use JavaScript you know tell it you know um I actually want to use JavaScript not typescript and then you can manually edit that yourself or I can just be lazy tell it to do that and then look react JavaScript see right here it mentions it react JavaScript use functional components so crazy right so again this is before we haven't even started using uh cursor to write any code so highly suggest that you implement cursor directory um because it just makes your prompts on cursor the results at least you get from cursor are much much better yeah I mean both those things Nob brainer Nob brainer and and and I think they're easy to do right the planning is fun because you're in your creative process and cursor directory literally takes 30 seconds the planning is fun I will say I I I'm one of those people that I just need to like get into it you know and I think a lot of people are like that but I have to it sounds like I need to stop myself and just sort of take a breather start writing it down use use you know a figma or something like that that um the cursor directory to me is like quite literally thank you uh for just saving me time no problem yeah and I think to like to your point I'm that type of person too like well where even to this day I just like jumping into the coding because I I do enjoy writing code uh but I will say two things first you save yourself a lot of headache and I think that one PE that people who might not be developers who are getting into building stuff using AI I really think one thing that people need to start to embrace is the pain because there's a lot of pain when it comes to just building things in general especially um now with like these tools there will be a lot of times where you'll get stuck and you won't know what to do and then you'll flipflop and then maybe you want to go this direction or that direction and this is coming from personal experience it just saves so much time even if it's maybe not the coolest way of starting it just saves so much time planning and I think you you set up your uh AI assistant your co-pilot for Success when you already have a lot of the information ready right um I don't think that models are at a point where it's good enough to just start from scratch we'll get there eventually uh but if you're trying to build something that people actually use I really do think you should really have that developer mind where you know you might not be doing things you like but you're starting off with planning and then those plans creating some mockups setting up your cursor directory and then going about uh programming but from like a side project perspective have fun have as much fun as you want go oneshotting you know break stuff like that that's the that's you know it's a learning process in it of itself you learn a lot doing that uh but when you want to build something and you're and it's you know something of importance I definitely think the planning should happen at least try That's My Hope cool what do you mean by tagging docs yeah so um very important when you're building something um to know what technologies You're Building you might not need to know how exactly they work but it's super important to um know um the Technologies You're Building because every technology you're using to build has documentation so for example um a lot of people whether they know it or not are using nextjs so if I go to nextjs dorg um and then I click on right I essentially have the documentation to everything next to you is how it works um how things are what like you know how routing Works Pages Works layouts and all this stuff and one thing I would suggest even if you're non-technical person I would highly suggest maybe just taking a breeze at things just take a look at stuff if something doesn't make sense take a screenshot give it to I tell it to explain to you S5 but what I mean by tagging docs is let's go to curs here something cool that you can do on composer is I can hit add and then I you see this docs right here I can click docs and then I can click add doc add new Doc and then I can literally copy let me just make sure I'm getting this URL I could paste it here and I'll call this nextjs docs and then it should save so now inside my cursor I have access to the nextjs docs and the reason why this is important is because again a lot of these models you know scrape the internet and all that stuff in a specific time maybe some of that information is outdated maybe it's not best practices right any technology you're using the docks are usually the best source of Truth so now I have access to the docs and I can say um how can I build a simple page that says hello world I hit enter so now it's going to take in notice how it's reading the getting started page Dynamic modules building your application so I've literally given cursor um the latest and greatest information when when it comes to setting up uh an xjs application so not only do I get the code set up but I also get commands on how to run it and I think one thing that people should do even if you're not a developer again act like it until you become one I would highly suggest like going to whatever Pages it mentioned so it said here getting started so let's see if it's slash getting started I don't know if this is the page oh it's not the page maybe it's here right here getting started okay can't find the page but you get my drift you get my drift I really think um like as people are building they should use the building moment as a learning uh moment and that's essentially what I mean by tagging docs so let's say another technology that people might use for their databases superbase so I'll just search superbase docs and then I'll just copy this right here and then let me uh create a new composer view I'll just add docs oh pre-populated some dogs here I'll add a new one paste the link hit enter and then I'll name this super base docks and then hit confirm and now I have access to literally all this information here I don't really have to read through this I can just ask composer this and what this does is every time I have an issue um I can tag these docs and cursor can debug the issues I'm having with the most upto-date information right so it just makes your life way more easy right because we're all going to run into these bugs and you know when you see that CA of red you want to get out of there as quick as possible so yeah this seems like aot makes a lot of sense also it's it sounds like it's really helpful for like if you're a beginner a beginner cursor user or beginner developer call them that learning about all these different Frameworks and platforms like for example superbase or nextjs like I think your your recommendation around go and just read all these doc doents is just going to get you up to speed so that you kind of speak the language and you understand the ecosystem right exactly and and and that's half like that's half the battle really is just knowing what these words mean and I think with AI like you can expedite that process right so if you know the Technologies You're Building you're building with and you have access to the docs and your AI has access to the docks it like every time you get into an issue it's easy for the AI to solve it and in solving it you start to understand how things work right I think this is one of those things where if people are used to learning then doing it's going to be a tough time because it's one of those things you're going to do it's going to break and then you're going to do again it's going to break and then the when it works you realize oh this is how it works you just learned something new right and and I think so far the first three points have really just been preparing cursor with all the information and I I think context is key with all these AI models a lot of people think AI is just magic where it just knows stuff no it just has a lot of context already pre-built in so what you and I are doing um is just giving it as much context as possible with what we're building with what we're doing so it's sort of aligned with us right it it's almost like hiring a new employee and this is the onboarding phase cool quick ad break let me tell you about a business I invested in it's called boring marketing. com so a few years ago I met this group of people that were some of the best SEO experts in the world they were behind getting some of the biggest companies found on Google and the secret sauce is they've got a set of technology and AI that could help you outrank your competition so for my own businesses I wanted that I didn't want to have to rely on Mark Zuckerberg I didn't want to depend on ads to drive customers to my businesses I wanted to rank high in Google that's why I like SEO and that's why I use boring marketing. com and that's why I invested in it they're so confident in their approach that they offer a 30-day Sprint with 100% money back guarantee who does that nowadays so check it out highly recommend boring marketing.