Transcription
Hello everyone. Today I will tell you about GitHub Speed Kit - this is a framework that allows you to significantly improve the quality, speed, and efficiency of development in IDEs and with tools like Cursor, and in general, development using neural networks, which allows you to structure all information and turn technical specifications into artifacts that will help us guide the entire code creation process. So, first, let's figure out what GitHub Speed Kit is. This is, again, an official tool from GitHub. They implemented it very recently. It is still constantly being updated. I'll tell you quickly now. To begin with, it is based on the concept of Spec Driven Development. Its main idea is to turn specifications, i.e., technical tasks and static documents, into executable artifacts that will guide our entire code creation process in, say, an IDE, which allows us to move from vague requests that we usually give to neural networks when working to a structured and predictable development pipeline, which will work more professionally. Well, SPIT is no longer just a library, but a whole starter kit for our project, which initializes the folder structure, scripts, and templates. In general, to start, we just need to install it with this one command. We copy it. After that, I just paste this command into my terminal. I will install EV with this command, which is for MacOS. For Windows, you can download UV simply through pip, pipx, or any other package managers. It doesn't matter anymore. After that, I need to restart the terminal. I type this command again, and the installation process for our Speed Kit begins. After that, we just type Spify, and our GitHub Spec Kit appears, respectively. We can also type the command Specify Help. Well, and here there are simply two main commands - initialization and checking the operability of our tool. So, what do we do next? We just type the command to initialize our project, i.e., specify init. project name, well, for example, demo. And you can also specify the GitHub TOKEN in this way. And here you can write your token if you want to use the GitHub token. To avoid rate limits on GitHub usage without a token, I don't particularly need it. I just initialize the project without a GitHub token. And after that, we are offered to choose our AI assistant that we use. The choice here is large. Initially, there were only these three tools. These are Copilot, Claude, and Gemini. Now they have expanded. There is also Open Code, Codex, and ideas like Killcode Ventures, and so on. Well, I, accordingly, choose DD-Code. We also select dependencies based on our operating system and script type. If you have MacOS or Linux, then you choose SH. If you have Windows, then you choose PS, i.e., PowerShell. I have MacOS, so I choose SH. And after that, the initialization process begins, which creates folders in our project, in our working directory. We can, accordingly, look at all this. In principle, Kit creates a separate directory for our project. That is, here CD demo. I was in another directory. It simply created this folder in this path, where there are already created folders with information from the Speed Kit, including for GitHub and Claude. That is, there are commands that are added to it, git settings, well, and, accordingly, our spec itself, which stores three main folders. So, the first folder is Memory. Here is stored the main constitution of our project. This is a separate Markdown file. It consists of a set of immutable rules, architectural decisions, and, in principle, any other coding standards that our agent must strictly follow in any situation. The next folder is, accordingly, script. Here will be stored a set of executable scripts that automate the creation of branches, files, and, in principle, other routine operations that will appear for our agent while it is working. For now, there are only these commands here, but they will be updated over time, accordingly. Well, and the last, third folder is templates. Here are the templates for generating all key documents, i.e., specifications, plans, and tasks. You can open and look at them. In essence, they are needed for the operation of our Speed Kit, respectively. All the information is stored in them here. So, we can open it here and read it. Well, and after that, what we need to do is go to our project, i.e., CD demo, and open code, because I chose code initially when setting up the Speed Kit. After that, without paying attention to the auto-update error, our commands from the Speed Kit are added. There are seven of them added here at the moment. Well, let's go in order, which commands we should use to start. The first command is Constitution, which, accordingly, creates our constitution.md file. And here we just need to describe the main principles of our project in free form, i.e., the technology stack, more or less, what standards and goals it has. After that, our agent will automatically fill in our Markdown file and update all the templates that are stored in our working directory so that they correspond to our principles. The next command we should use is Spashify. Accordingly, it turns our general idea for a new feature into a detailed structured document with requirements, user stories, and acceptance criteria. At this stage, our agent asks clarifying questions to eliminate all ambiguities. Well, that is, the command sounds like specifications, i.e., clarification of any questions, any omissions with the goal that the overall picture of our project is complete. The next command is plan, in other words, technical planning. Based on the finished specification that we have already created, the agent creates a full set of technical documents, i.e., plan.md, model.md, and so on, including a specification for AI and other documents. Here, the architecture, database structure, and specific technologies that we use in our project are determined. Next is the Tasks command, which analyzes our technical plan and breaks it down into a list of executable tasks that the agent will then perform step by step. The results of their execution are also saved. A file for tracking our current progress, both by the agent and by us, including, we can track this. Well, and the tasks are also grouped by phases and marked for possible parallel execution. After the tasks command, we need to run the Anla command, which simply analyzes everything that we have created so far to find any shortcomings, any conflicts, and all sorts of holes that have formed during the creation of all our files, to avoid any shortcomings, inconsistencies, and so on. Well, and after all this, our last command is implement, which is already, as it were, the start of our agent's work. And this is a clear signal that all our preparatory work is completed. After we launch this command, the agent takes our entire generated list of tasks and begins to write code to perform these tasks, respectively, and ultimately implements our project. In general, we have finished with the theory. Let's move on to practice. So, the first command we use is the command. Here we, accordingly, describe the basis of our project. I wrote this request to create a link shortening project. That is, usually a link shortener is as simple as possible. So, I press Enter for it to create the main constitution of our project. Accordingly, it begins to fill in our constitution. Everything, the agent has finished its work. It described here that it updated our constitution and updated, accordingly, all our templates. Also, now all these templates and our other documents that our agent will work with will refer to this constitution. And at any moment, with any request, our agent will know exactly those guidelines that we have written for it in the constitution. That is, well, it highlighted five things. These are, for example, simplicity, that all our saving is in files, and so on. In general, the agent will always know these key principles. Essentially, this was step zero. Now we will move on to the very first step, and this is the specify command. I wrote this specification where I described, essentially, the process of work itself and simultaneously the user experience. That is, the point is that here I set the production, i.e., how our product should look overall, and user stories, i.e., this is the specific experience of a particular user. That is, here I described that as a user, I want to paste a long URL link. That is, for the agent to create such a design, such a user experience, that will make the user want to paste a long URL link, then click the shorten button, that they will want to, then also see the generated short link on the screen, and so on. That is, here simultaneously both the process of our work is shortened, and an indication of how to approach the user experience in this context. After this, we will execute this command, and our agent will start looking for blind spots and ambiguities in our requirements that we have indicated here. So let's press Enter. So, after all this, it gave me four things that need to be clarified before planning. That is, the first is the acceptable response time for redirection by our link that we generated, respectively, the expected traffic volume for our project. What will be our strategy for handling duplicates? That is, when a user uploads two identical ones for shortening, and what method of generating, in principle, a short link will we use. Accordingly, now we just need to answer them. Or we can proceed directly to planning and resolve these issues during planning, but it's better to resolve them all at once so that no gaps remain. So, I wrote down the answers to his questions in this way. That is, well, that a response time of a second is enough for us, that it should be less than 500 milliseconds, because this is an MVP. Also, low traffic because this is, in essence, a demonstration project, in other words, a portfolio project. For duplicates, we return the existing code, because, well, it's logical in general, yes, and that the process of generating our link is simply a six-character string of letters of both cases and numbers. And it must be unique. I also press Enter for the agent to fill in the gaps in the specification now. And we can proceed with peace of mind to planning. Well, and that's it, the agent has filled in the gaps, respectively. And now, all the checkmarks are shown, meaning we are ready for planning. So, we type the command, respectively, our slashplan and type our next command. I have written this prompt. Here, in general, there are just more details on how we need to implement our project. Specifically, technical details, to use one API route, to use a dynamic route for redirection, and for it to write a JSON file, its structure. In general, I will press enter now for now so that it starts planning. If you are not familiar with programming, you do not understand, for example, what I wrote here, then in general, you do not necessarily have to think about all this yourself, because you can use any other neural network as a co-pilot. For example, a good example would be ChatGPT itself or Claude, i.e., you conceptually throw the structure of your project more or less into ChatGPT or Gemini as well. You specify approximately the same things as for our Speed Kit. And in general, you can just consult with the second neural network on any issues, how best to implement it. It's better not to do this in Code-Code, because it slightly interferes with the structure. You can also use Claude in the web interface on Claude.Webchat as another option. That is, if you are not familiar, you can just, for example, in my case, it gave some inaccuracies, inconsistencies, four of them, you can pass these inconsistencies to ChatGPT with the context that you are creating an application for shortening links, you have these goals, tasks, and so on. After that, you will simply consult with the second neural network and give instructions to the main neural network, which I am currently acting as Code-Code. Meanwhile, the slashplan command has finished. And those who are particularly attentive have probably noticed that I skipped the Clarify command, which, in essence, fills in all these missing moments, of which we had four of them before. I skipped it, again, because I filled it in myself. That is, if you have no idea or representation, you can also simply use the Clarify command. Before the slashplan command, to fill in any ambiguities, these gaps in context and understanding, so that there is no ambiguity, everything is clear and according to a specific plan. So, our slashplan command has finished. We can go and see what's going on here for now. And in our directory, a lot has been created here, including specs, a lot of different files that our agent is currently working with. That is, here it has already thrown in JSON for our API for shortening. Then we can go into the plan.md file. And here, accordingly, our plan is stored, which our agent has drafted up to 226 lines. And here you can scroll through. All the information is described. That is, here, for example, is the tree of our repository, how it should look. All the files are described here, what they should represent, what documentation files there are. Including here, yes, some principles, five of them, yes, it has described each one additionally, and other, other information is described in the most detailed way. Again, if I had done this myself, I naturally would not have described it. Now I have spent literally a few minutes, and the agent has thought of everything for me and also helped me close some ambiguities and uncertainties. Okay, we've looked enough. After that, since we have a clear technical plan that is understandable, in principle, both to us as humans and to the machine, as our agent, we can move on to the next command, which is called Tasks. And after that, we will simply run this command without anything. We run the Tasks command. And our agent will now analyze all these files that we have looked at, including the plan. All these files will be analyzed by our agent, and it will create a list of specific tasks that we will have to implement, or rather, simply give the agent a command to start implementing them, and we will drink tea, coffee, and watch how it does it. The agent has finished generating our tasks. We can see all of it. So, task generation complete. Here is a file with all our tasks listed. And in total, it has made 29 tasks in five phases. That is, the first phase is setup, then tests, the core of our project, integration, and simply polishing some technical aspects and including testing. Accordingly, after that, we can simply write our final command implement. But no, I still recommend, just in case, to be sure. You should definitely type the analyze command. We press Enter again. And the essence of this command is again that it simply analyzes whether we have any conflicts between files, any problems between them, any such minor nuances again. This is simply, roughly speaking, a prophylaxis before we will fully run and implement everything. So, Claude has run our analysis. It found some two minor oversights here. In general, it says that it recommends to implement now, but if necessary, it can fix these errors for us. Here they are, some minor ones. I'm not particularly worried about them, they are really trifles. So let's type our coveted command implement and just press Enter and see what happens. Well, and in general, as we can see, the implementation process of our specific tasks is underway. The second phase is already here. Or rather, the next will be the second phase. Now we have the first one - setup tasks, and it performs them one by one slowly. Here it already marks that it has completed the first five, accordingly, and is moving on to phase 3 and 2, the testing phase. And it will do so with each phase, with each task, step by step, checking itself strictly according to what we have set for it, strictly according to its documentation. I also forgot to mention that in our tasks, here you can see, yes, I opened the task.md file now. Here is a list of our tasks, it was shown in the terminal. Here, with a letter P, tasks that can be performed in parallel are marked. The agent also takes this into account. Without the letter P - these are tasks that need to be implemented, and only after their full implementation, proceed to the next one. This is an interesting moment as well, just so you understand it and know. So, it has finished our implementation. It took about 600 seconds, more or less, from what I saw here. That is, in other words, 10 minutes for 28, or rather 29, tasks. It successfully completed all phases, completed all tasks, and writes that it is ready for deployment. I will tell it to launch the project. By the way, there is very little context left for Claude, so we have almost perfectly fit within the 200,000 available to us in Code-Code at the moment. In general, I don't think that even auto-completion will interfere with us much, because all the main context that we need to complete our task is stored in files, which our agent can easily access, which will also give it navigation to other files so that it accesses them as well, so that it has a complete picture of understanding our entire project. So, everything has launched, meaning our application. Here again, a minimalist interface, as we requested. There was one error at startup related to the logo. uh, some format of my logo, but because there was practically no logo, there was an error because of that. Claude quickly fixed it, and, accordingly, all we need to do here is paste the URL. But I just don't have an example of a particularly long link, so I'll just paste the link to the Telegram channel, which I recommend you subscribe to, and it gives a typing error, that there is probably no HTTPS here. Add HTTPS and that's it. Our URL shortened successfully original URL. So, I'll click to go to the address. And yes, it works. It redirects me, accordingly, to our link. If anything, it's localhost here, simply because I haven't connected a domain to our site. This is just a demonstration. But our project has been implemented. Although, of course, one might think that for such a small project as a simple link shortener, there were too many actions. Yes, but here I was just showing the principle of operation itself. This method is also suitable for much longer, larger-scale projects. Not like, of course, a simple link shortener, but it has implemented the basis that works as it should. That is, again, for example, let's check how it works with duplicates. And yes, I entered the same link again. It says that our URL has already been shortened, so it returned the existing short code. If I enter another one here, for example, then it will create a new unique code. Well, and in general, that's all. There's nothing more to show here. To summarize, I want to say that Speed Kit is literally an incredible tool that allows you to implement entire applications in a couple of requests. Moreover, as it seems to me, this is already the maximum stage of low-code, when you give a clear task and the agent performs it clearly. Of course, you should have the project structure in your head, some understanding of its work, but again, no one prevents you from using the same ChatGPT, so that it helps you with this. Or some Gemini, again, the same Claude. In general, there is room for maneuver on your part here. You don't have to rely solely on your own knowledge, which may be limited and so on. In general, if anything, all commands, all links that I used in this video will be in Telegram in a convenient cheat sheet. Well, and I will finish here. Subscribe to the Telegram channel, there is a lot of useful content about neural networks every day. Well, and I hope you found it interesting and useful.