5x Your Cursor AI Coding Quality With These Pro Tips

did you know that most people are only tapping into 20% of cursor's true power in this video I'll walk you through all of the pro workflows I've discovered with cursor's most powerful tool composer these insights combines my month of cursor usage and the decade of software engineering experience this is TR to take your cursor usage to the next level if my words sound a bit scrumbled today I've been my turn earlier today but don't worry the content still at sharp welcome back to the channel let's Dive In app I'll be demoing today is the weekend

project that I've worked on it's a podcast transcript editor that allows people to directly edit audio transcripts without having to deal with waveform editing just implementing those features due to a lot of the sound manipulation and the transcript editing and display a lot of the UI finessing this project is already 2,700 lines of typescript L already a citable project to work with Way Beyond the toy project you see with most other AI videos that you might have seen what we're going to do today is to add in more fine grain permission control to allow users

to only see their own transcripts without accessing other users and as well as adding the capability to invite others to edit the transcript together with you definitely not an easy feature to add but we'll see how we can leverage composer to help us through this whole step first of all you need to put your product hat on and think about with any major feature implementation the last thing you want to do is to give AI a super vague instruction and then just let it hash it out because the bigger step you ask AI to take

the more likely it is to make mistakes and the more likely it's going to create annoying code that's very hard to debug the best practice is to break the task down into multiple smaller testable steps that you can Implement and prompt the AI separately to deal with gladly we don't have to do that manually we have ai to help us actually do that here's a prompt I've given it to actually break that down task for me so just giving it Con text that I want to break the prompt down and then to make sure it

knows my intent to want to split the work down into multiple steps and briefly describe the existing functionality the most important thing here is make sure you hit command enter or just mention codebase context directly on top so that it knows to pull in all of the codebase context such that it can figure out what are the features that already exist what are the interfaces the relevant Fields the database features that already so that it can leverage directly without reimplementing so it gives make sure that it has the full context before implementation the moment once

you hit that you can see it's gone through a ton of different parts of the codebase to pull out the relevant context and then in our case because we had information control it looked into the components the database migrations it looks into how the page is actually loaded and a whole bunch of things there to add the context and what it does at the end is now broken down let's see uh update the database schema update the transcript creation process great update transcript fetching add the API create the API for sharing transcripts and upd the

client side add sharing UI implements invitation acceptance Implement invitation acceptance update Access Control add error handling and user feedback so great it's already broken down our huge task into 10 much smaller and manageable tasks so this is not to say you can't try to prompt AI to do one large task all at once but it's just way more error prome and you end up spending a ton of time in debugging rather than in implementation work it works mostly fine in the early stages of implementation where the code Bas is so small because it doesn't have

that much context to really deal with but the moment your codebase grows it makes it easier and easier for AI to make even more mistakes if you want the best breakdown experience you'll probably want to select the1 preview here the only problem with a one preview is that you have to pay 40 cents per invocation given that you only need to do this once every time you implement a large feature so you don't really need to deal with this too often I think that's a fair price to pay but most of the time Sonet is

already more than good enough the thing to always keep in mind during AI implementation is that think of it just as your intern it's never the architect you are the architect driving the design for the product so really it's always best to ask AI to plan out the work it's going to do before asking it to do the implementation directly the clearer the plan the better the implementation will be and debugging would be so much simpler okay let's go into the first step update the databas schema to allow the sharing let's bring up the composer

interface create a new one and then given that I'm lazy I'm just going to add codebase context so that you can figure out where it needs to take the stuff in every time you get composer to generate code for you it's always best to check how the div is actually made in our case you can see it generated a database migration file so I'm using next.js for dealing with this and uh it creat it up and down that all looks correct and it's also added the shed width inside my transcript type and that passes to

the front end you can see there's an issue where this type is adjacent B but our custom type the type definition is only specifying a string array let's ask it to fix that in this Cas you can see it still forgot to change the jsonb actually into a string slice let's make it do that explicitly okay it's successfully generated here and we can see the type field is still correct and if we go back to the interface let's close the chat to give us some more space let's run our migration here successfully done migration and

now the step is complete it might look like a small step but makes the code super easy to deal with it might use a bit extra of your premium credits but trust me it's worth it next part of the workflow make sure you commit all of the code that AI has edited that you've tested working directly into git we want to add the database migration files and the types one is not showing up just yet we commit then done time for next tip given the sides of the codebase it's always good to give AI that

context of what this project actually is so given the project context it can apply the changes accordingly without having to figure it out from the codebase directly itself you generally want to add in at least a brief line describing the project context what you're trying to implement in the prodject inside the cursor rules for those of you who haven't touched cursor rules it's this file that you can create at the roots of your repository and then all of the content within this file gets prepended to every one of your AI chats inside of cursor whether

it's in composer or inside chat or inside the command K you know inline implementation that you bring up which means that every single time it's going to act with the instruction that's set out inside the curer rules file ensuring consistency across all of its implementations for that update let's also commit that to the codebase right now we have a clean working state wait again if we go back to the AI let's do the second St okay modify the get transcript to check if the current use has permission to access theing transcript if not it should

return no on on authorized error now let's take the second step and implement it with composer again you want to press command n with command n you want to create a new composer that's p in the instruction as always we just shove in the code based content so that we'll let CA figure out what all the files it needs to access this looks decent less read through it here's a breakdown user ID shed width after fishing great let's use it in larger view you can press command shift I to bring up the larger view if

you're on Windows I believe it's control shift I return the user ID and shed with which is our new data one it makes sure that either if it's matching the user or if it matches the Shar width the shed width here should also be using the user ID let's update that okay well let go through the types change is still the same great user ID and it now checks yes the shed withd slice includes our current sessions user ID looks great and we return this Shar user user ID and shed width is all added okay

this code all looks good because we haven't added the UI bits so we won't be able to test on the front end yet but we can still go and validates the fronted still loads as usual right yeah looking loading all looks good so we haven't broken anything the best thing about implementing small steps you rarely have any big errors to really debug now we repeat the last step if we go into git refr the code B changes great all of the stuff that we just committed let's add the code great committed so we move on

to step three create a new function that transcript owned by and shared by the user and this will be a user component create a new file as always we're add in the code base context hit go okay so we get a fetch transcript for user this now gets all of the transcripts either they own or the ones that they have been shared yeah I think this code looks good check out the code changes made good add the file comment cool okay great that worked really well uh let's skip forward a few steps just so that

we can see some changes in the UI let's work on the server components for the transcript list let's copy the instructions open composer create a new one add in the instruction mention codebase go and now we can see that this database query update this databas field is correct you also want to show the user so inside the transcript list page this all looks okay as previously mentioned make sure you always use Sable rather than accept all until you make sure that the code works it keeps the pending changes easily in the code base and then

the moment that you close the composer all of the changes get reverted which means that it never affects your working State and once you click on accept these green red blocks are all gone and then so the changes are already applied that's the thing you want to be careful with if you don't want to risk losing your existing work and given that we've added a a new page for transcripts great now we got the transcript list to show everything and it's correctly indicating that's owned by you so I'm going to directly use my database tool

to add in another transcript to Res shed with me now that's updated and let's refresh there we go and so you can see that shed with that's good we didn't have to do any amount of excessive debugging the code just works now that we we've validated that everything is working okay now and accept off if we go to the git page refresh great it's shown the transcript list is updated the transcript list component here let's add it right now you can clearly see that by breaking down our actions into much smaller steps the implementations are

way more reliable even when problems does come up it becomes very easy to debug so the next part of the workflow and it's now finally time for testing I know many of you will be saying oh man and I've already got AI can generate all of this code for me do I really need to understand it do I still need test short answer absolutely yes uh when your code base is small when you're just working on a prototype it's easy for you to just spend maybe like 20 30 seconds to check out all of the

functionality of your app but the moment it grows it's essential to have test to help you validate that your newly added AI features doesn't break any existing features and make sure that whenever you are making changes you have the confidence of my personal preference especially at this stage is to focus on a few light and fuzzy into end test to test the overarching flow and to make sure the cold workflow actually still works we can still use composer to help us deal with this and now we have to make use of another major feature inside

of composer notepads uh notepads is this thing that's sitting on the top left it essentially allows you to provide even further context on top of like cursor rules because cursor rules is context that gets attached to every single one of your AI prompts notepads are the ones you selectively attach to the work that you're implementing say in our case I created specific Notepads for generating playright tests for those of you that don't know playright is this amazing in a testing framework for the browser if you haven't used it already do check it out just know

that it's a super convenient way to bring up browsers emulate user action check for the UI changes to make sure that we're validating changes from a user's perspective rather than just from A System's core functionality perspective so in my case I've defined a whole bunch of rules of how I wanted to do my end test generation you can also send the files to provide it additional context for most cases I found this to be unnecessary and right now C the hammer really add the ability to allow you to add whole folders or add Dynamic grouping

of files so every time you have to update the content it gets a little bit annoying and I just do the lazy work just mentioned add codebase on every single one of my implementations and then let AI figure out all of the contexts he needs to get out so to make use of this notepad we simply create a new composer and then on on top we can just mention the play right enter the cont configuration test and as always add code base we check out the code ISE actually added goes to the transcript list page

uses the same Al Json that authenticates the user great it uses the test ID for the transcript list to appear okay searches for the transcript items using test ID checks for each of the shed own transcript is that exists and then CH checks the transcript name and everything exists okay this actually looks good and then if we go into the page itself it's also added all of the relevant test IDs to help the test to identify the page items all looks good let's hit save so now you want to make sure you're running the play

right test UI you can do this by npx play right test-- UI to start the command and then you'll see a window showing up just like this um we'll see our inin test showing up here I just click a run well open up the test you can see loads the page locates the different items it needs to check find that everything's relevant and visible test the page down and the test passes just that simple wow other than the apply error that we just saw had no issue that we had to deal with still quite magical

right now I've already accepted the change save the file and now we can close this off refresh the page change it's now added the new test great and we commit again so you can see that Within that short span of time we were able to add in quite a few features albeit slightly slower if you were just providing one giant prop for the AI to implement the whole thing but we're able to do it in a much more repeatable testable and maintainable fashion to make sure every step of the work it works if you want

more tips on how to maximize your usage of cursor check out my videos up there I know I've also mentioned a couple of tools that I haven't dive into details for today if you want to find out more let me know in the comments below until until then Happy shipping and I'll see you in the next one