In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.
Transcript
[00:00] In Composer I'll reference my cursor rules and reference my package.json and I'll instruct it to extract all of the dependencies from my package.json file, add them to my allowed packages in my cursor rules file, and give a brief explanation of when and why to use each package. Paste that in, let it run, it'll start generating. And this looks pretty great so I'm going to accept it and then I'm going to start a new composer with command-n and I can even remove the cursor rules reference with delete. And now anytime I go to create a component from scratch it doesn't have to look into my code base of what we have available it'll make assumptions based on all the packages we have. So if I say create a 404 page, paste that in and hit enter and just that.
[00:51] It's going to leverage packages that we already have such as frame or motion and icons. I'll just hit accept. I started up my site and my 404 page looks like this. I'll refresh, you'll see the animation and it's much more minimalistic and follows what we have. To compare let's try this again.
[01:10] So I'll remove my cursor rules. I will restore to before not found existed. So you'll see it's gone. And then I'll start a new composer session and say create a 404 page, hit enter, and now it's starting to actually read through my global CSS and my layout to see what matches. And this time it generated this page which matches some things.
[01:33] It doesn't have that icon, it doesn't have the animation. Again this can be a bit hit or miss, and from my experience I found that having that information in your cursor rules helps a lot with those initial generations. So thankfully we can reject this, go back to a previous conversation, and then apply this again with this reapply button and we have our old 404 page back.