Transcription
Hello. In this video, we will try to make a website with you using lootcд and using skills. And on the example of these skills, I will show how to install them, how to use them. In order for our design to stop being approximately like this, and become a little bit better. I made such a site for myself. A portfolio site, which has various interactive elements. You can add video here. And this site has several pages. There is even such a cool thing where you can chat with my copy, and it works completely. Such a cool widget, such a cool chat. In order for designs, in order for ordinary landing pages, to stop being purple with gradients, as it was before. so that it is more or less usable and watchable, I suggest using Skills. And in this video, I will explain step by step from the moment I had the idea to the implementation, in its current form. The site is still not finished, but it is not finished in terms of its content. That is, somewhere texts need to be corrected, somewhere some points need to be rewritten. Here it came up with some cases that I didn't have. This is already a ready-made project that can be launched on a server with literally one or two commands from the terminal, hosted on Vercel. Watch this video to the end. If you are interested in AI coding and don't know how to apply skills, that's exactly what I will be showing. And now we will get down to business. The first thing I started with was going into clk, that is, not into clД code, but into the regular clд application, and gave it this rather simple prompt. Let's develop a personal website for me with this domain. And what are the ideas based on what you know about me? Here it came up with something. In general, I think it's okay. I didn't get too picky there, because a lot of copywriting can be corrected on the spot. The main thing is that I liked the idea itself. I also fed it this reference. I said: "I like this style." where there is such a dark design. There are many such cool micro-animations. And all these kinds of things. Well, this is just to get inspired. It opened Chrome, used the Chrome Extension, looked at this site, and based on this, it created a design system, selected a tech stack, and I asked it to return everything in markdown. It gave me these four design system files: README, content, structure, and technical requirements. I open these files in cursor, and simply enter the init command. What does it do? It goes into this PD docs folder and starts reading the files there, generally understanding the context of what we have in the project. But since the project is currently empty, there is only documentation, it reads it, says that I understood that this will be used there. Clod MD created this Lifefile. Then I started reading, I see that here, Nexs version fourteen, React version eighteen, Tailwin version three, and a lot of other old stuff. Well, so to speak. I tell it: "Listen, the technical requirements are very outdated, find the main technologies and update the list." And so it went to search webarch. Websearch, there are many websrches here. And it fixed it everywhere. It was NextJS fourteen, it became sixteen. React was eighteen, it became nineteen. Node was updated to version twenty-two, and tail wind and other various libraries. So this was my first action. I haven't connected any skills yet, except for the default ones. Then I create a new chat and ask it what skills are available to you. And it tells me that there are design webtefact builder, web app up, MCP builder, Steel Creator. In general, well, these default skills. And I think that to create such a site, I need at least a skill for working with NextGS16, and best practices for React development. Besides this, I think that since it's a regular landing page, it doesn't have any full-fledged backend, at most maybe a feedback form, so I think I'll need something related to design, specifically for landing pages. So, the next step. Since there are no highly specialized skills for the technologies I'm using, I go to skills.sh. This is Vercel's repository of skills. And here I see VSL React best practices, exactly what we need. It will probably cover NextJS, and React nineteen, which it practically doesn't know. In general, it's suitable. And all I need to do is copy this line and paste it into my project's terminal. Here it offers to choose for all agents or a specific one. I say: "Let's choose a specific one. I need it for clod code and let it be for cursor." I don't plan to use anything else in this project. Project or Global? I want it only at the project level. I don't need these skills in all directories, in all projects. And I say that here there is an option to create all these skill files in one place, and all additional folders, like .cursor, .clot, .codex, etc., will simply link to it. So, if you edit a skill in one place, it will be updated in all agents immediately. I say: "Okay, let's simlink and go." And here, in the spirit of Vercel, it installs find skills, a skill that allows you to search for others on their site, on their repository. I say: "No, I don't need it." So, I have clod, cursor, and agents. But I don't think we'll get away with just React best practices. Here there are design guidelines, design guides. I saw some other skill, more trendy in terms of UX UI. I used it and showed it. UX UI Pro Max, something like that. I really liked it. Let's install it too. What's convenient here is that I can use the settings I chose last time, at least for the agent. I agree to the project level, simlink, and continue. Everything is ready. So we already have a skill that understands how to work with React nineteen. We have a skill that improves web design, which will take into account, I hope, our design system, our themes, colors, and all that. Let's see what else, what about pokstu. Next best practices are available, yes, also from Versel Versel Labs. Why am I doing this on nexts now and not on pure React? Because it's a landing page, it needs static, and it knows how to create, that is, render static pages. And thus they can be indexed, for example, by search engines and crawlers, which can then, in the end, index the site for search results, for search results in CH GPT or Perplexity. Therefore, in React, this can also be done. You can also create static in React, it's just that in NegS it can all be done out of the box. I'm installing animation in the same way. What about animation? We have 3GS Animation Framer Motion Animation. We need to see which library we use to do animations. We use frame motion for animation. And it would probably be good to install some skill. Well, let's take the most popular one. Let it be this one. And let me install it too. So, something broke here. It says the skill is found. Interesting, right? For some reason, this repo is not there. Well, okay, let's try another one. Okay, let's try to install this one. It also doesn't work. Interesting. Well, let's try a third one. The least popular, but not necessarily worse than others. This one worked. at the project level, simlink, and continue. I think we have enough skills for now. And now what needs to be done? Now we need to check if clod-code has read our skills. To do this, I think I need to restart it. So now I'll check which skills are available. If the skills we installed are available there, then yes, no, the skills are not available. Well, I'll have to close all this. I'm launching a new instance and asking the same question: "What skills are available to you?" So, this chat can also be closed. I've already shown it. Here's our promac. Here's next framer. So these skills are already there. What's next? I created a new chat and say: "Look at all the documentation in the Docx folder and create Taskis for implementing all tasks." This new CLD code function is the task list that replaced the to-do list. I recently made a video about it. You can watch it. A link will appear somewhere at the top. A very cool thing. And I was surprised that this video didn't get many views, because it's a very practical summary of how to use it now. But anyway, I ask it to read the documentation and create this task list, which it can then execute autonomously. And I launch all this successfully. If you are watching this video, then at the very beginning, I obviously showed what kind of site I will be making, but I myself don't know yet. I have to make it. It's a regular portfolio site. But there's a catch. I want to make a chat where you can chat with me, ask about my cases, ask about my services, or just talk and chat with my AI copy. So, it will be a very minimalistic, as it seems to me now, minimalistic landing page, where there will be basic information about what I do, who I am, what cases I have, and this chat where you can ask something. I think it should be quite cool and nice. I hope it works out. Otherwise, why all these skills? In short, we will watch and build all this further. Somewhere I will fast-forward some moments where I will be writing prompts. As always, I will stop and show in detail. Here is the task list. So, it gave me to-dos, the project is empty, only documentation exists. Now I need to check if it created the task list. To do this, we need to go into the docs folder in our user folder and here, tasks today. I don't see any tasks here. So, there was some entry here only an hour ago. In general, it didn't do it. Again. Create a task list in the form of files for yourself. Try, because it always worked in the terminal before. Here I am using an extension, so through the graphical interface. I don't like it. Again, yes, there are such moments. Maybe it doesn't have these tools at all. Although, of course, I don't believe that. I think it just messed up. By the way, what model is used here? Popus creates a list MD, but that's not it at all. But okay, since we started, good. Yes, ready to start implementation. Okay, I'm starting implementation. I tell it: "Start implementation. If you have any questions for me, ask them." I hope it will ask them. And this is always very important. Then the result will be a little more predictable. It won't disappoint as much, at least. The more questions there are, the more accurate it will be. There is even a technique, I don't remember what it's called. When the LLM just bombards you with questions. I used it once, I got 54 questions. I went crazy answering them all, but the result was worth it. Why else don't I like this extension? Because I often run code in dangerously skip permissions mode. And now this is not in the extension, and I will have to work as a babysitter and constantly confirm all its actions. Our intermediate result is this. Five tasks have been completed. That is, basic initialization, installation of various library dependencies. Five tasks are completed, it automatically moved to the sixth, which means it worked, but again, at the to-do level, because I don't see these tasks here. Maybe they are here. They are not here in the clot folder either, unfortunately. It works, and it continues with the tasks itself. All I've done all this time is confirm a couple of times to let it continue, give my consent to edit files. Now it's starting to create the layout. So the hero section is this part of the site, it's called the hero section. And then it will go through the tasks. What I like about the new task list is that the context is not lost. It always knows where it is, in what place it is, which tasks block each other. Here, it might drift at some point, so let's hope that doesn't happen. And the document, this task list, will somehow help it. Moreover, it doesn't mark anything here at all. A rather interesting jump occurred. It updated everything at once. It was on this task, I think, on this or this. And then in a second, bam, it crossed out a bunch of tasks. But not in this file. It has its own file where it marks it. So it says it has fully styled everything. And besides that, it has already styled the API for the assistant. What model do you think it installed? What framework did it take? Probably, yes. You guessed it? It took the agent SDK from Anthropic and says: "We need to use models from Anthropic." Yes, in principle, I don't mind, but at most, probably Haiku, so as not to abuse it all. Its work continues. Its hour has been cleared, auto-compact has occurred. Auto-compact is when it cleans its context window itself, removes everything unnecessary, makes a summary. What it worked on, what it did, what it's doing now, and what its future plan is. It removes all this from the context and starts moving on. Now it's setting up MDX for the blog and then it will attach some kind of database for the blog. I didn't know I would have a blog. Well, okay, since there's a blog, then I'll have to create a skill so that it maintains it daily, sends posts only to Telegram for me to approve. As strange as it may sound, a blog on a website has a very good effect on SEO. If there is an SEO task, then I think those who do SEO know that such articles, blog posts, as they are called, work quite well. And if we are talking about, that is, when we want to get into the search results of CH, then we need to write in a way that models would find it convenient to read, models would find it convenient to find in the form of a summary, in the form of ready-made results. So ready-made results will work great for geo. It says the implementation is complete, all tasks have been completed. I don't know how true that is, but I see that this task list remains in this status. Let's look at what it did here. We'll do more. Well, let's run runf to launch the site and see what wonders we have there. But in general, not bad. I see that the CSS is partially broken. I think we'll have to mention that. This is quite common with the latest Next GS, React, and Ta fourth. It's not very familiar with it. What will we do next? We will create a new chat, insert a screenshot, and make a prompt. The website development has just been completed. And I believe the problem is that the broken CSS is most likely due to incorrectly used Tailwind version 4 or incorrectly specified styles. We need to check and research this. I see that it's absolutely useless to try to fix each element separately. Something is broken at a global level. Your task is to fully understand this situation, find where the breaking changes were, what you did wrong, and fix it all, restore all the indents and restore the full CSS. I'm sending the prompt, and in the meantime, we'll look in more detail at the content part. It's cool to start a project. This is scrolling here. And this is the page. Here is the projects page. There is a blog page. There is a users page, it's unclear what this is. And there is a community page. But in general, it seems very cumbersome to me. Here is a section where I can embed my YouTube videos. Here is what I work with. And there are these things. Here it indicates how I can help with different sections. The copywriting is almost all wrong. I mean, the texts need to be corrected manually, of course, it doesn't correspond to reality. The footer is just crazy, like for a whole SaaS. And here's another one, ask. Oh, make it like a terminal. Well, hello. Sorry, an error occurred, but most likely the API is simply missing. Okay. Fine, we'll deal with the visuals now, because it all looks pretty bad right now. Simply because the layout is broken. It's a pity I didn't install the Tailwind Skill. We can take this Tailwind V4 skill and install it on the fly, as they say. Well, obviously, it's really struggling with Tailwind. Let's install it. Well, you finish up, then we'll need to restart, because the skill won't be picked up then. What's interesting is that all the languages are mixed here, Russian, English, and everything else. And here you can see that at some point it used the Tailwind skill. Tailwind 4 skill. It read it, looked at it, and says there are many flaws, as I already said, that 4 links don't know, there are many critical changes, that's why everything is breaking. Therefore, it will have to redo it here. And my mistake was that I didn't use this skill at the start, when I was developing the design system within clod. This should not have been done. Now I'll have to sort it out. Work is finished. I've added a few more prompts. Where to change blocks. I haven't touched the copywriting yet. There's still work to be done here in terms of portfolio projects and texts, but in general, more or less, this is the kind of site I was expecting. Here also, where these letters are, I think their position should be random, not like in a grid, as if behind bars. Well, in general, you can work with this further. I think it will take literally another 20-30 minutes to get to a fully ready, complete website. To summarize and understand what happened from the very beginning. We started with just a bare idea. There was an idea, I had a domain, I worked with sdd code, where together with them we looked at some references, found a reference, it studied, prepared detailed documentation. Then I used various skills for frontend development, for NextJS, for React, for Tailwind. I created this personal website completely autonomously. In the future, I will be able to finish it with minor edits, using some additional skills. maybe I'll add some animations. The point is that skills are a very useful thing, and they need to be used constantly. If you work with any kind of agent. It doesn't matter if it's IT development or a personal assistant, it's a must, and you need to understand them. And I think that skills are the technology that, in a rudimentary form, will lay the foundation for self-learning systems. Because, if an agent has the ability to create a new skill for itself, it means that it is constantly expanding its arsenal of capabilities. And most importantly, it can improve its existing skills. Try using skills as I showed in this video. I hope the video was helpful. Like if you enjoyed it. Subscribe to the channel if you haven't already. Click the bell to not miss notifications about new videos. And we'll see you in the next video. Bye. [music] [music] AI whispers as the circuit home.