Transcription
Hey everyone, welcome back to another new exciting video.
Now, it is very easy to write better code with the context 7 skill. So many of you are familiar with context 7. We know that inside context 7, we get the updated code for every library. But they have released a new feature, which is the skills context 7 skills.
So, if you go to this context7.com website and there, you will find this new tab, which is the skills. If you click on that, here you see that there are many skills they have added. One is the front-end design PDF skill creator, web design guide, MCB builder, web app testing, senior front-end, canvas design, web artifacts, and there are many skills that they have added. And it is very easy to install these skills inside your project. It can be a new project, it can be an existing project. Okay.
So, let me show you that step-by-step process. And here you see that we extracted 24K skills from uh 65k repos and skills for Tailwind, React, Beta, etc. installed in a single CLI command. And here you see that after going to the skill tab, you will find there are many skills. Let's say I want to install this uh senior front-end skill. So, what I'll do, I will click on this senior front-end and open it in a new tab.
And here you see that inside this senior front-end skills um you will find this description like comprehensive front-end development skill for building modern, performant web applications using React, Next, TypeScript, Tailwind CSS, etc., etc. And also, it will use the UI best practices and also use when developing the front-end features. Means, you will be able to build the better website with the latest code. So, from context 7, you will get the latest code and also you will get the latest updated skills. Okay.
So, after that, here you see that they have explained about this uh skill senior front-end in a better way that what are there inside this core capabilities uh pointwise they have mentioned. So, you can read this before installing this specific skill.
Now, after that, here you see that on the right-hand side, you will find this uh raw and install this two button. Now, if you click on this raw, then it will open another new tab and here you see that this is the raw um skill description, name, all of that things are written here. So, uh you can copy these things and you can manually create that agent folder. But if you don't want that manual things, you can click on this install.
So, after that, here you will find one popup and here you see that uh if you run the first command, then you will specifically install this senior front-end skill. But if you uh install this command, this below skill, then you will install all of the skills that are there. Okay. But I am interested to go for this specific senior front-end skill. So, let me copy the first command and now open any of the IDE.
Now, I have opened this anti-gravity. Now, here uh I I need to run this. Okay. Now, I I can open the terminal here. Okay. So, control J. I have opened the terminal here. Open the CMD and here. So, let me just uh make this section large. Okay. And let me minimize this section. Okay.
Now, here uh inside this project folder on the left-hand side, you see that there is nothing in my project folder. It is totally blank. Now, if I paste this command and now if I press enter, you will see that it will create one agent folder and inside that, it will create that skill. So, okay to proceed? Yes. Y enter.
And here you see that um it is installing uh some of the packages for this senior front-end and it is asking that which client do you want to install the skills for. Okay. So, I I am installing it for the anti-gravity. Okay, because I am inside this anti-gravity. But if you are installing it for the Claude or Cursor or Codex, Open Code, or am anti-gravity, then select that specific IDE because uh you see that for Claude, Code, there is a dot Claude folder, inside that they will create the skills folder. For Cursor, there is a dot cursor folder. For Codex, there is Codex. And for anti-gravity, there is a dot agent folder. Okay. So, it actually varies for the different different IDEs.
Now, as I am inside anti-gravity, so I am selecting this anti-gravity. So, select it and press enter. And now we will see that it is downloading the senior front-end. And now on the left-hand side, you will see that senior front-end got installed. Okay.
So, here you see that inside this, we have this. Now, uh this is the skills.md. And now if you just open it and here you see that all of these are mentioned here. Okay. So, total full script uh that is required for the uh senior front-end that actually industry standard like bundle analyzer, means if if they can reduce the bundle size and if there is any error, then it can automatically fix that and you can it can increase the performance. So, all of that things, front-end scaffolder. Okay, all of the things are mentioned here. So, as a senior engineer, you can use this skill. Okay.
And now, not only this front-end, here you see that there are many skills that they have mentioned. You can use anything like web app testing. After building the website, you can test the full web app. You can use this web app testing. So, it will follow that specific guidelines that is the industry standard and also updated. Okay. This web design guide. There are many skills here. You see that 12,000 skills they have added. So, please do check out this and please use it. And the usage is very simple.
So, open any of the uh code editor that is you are using and after that, in this um section where actually you give the prompt, just mention that use the uh I think at the rate and add the files and here you see that I can choose the skill.md. Okay. So, I can just write that use the skill.md file, use the, what is there? So, this is the name, specific name is the senior front-end, use that skill and build this website. During building that, you can use it in this way.
So, I hope that this detailed video with step-by-step process is helpful for you guys and you got to know many things from this video. And if you found helpful, don't forget to like this video. Don't forget to subscribe this channel to get this type of content more. And one thing, yesterday I made the video on this Ola integration with the cloud code, Codex, open code, Android. So, please do check out that video. This is very important because they are giving the free access to all of these AI collaborators, all of these agents which are popular. And also, you can use the Ola model for free that is hosted in your locally. And also, they are providing the cloud model access okay from their infrastructure. So, yes, if you found helpful, please make sure you like, subscribe this channel and see you guys in the next video. Thanks for watching. Bye-bye. Take care.