Transcription
Subscribers of my Telegram channel know that I have been using Cursor for development for the past 11 months every day. And since I started using it, I haven't opened VS Code even once. During all this time, which is almost a year, I have gained a deep understanding of how to use Cursor, what its limitations, pros, and cons are, what it can do, and how best to interact with it. I mentor many guys, and they are the ones who pushed me to create this video. In 100% of cases, when I told them this information, each of them found at least one mistake from the list that I will tell you today. But in this video, I will give you not just a list of mistakes, but a summary of my experience working with Cursor, and not only, of course, with examples. The channel is dedicated to front-end, but all the advice I will give today is applicable to any area of development, be it GameDev, back-end development, or anything else, except perhaps for the applicability of one example and one feature, but more on that later. And at the end of the video, I will talk about a new alternative to Cursor that has been hyped in the Western IT community for the past month. And I myself have been using this tool for the past month. So watch until the end and you will find out everything. Hello, my name is Arseniy, and today I will help you take your productivity and code quality to a new level. So, what is Cursor? I don't think I need to explain. And if you do, then why are you not yet subscribed to my Telegram channel, where I wrote about this very Cursor six months ago? And not only about it, but also about various other tools. The link will be in the description. Read, subscribe, there you will find a lot of useful things, my insights, experience, some new tools that I discover for myself. In general, either useful or interesting, but I don't write there often, only the very, very coolest stuff. In this list, we will go from general to specific, from mistakes in approach in general to mistakes in using or not using specific tools. And mistake number one is to let the AI think for you. Artificial intelligence is not a co-developer, it is a combination of an encyclopedia and a very diligent and very hardworking, but non-thinking developer. It will do the maximum it can, but it will not necessarily be exactly what is needed. Theory crunching. Working on a task, whether educational or work-related, is divided into three main stages: planning, execution, refactoring. Planning: think, look at the code, build a solution plan. Execution: make changes to the code. Well, in fact, write this code to solve the problem. And thirdly, refactoring. Test, fix bugs, improve code quality somewhere, handle edge cases. Of these three steps, only the second can be fully delegated to AI. You will still have to think and check yourself. Let's take an example. It is necessary to develop a new page with organization cards. We could write a prompt like this: create a page with organization cards. Here is the design screenshot. The result will vary, but it will 100% require many manual changes, or asking the AI to fix it all. And this can definitely drag on. As a result, the code quality will suffer, or you will completely scrap everything and start over. So, to speed up this process tenfold, we do not shift the first step onto AI's shoulders, but plan this work ourselves. We open the code and start analyzing. And in the process of analysis, we understand that, firstly, we will get organization data from the backend. This means we need to make a request. The application already has a page with similar cards, but these are user cards. Well, for example, this means we need to extract the card component into a separate one, and then use it on the new and old pages, meaning component reusability is the basis of React architecture. The card itself for the user and organization is slightly different, which means we need to provide for different combinations of props and type them correctly. Most likely, our project is in React. And ideally, here you need to come up with the specific prop structure yourself and write down their types. Finally, we know that reusable components in our project are located in a separate folder, which means we will create the card there too, and so on. This collected information, which we have just highlighted, is our input data, our plan, the result of our analysis. And we take all of this and then pass it with all the details into the prompt so that artificial intelligence performs the second step, makes all the necessary changes. The third step is testing and refactoring. We can already divide and test ourselves. We give the detected bugs to artificial intelligence for fixing. If we can't handle it, we connect and fix it ourselves. We refactor together too. We look at the code ourselves, but we can give the AI instructions for fixing. You can also ask it to evaluate the written code and find potential bugs and uncovered edge cases. This is a cool cheat code in general. Server errors, empty organization array, etc. This is really cool for AI to look at, to see if all our edge cases are handled. Mistake number two: trying to one-shot large features, i.e., hoping to complete the task entirely in one prompt, passing all parts of a multi-component task into it at once. Let's continue to analyze the previous example for clarity. It clearly has five subtasks: create a hook for requesting organization data from the backend, create a separate card component, integrate it into the user page, create an organization page with data requests from the backend, and finally, fifth, integrate the card into the organization page. These five tasks can be performed one by one, gradually, not all at once, and then the result will be 100 times better. I guarantee it all. Because the more precise and accurate tasks you describe in the prompt, the higher the probability that everything will be done clearly and without errors. Yes, of course, there are models like Claude 4, which with a certain degree of luck could indeed handle all these subtasks at once, but this is not about the possibility at all, not about whether it is theoretically possible, but about how to improve the quality of tasks performed on a regular basis. So, if the first mistake is related to us giving planning to AI, and we start taking it back and giving everything to the prompt, what we have planned and analyzed, then the second mistake is related to the fact that during analysis and planning, we should also think about what small tasks we can identify from this large task, what small tasks we can break this large task into. Even if it's not that big, it's still better to break it into two or three or more tasks. This is how we break tasks into subtasks and focus on one or two specific goals, which means there is less chance of error and less new code for us to check at once. Profit. Let's take a break for a second and imagine this situation. You've coded your beautiful web service or even more beautiful portfolio website, and now you need to publish it somewhere. You'll also need a nice domain. How can you do without it? And here the company Select comes to the rescue. It is one of the leading providers of cloud and physical IT infrastructure in Russia. Especially cool news is that Selectel has officially become a domain registrar in the .ru and .рф zones and is now giving away domains to all users. At Selectel, you can register domains for any of your projects, large, small, personal projects, production projects, as well as projects for your clients, if you, for example, work as a freelancer. And this will be an excellent solution. Why excellent? It's simple. Firstly, speed, minimal processing times for domain registration and management requests. Secondly, simplicity and ease of use. The intuitive interface and extensive, understandable documentation allow you to quickly and easily register and manage domain names. Thirdly, free features in a unified panel: SSL certificates, auto-renewal, DNS hosting. Fourthly, flexibility and scalability, the ability to integrate with other Selectel products, for example, cloud solutions. Fifthly, round-the-clock support, professional and high-quality support 24x7, ready to help with any questions. So, register in the my.select.ru panel using the link in the description or by the QR code on your screen and register or transfer your domains to Selectel in a few clicks with 100% cashback until the end of July. There is little time left, so hurry up. Well, we are returning to mistakes in working with Cursor. Mistake number three: not using the main features of Cursor. And here we are getting to what I consider an absolute must-have when working with Cursor. Let's quickly go over the main features. You all know about the chat tab on the right. It opens with Command + I on Mac. In the message writing window, there are the following interesting features. Firstly, adding context at the top. Be sure to specify files, folders, and even specific lines that contain the code that will be needed to solve your task or that needs to be changed. This way, the AI won't have to search for them itself. It doesn't always find everything it needs. And here's a tip: specify not only the files where the code you want to change is directly located, or where files relevant to this task are located. But also specify, for example, style guideline files, custom components that will be needed for use, helper functions, reducers, store, examples of similar things in other places, and so on. With the same example of developing a new organization page, I would attach the user page file and specific lines where the card code is located, the folder with universal components, the folder where the page needs to be created, and an example of styling a page from some other page and its styles as context. Next, at the bottom, we have the model selection and the ability to attach a screenshot. Let's go into a little more detail on each aspect. Modes. There are three of them here. Agent is the default mode for complex programming tasks. Here, it works as autonomously as possible, explores your codebase, edits multiple files simultaneously, runs commands in the terminal, and fixes errors. Full autopilot for complex features. You control little, especially if you enable auto-execution of commands, which is quite convenient, actually. The next mode is Ask. Read-only mode when you need to study or understand something. The AI searches the codebase and answers questions, but makes no changes. It is ideal for the first stage of working on a task, for analysis and planning. Understanding the code before changing it. For example, explain how this part of the code works or show where payment processing is handled in the code or check this, I don't know, some modal, etc. Finally, manual is a mode for precise control and edits only the files that you explicitly select. No codebase searches, no commands, only focused changes where needed. Works great when you know exactly where and what you want to change, i.e., full control. There are also custom modes. This is a beta feature where you can create your own modes with specific tools and instructions. Like a mode, for example, refactoring only to improve code structure or a debug mode for finding bugs. This is enabled in Cursor settings, Cursor settings, then chat, and custom mods at the bottom. After that, here we will have add custom mode. And here you can name your mod debug or refactoring, set certain limitations, add some prompt, add binding to some specific hotkeys, and so on. Honestly, I don't use custom modes. That is, these three standard ones are enough for me. Moreover, in 90% of cases, I use either Agent or Ask mode. Next, to the right of the mode selection, we have model selection. Everything is quite interesting here. By default, this thing is set to auto mode, and some people don't even switch it, which is a very big mistake. You can manually select the model used for certain tasks and thereby increase the quality of the code you receive exponentially. In auto mode, the most suitable model is selected automatically, but in this mode, Cursor does not explain how this feature works, and as a result, it is unclear which model the task will be assigned to. What do we have here? Turn off auto and get many different models. Now their position in this list roughly corresponds to how well the models perform overall in my experience. The best is Claude Sonnet 4, and it's the thinking one. This is indicated by the brain icon on the left. Then comes Sonnet 4 non-thinking, 3.5, and so on. Thinking O3, thinking Gemini 2.5 Pro, and the rest. If we go to settings, we can add or remove models from the list. Go to settings. Again, Cursor Settings. Here is the Models tab. And we see which models are enabled, which are disabled. We can see all models and enable those we need. If you have a Max subscription, you can enable Claude 4 Opus. This option, at the time of the video's release, is the absolute leader in writing code. You can also enable Deepseek, Sonnet 3.7, and other models here. To the right of the model selection, we have the screenshot attachment button. And I think this is a rather underestimated feature. Do not neglect screenshots. And this is precisely the advice that is very relevant in front-end and very questionable for back-end. Because instead of just describing the visual elements you need in words, you can attach screenshots, design drafts, or actual designs and better convey to the AI what you want from it. Mistake number four: not using rules. And if you're like, "Yes, I already use these rules," then watch this segment to the end, there will be the best part. In Cursor settings, again, go to Cursor Settings. Cursor Settings. There is a Rules and Memories tab. We are interested in two parts. User rules, this part, and project Rules. Below. User rules are user-defined rules. This is an addition to the prompt that will be automatically substituted into all your requests. These are global settings that work always in all projects and are substituted into all your prompts. Previously, I had only a few rules here. Like always write code in English with English comments. Use TypeScript instead of JavaScript. Prefer functional components over class components. Prefer arrow functions over regular ones. Always add type checking for props. Extract recurring functionality and a couple more. Now I have inserted here what I found on the internet. I think it was on Reddit. And here is a set of rules that one user recommends as very effective. And I was interested to see how they work. So far, I've been using them for about 3 days. So far so good, but they start amusingly, of course. You can read them yourself. And in the meantime, let's move on to Project Rules. What are Project Rules? These are rules for a specific project that are stored in the .cursor/rules folder. Since this is a new, clean project, I don't have any .cursor Rules here, but I often use them. If the .cursor folder is not added to Gitignore, then it will be included in Git. Here you can configure everything related to this specific project. If we click add rules, we will be asked to come up with a name for it. Let's write something like nextjs rule. And here we will need to enter a description and, in fact, the rule itself. But before that, let's see what we have at the top. Here we have four types of project rules: Always apply, apply intelligently, apply to specific files, and apply manually. What does this mean? If apply, then these rules will be applied to every chat in this project. Apply intelligently. Cursor, the agent will somehow, in an unclear way, decide whether the rules will be applied or not. Specific Files, we specify specific file patterns, for example, .ts or .js, to which these rules should be applied. And finally, apply manually is when you will have to manually specify these rules through the @ symbol or through this context rules, i.e., give them a reference so that they are used. I usually use apply manually and put the rules in the context. According to the Cursor documentation, they advise the following. Firstly, keep rules short, up to 500 lines, break down large concepts into several rules, add specific code examples, avoid vague wording, and use `sourcefilename.ts` for file references in rules. That is, yes, in the rules, we can refer to specific files with the same guidelines, our reusable styles, and so on. The most important thing is, if you catch yourself writing some addition to the prompt over and over again, some identical instructions, then it's a sure sign that it's time to create a separate rule for your project and use it via the @ symbol or by simply attaching it to the context. But I promised that there would be something cool at the end. And this is what I'm talking about. There is a website called cursor.directory, where a lot of ready-made rules developed by other users for all the most popular technology stacks are posted. Let's go to the site, the link will also be in the description. Let's open the Rules tab and see that on the left we have a choice of a huge number of languages, technologies, ready-made stacks, and so on. You can literally find ready-made rules written by users for any stack, or almost any current stack. React, NextJS, Vue, PHP, JavaScript, Laravel, Go, Java, mobile development, GameDev, React Native, many others. In short, almost anything. You can find the necessary technologies here. For example, let's take NextJS, as it is a very popular framework, we can see here that we have as many as 12 rules. We can look at each of them and choose the one that suits us. Let's open the first one we find. Here, this rule makes our agent consider itself a senior frontend developer and an expert in React JS, Next JS, TypeScript, and blah blah blah. It describes the coding environment, meaning it says that Tailwind will be used here and gives some other various advice. To use this rule, we just click the copy button. Then, in this rule, we paste this text, save it. We automatically create this .cursor/rules nextjsrule.md file on the left, as we named this file. And now, when we write some prompt, I don't know, create a page, we can manually specify the desired rules like this through the context rules nextjrule.md. And thus they will be used in this prompt. A super useful thing. Look at cursor.directory and choose rules that suit your project, your stack. Plus, of course, you can edit these rules yourself, add something that you consider necessary, or remove something that you don't like, for example. Finally, mistake number five. And, strangely enough, it sounds like this: use only Cursor, stop at it, and don't try new tools. If you use Cursor, then you at least follow the development of AI and new tools. Don't become a hostage to a single tool, Cursor. Instead, try new things and find what really works best for you. Perhaps it will even be several tools, as it turned out for me. For example, a new IDE tool from Amazon was recently released. It's called Kira AI. And while it's in preview mode, it's absolutely free. I, by the way, told my subscribers about its appearance in my TG channel a day after its release. So, I repeat, the link will be in the description. There I also shared my opinion on its use during the first couple of days. Take a look, read it. But I won't be talking about it now. The tool I'm going to talk about, and which I hinted at at the beginning of the video, which I consider an awesome alternative to Cursor, is called Claude Code. And it's not an IDE at all, as we're used to. Claude Code comes in the same subscription as Claude. It's a service from Anthropic, an alternative to ChatGPT, if you haven't heard, and it gives access to the best models for programming at the moment. These are, as I already said, Claude Sonnet 4 and Claude Opus 4. An even cooler, more expensive model. This tool is installed via npm install or via homebrew if you have Mac, and you interact with it directly in the console. How does it look? We open the console and enter the command claude. It will immediately ask if we trust the contents of the folder. We say, "Yes, of course, we trust it." And we find ourselves in the Claude Code interface. We are immediately prompted to execute the init command to initialize. This command will create a file with general documentation for our project, which will be called claude.md. Let's see what it will write to us, considering that the project I have just deployed is just a starter template for Next. After this command, we create this file. We say, "Yes, of course, save it." It ends up in the root folder of our project, and we can see what we have here. Then, in our chat, we can change the model with the command /model. Here we have OPUS, Sonnet, and a combined usage mode available. Let's choose Sonnet, for example, as a lighter model. And finally, we just write any prompts. The same create a page. But what's the catch? Instead of immediately trying to create this page or immediately throwing a prompt at it and saying execute, we can switch between modes using Shift Tab. We have accept mode, meaning it automatically accepts changes without asking us. And the second, coolest mode, Plan Mode. Plan mode is a mode that first plans, shows you a work plan, and then goes through it. Important remark. This is not the same as the first step in working on a task, as we discussed at the very beginning. You will still have to plan this task as deeply as possible, analyze your codebase as thoroughly as possible, identify all files, all nuances that you want to change, and give it to him in the prompt. But before it starts working, load your prompt anyway and enter Plan mode. Let it write the plan. After you read the plan, you can either approve it, and then it will start working according to it and make changes, or you can make changes to the plan. And this is just an incredibly convenient feature. It's like it consults with you before actually starting to do something. I tell you seriously, I use this feature every time I need to make some changes, I don't know, more complex than changing a couple of variables in the code. In short, cool. Naturally, we can add any files here. And it's done very simply. We take this Claude MD file we created and just drag and drop it here. That's it. Moreover, we can transfer not only files from this folder here, but also any screenshots in any quantity, not just one by one, as in Cursor, or any other files from other folders, projects, and so on. I must admit honestly, the chat interface with Cursor is still more convenient for me, but for the sake of the quality of the result that Claude Code provides, I am willing to endure it. And what is its advantage, and why do I think it is better than Cursor, based on real events. It's a machine that holds context incredibly well, better than Cursor, but more on that later, and knows how to plan and handle complex tasks and can access any files on the computer. As I already said, you can drag and drop anything here. Yes, Claude Code uses the same models as Cursor, Sonnet Opus fourth generation, but the fact is that Claude Code uses these models much more effectively and simply, somehow better overall. I don't know how exactly Anthropic achieved this, but the fact itself is not surprising. These are their models. They know their weak and strong sides and can optimize system prompts, tools, and even fine-tune the models themselves so that they work better specifically for code, for coding. I think all three of these techniques are applied. And in combination, it works just awesome. Oh, yes, and a couple of words about context. Cursor is a startup that is currently burning a huge amount of investor money. And over the past year, Cursor has offered subscriptions really almost for free compared to the value it provided, how many requests, tokens, etc., it gave you. In that case, how do they stay in the black? So, one way to save is by cutting down on context. Let's go back to the chat and look. When selecting a model, we can notice this banner 128K context Window, meaning a context window of 128,000 tokens. And this inscription does not mean that your conversation, for example, 120,000 tokens long, will fit entirely. Cursor uses its own model, which automatically selects and attaches relevant files, relevant context from your codebase and current session to the responses, or rather, to your requests. And it can itself determine whether to include more or less of this context. And for savings, naturally, it always chooses to include less of this context. For example, the model may pull up a few files, not all that you provided in the context. Or it may not find the files that you implied need to be changed. Because of this, of course, the quality of responses decreases, and the tool does not always fully understand the context of the code you are working with. Naturally, this doesn't always work. Sometimes it's better, sometimes worse. How exactly it works is unclear, but a large number of complaints and tests conducted by users confirm this. In general, over time working with various AI tools, I have developed my own techniques, and as a result, I use different tools for different tasks: ChatGPT, Claude, Cursor. If you would be interested in learning about my techniques, tricks, and how I distribute tasks between all these neural networks, then write about it in the comments, and I will make a separate video about it. But that's all for today. Use it wisely. Complete tasks faster, more efficiently, better. And remember, artificial intelligence is your assistant, and the main developer is you. See you soon.